Button that sets dropdown value onclick in Edit Form SPO 2013

Question

INFO/OVERVIEW

Using Sharepoint Online 2013/Classic view. The library name is SourcesLibrary

On the *SourcesLibrary** Edit Form, there are (3) columns:

• The dropdown column is called Document, which has the following choices available:

  • BackgroundReport
  • PermitRequest

• The text column is called PeopleId (this field is ONLY visible when the Document field's value is BackgroundReport)

• The other text column is called contentTypeText (upon creation of a new document, a workflow in SPD sets the value of this field to whatever the Content Type is -- in this case, the value of the contentTypeText field can either be empty, BackgroundReport, or PermitRequest

MY REQUEST

I want a button on the Edit Form that re-populates the value of the dropdown in the Document field. Here's a use case:

1. I open an Edit Form for a Background Report in the SourcesLibrary document library
2. The Document field is set to BackgroundReport
3. I click the button, and the Document dropdown field is re-set to the value BackgroundReport, because the contentTypeText field has the value BackgroundReport
4. As a result, the fields conditionally hidden onLoad are no longer hidden, BUT the value of the Document dropdown field remains BackgroundReport

Below is the show/hide script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.01/jquery.SPServices.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.2/jquery.SPServices-0.7.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// alert('onload');
// Hides Field on load
$("nobr:contains('Document')").parent('h3').parent('td').parent('tr').show();
$("nobr:contains('contentTypeText')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('PeopleId')").parent('h3').parent('td').parent('tr').hide();
//Show/hide columns based on Choice Field Selection
$("select[title='Document']").change(function () {
if ($("select[title='Document']").val() == "BackgroundReport") {
// If Document dropdown YES equals Background Report
$('nobr:contains("Document")').closest('tr').show();
$('nobr:contains("contentTypeText")').closest('tr').hide();
$('nobr:contains("PeopleId")').closest('tr').show();
} else {
// If Document dropdown NO equals Background Report
$("nobr:contains('Document')").parent('h3').parent('td').parent('tr').show();
$("nobr:contains('contentTypeText')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('PeopleId')").parent('h3').parent('td').parent('tr').hide();
}
});
});
</script>

Thanks in advance, and let me know if there's anything I can add to add clarity.

Answer 1

We can use the code below to achieve it.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    //add button after dropdown
    $("select[title='Document']").after("<input id='resetBtn' type='button' value='Reset'/>");  
    $("#resetBtn").click(function(){
        $("select[title='Document']").val($("input[title='contentTypeText']").val());
        HideFields($("select[title='Document']").val());
    });
    // Hides Field on load    
    HideFields($("select[title='Document']").val());
    //Show/hide columns based on Choice Field Selection
    $("select[title='Document']").change(function () {
        HideFields($(this).val());      
    });
});
function HideFields(value){
    if (value == "BackgroundReport") {
        // If Document dropdown YES equals Background Report    
        $('nobr:contains("contentTypeText")').closest('tr').hide();
        $('nobr:contains("PeopleId")').closest('tr').show();
    }else{
        // If Document dropdown NO equals Background Report 
        $("nobr:contains('contentTypeText')").closest('tr').hide();
        $("nobr:contains('PeopleId')").closest('tr').hide();
    }
}
</script>