locked
Assign the currently selected option from a dropdown field to a variable RRS feed

  • Question

  • I'm trying to write some JavaScript, on the editform.aspx page of a custom list that will retreive the currently selected value of a dropdown box called Workflow Status, but with no success. Here's my script, with commented out parts what I have already tried, but have failed for various reasons:

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" id="ShowHideConfirmButton">
    //var WFStatus = $(&quot;select[title=&apos;Workflow status&apos;] option:selected&quot;).text(); // WF Status was empty
    //var WFStatus = $(&quot;select[title*=&apos;Workflow statusField&apos;] option:selected&quot;).text(); // WF Status was empty
    //var WFStatus = $(&quot;select[title=&apos;Workflow statusField&apos;]&quot;).val(); //WFStatus is undefined
    	 						
    //var WFStatus = $(&apos;select[title*=Workflow statusField]&apos;); //Syntax error, unrecognized expression: select[title*=Workflow statusField]
    	 						
    //var WFStatus = $(&quot;input[title=&apos;Workflow status&apos;]&quot;).val() //WFStatus is undefined
    //var WFStatus = $(&quot;select[title=&apos;Workflow status&apos;]&quot;).val() //WFStatus is undefined
    
    
    console.log(&quot;WFStatus: &quot;+WFStatus);
    if (WFStatus == &quot;Yes;) {
    console.log(&quot;Yes&quot;);
    } {
    console.log(&quot;NO&quot;);
    }
    </script>
    

    Can anybody tell me the correct code?

    Thursday, January 4, 2018 4:34 PM

Answers

  • SharePoint lists, libraries and forms generally load data asynchronously, so it's not too predictable when the data will appear. "document.ready" only lets you know that the page HTML has been loaded, not that all JavaScript code has executed.

    from: https://api.jquery.com/ready/

    "The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate."

    So... the code runs when the DOM (the HTML) has fully loaded, not after SharePoint's JavaScript web service calls have completed.

    Two things to try:

    1. Add your JavaScript as a parameterless function, and add the function name to a built-in SharePoint array. (Web search "_spBodyOnLoadFunctionNames" for info.)

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    
    <script type="text/javascript">
    
      function DoIt() {
        alert( $("select[title='Workflow Status']").val())
        // or use a console.log here
      }
    
      _spBodyOnLoadFunctionNames.push("DoIt");
    
    </script>
    

    2. Disable the "Minimal Download Strategy" feature for that site. (MDS messes with lots of JavaScript customizations.


    Mike Smith TechTrainingNotes.blogspot.com
    Books: SharePoint 2007 2010 Customization for the Site Owner, SharePoint 2010 Security for the Site Owner


    Friday, January 5, 2018 7:10 PM

All replies

  • This should work:

    $("select[title='Workflow Status']").val()

    You are probably trying to read the data before SharePoint as loaded it into the page.

    Try this:

    <button onclick="DoIt();return false;" >click me</button>
    <script type="text/javascript">
      function DoIt() {
        alert( $("select[title='Workflow Status']").val())
      }
    </script>

    If that works, then you need to delay the execution of your code until the form has loaded. If you are planning on running the code from a button click or a form submit (maybe using PreSaveAction(), then the above should work.


    Mike Smith TechTrainingNotes.blogspot.com
    Books: SharePoint 2007 2010 Customization for the Site Owner, SharePoint 2010 Security for the Site Owner

    Thursday, January 4, 2018 9:35 PM
  • Hi,

    Please use the Jquery selector below to get the dropdown list selected value:

    <script type="text/javascript">
    $(function() {
    	var dropdownvalue= $("select[title='Workflow Status'] option:selected").val();
    	alert(dropdownvalue);
    });
    
    </script>
    

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, January 5, 2018 7:29 AM
  • Thanks for your help, it's definitely a timing issue as the below script returns "undefined" for both variables (from the dropdown and text field)

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" id="ShowHideConfirmButton">
    
    $(document).ready(function() {
    
    	var WFStatus = $("select[title='Workflow Status']").val()
    	var PTitle = $("input[title='Post title Required Field']").val()
    	console.log(&quot;WFStatus: &quot;+WFStatus);
    	console.log(&quot;PTitle: &quot;+WFStatus);
    
    })
    </script>

    I would have thought however that the document.ready funciton would solve that problem?

    For further info, I have a third button on my list form, which is only to be shown when the dropdown is a certain value. This third button will have an onClick eventReceiver to then set the value of the dropdown. Essentially we don't trust our users to control the dropdown appropriately and want to use buttons on the form to control the value of the dropdown.

    So the script needs to run on page load (not on a button) to detect the value of the dropdown field, then show/hide the button 3rd button.  I will also be hiding the dropdown field itself eventually.

    The script is currently on the editform.aspx page below all of the form fields - i'm editing it using SharePoint Designer 2013.

    Friday, January 5, 2018 11:09 AM
  • Hi,

    document.ready will make sure the Jquery run after the value dom in the page has been loaded completely, so please use it in your code and please append option:selected  to your dropdown selector like below to get the dropdown list selected value:

    <script type="text/javascript">
    $(function() {
    	var workflowstatus= $("select[title='Workflow Status'] option:selected").val();
    	alert(workflowstatus);
    	var posttitle= $("input[title='Post title Required Field']").val();
    	alert(posttitle);
    });
    
    </script>

    Result:

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Friday, January 5, 2018 11:39 AM
  • SharePoint lists, libraries and forms generally load data asynchronously, so it's not too predictable when the data will appear. "document.ready" only lets you know that the page HTML has been loaded, not that all JavaScript code has executed.

    from: https://api.jquery.com/ready/

    "The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate."

    So... the code runs when the DOM (the HTML) has fully loaded, not after SharePoint's JavaScript web service calls have completed.

    Two things to try:

    1. Add your JavaScript as a parameterless function, and add the function name to a built-in SharePoint array. (Web search "_spBodyOnLoadFunctionNames" for info.)

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    
    <script type="text/javascript">
    
      function DoIt() {
        alert( $("select[title='Workflow Status']").val())
        // or use a console.log here
      }
    
      _spBodyOnLoadFunctionNames.push("DoIt");
    
    </script>
    

    2. Disable the "Minimal Download Strategy" feature for that site. (MDS messes with lots of JavaScript customizations.


    Mike Smith TechTrainingNotes.blogspot.com
    Books: SharePoint 2007 2010 Customization for the Site Owner, SharePoint 2010 Security for the Site Owner


    Friday, January 5, 2018 7:10 PM