none
jQuery update of hidden field does not appear to work RRS feed

  • Question

  • I have added a hidden field to a page using a content editor web part.

    I have also tried to save a value into it, but when I try to inspect the field in IE, I don't see anything added to the field after the jQuery executes, so I'm not sure what's going on, as I had expected the value of the hidden field to change as soon as the jQuery executed.

    The line of code specific to add the value is shown here:

    jq("#slctdMembrHidn").val(picPath);

    The 'picPath' variable has already been updated with a relative path to an image.

    I have even added this line of code immediately after the above line to check the value of the hidden field with this:

    alert(jq("#slctdMembrHidn").val());

    and it just returns a value of "undefined", so I'm mystified and wondering why the code is not working.

    Thanks for looking.

    Henry

    Tuesday, March 7, 2017 8:59 PM

All replies

  • Hi Henry,

    If the hidden field is a input box, please check the code demo below:

    <input type="hidden" value="" id='slctdMembrHidn'>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(function() {
      // Handler for .ready() called.
      $("#slctdMembrHidn").val("test");
      alert($("#slctdMembrHidn").val());
    });
    </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

    Wednesday, March 8, 2017 7:42 AM
  • Jerry, I tried your idea right at the top of my document ready function and for some reason the value of "Test" which you suggested that I put into the hidden field did not apparently work, because when I try to print out the value retrieved from the hidden field, with an alert, I keep getting back a value of "undefined" instead of "Test". Here's a copy of my current code which is in a Script Editor Webpart:

    <script type="text/javascript">

    var jq = jQuery.noConflict();

    var picPath = "";
    var filRefFnd = false;

    function getListData(myval)
    {
    var serverRelativeUrl=_spPageContextInfo.serverRequestPath;
    var myCntxt = new SP.ClientContext.get_current();
        var oWeb = myCntxt.get_web();
    var list = oWeb.get_lists().getByTitle("Team Member Pictures");
        var items = list.getItems(SP.CamlQuery.createAllItemsQuery());

        myCntxt.load(items);
        myCntxt.executeQueryAsync(
       Function.createDelegate(this,function(){captureCorrectPicturePath(items,myval);}),
            function(sendera,args)
    {
               console.log(args.get_message());
            }
    );
    }

    function captureCorrectPicturePath(items,myval) 
    {
    filRefFnd = false;
    var inputStr1 = '<input id="slctdMembrHidn" type="hidden" val="';
    var inputStr2 = '" ></input>';
    var hdnFldhtml = "";

    for(var i = 0; i < items.get_count(); i++) 
    {
    var item = items.getItemAtIndex(i);    
    var fields = item.get_fieldValues(); 
    var title = fields.Title.toString();

    if(myval == title)
    {
    //jq("#divPicPath").empty();
    picPath = fields.FileRef.toString();
    jq("#slctdMembrHidn").val(picPath).removeClass("hidden").addClass("display");
    //hdnFldhtml = hdnFldhtml + inputStr1 + picPath.toString() + inputStr2;
    //jq("#divPicPath").append(hdnFldhtml).removeClass("hidden").addClass("display");
    filRefFnd = true;
    break;
    }
    }
    }

    function processSelectedTeamMember(myval)
    {
        getListData(myval);
    }

    jq(document).ready(function()
    {
        var slctdTmMmbr;
    var outStr ="";

    jq("#slctdMembrHidn").val("Test");
    alert(jq("#slctdMembrHidn").val());

    jq("#divPicPath").addClass("hidden");

        jq("#slctdTeamMember").on("change", function(event)
        {
    slctdTmMmbr = jq("#slctdTeamMember").val().toString();

            if(slctdTmMmbr != " ")
            {
                processSelectedTeamMember(slctdTmMmbr );

    if(filRefFnd)
    {
    outStr = jq("#slctdMembrHidn").val();
    if(outStr != null)
    {
       alert("THE 'slctdMembrHidn' FIELD VALUE IS (" + outStr.toString() + ")!");
    }
    }
            }
    else
    {
    jq("#slctdMembrHidn").val("");
    jq("#divPicPath").removeClass("display").addClass("hidden");
    }


        });

    });

    </script>

    and here's the stylesheet entries the code uses:

    <style>
    .hidden {
        display: none;
    }
    .display {
    display:inline;
    }
    </style>

    and finally here's the actual html code for the "div" containing the "hidden" field and its value (which is another webpart, a content editor webpart):

    <div id="divPicPath" >
    <input id="slctdMembrHidn" type="hidden" ></input>
    </div>

    Any idea why the value is not making it to the hidden field?

    Thanks.

    Henry

    Thursday, March 9, 2017 4:41 AM