locked
Javascript/jquery to set value on the form RRS feed

  • Question

  • Hello Everyone,

    I received request from business to develop solution which sets one field on the form according to another value on the page. 

    I have to do this on DispForm page. So I have two webparts: one is a standard webpart on DispForm which displays metadata of the item and second webpart which is a list webpart. User can create new items on this second webpart, so once they press "Add new item" they should already have fulfilled one of the field according to value from first webpart.

    Please take a look on below screenshot:

    First of all I have added new CEWP into DispForm page and added following code to get value from Title (on the form) once "Add new item" is pressed:

    $('#idHomePageNewItem').click( function() {
    	console.log("Inside onclick function");
    	var defaultV = $("input[title='Title Required Field']").val();
    	console.log(defaultV);
    	console.log("Field should have been displayed.");
     } );

    Unfortunately I always get undefined as a result in console:

    So far I haven't found any solution on how to overcome this issue. Do you have any ideas on how I can implement it successfully?

    Thanks in advance.


    Tuesday, July 10, 2018 9:54 AM

Answers

  • Hi,

    How did you pass the data from DispForm.aspx page to the NewForm.aspx page? They are different pages.

    We need to store the data to query string on button click and set the field on NewForm.aspx page using the query string.

    In the DispForm.aspx page, use JavaScript behind the button to open the NewForm.aspx page with the custom string. Herei s a demo to pass the current item id to NewForm.aspx page with custom string “RelativeID”.

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    
    function GetParameterValues(param) { 
    
                    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    
                    for (var i = 0; i < url.length; i++) { 
    
                                    var urlparam = url[i].split('='); 
    
                                    if (urlparam[0] == param) { 
    
                                                    return urlparam[1]; 
    
                                    } 
    
                    } 
    
    }
    
    function buttonclick ()
    
    {
    
    //get current item id
    
    var itemId = GetParameterValues('ID');
    
    var newLink= "http://sp/sites/team/Lists/<list>/NewForm.aspx?RelativeID="+itemId;
    
    window.open(newLink);
    
    };
    
    </script>
    
    <button text="create new item" onclick="javascript:buttonclick()">new item</button>


    Then in the NewForm.aspx, we can get the item properties based on the id. Try using the following script in the NewFrom.aspx to get the “RelativeID” from Url and get the item from the source list using CSOM.

    Per my test, it works in SharePoint 2010 and IE8 or other versions.

    Note: Change the list name and element ids in the script.

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    
    </script>
    
    <script language="javascript" type="text/javascript">
    
    //source list name
    
    var listName='cl01';
    
    var itemId = GetParameterValues('RelativeID'); 
    
    var clientContext ;
    
    var oItem;
    
      setTimeout(function() {
    
                    if(itemId!=null && itemId!="undefined"){
    
          SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getItem);
    
                    } 
    
      }, 200);           
    
    function GetParameterValues(param) { 
    
                    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    
                    for (var i = 0; i < url.length; i++) { 
    
                                    var urlparam = url[i].split('='); 
    
                                    if (urlparam[0] == param) { 
    
                                                    return urlparam[1]; 
    
                                    } 
    
                    } 
    
    } 
    
    function getItem() {
    
        clientContext = new SP.ClientContext.get_current();
    
        var oList = clientContext.get_web().get_lists().getByTitle(listName);
    
                    oItem = oList.getItemById(itemId);
    
       
    
        clientContext.load(oItem);
    
        clientContext.executeQueryAsync(
    
            Function.createDelegate(this, this.onQuerySucceededRetrieve),
    
            Function.createDelegate(this, this.onQueryFailed)
    
        );
    
    }
    
    function onQuerySucceededRetrieve(sender, args) {
    
                    // get item information
    
                      var title=oItem.get_item('Title');
    
                      var color=oItem.get_item('color');
    
                      // if the "color" is a lookup column
    
                      //var color = oItem.get_item("color").get_lookupValue();
    
                      console.log("title:"+title+";color:"+color);
    
                      // use F12 to get the ids of Title field and color field elements. Change ids to yours.
    
                      document.getElementById("<field element id>").value = title;
    
                      document.getElementById("<field element id>").value = color; 
    
    }
    
    function onQueryFailed(sender, args) {
    
        alert('Request failed. ' + args.get_message() +
    
            '\n' + args.get_stackTrace());
    
    }
    
    </script>


    Best regards,

    Linda Zhang


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


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Wednesday, July 11, 2018 9:05 AM
  • Hello Linda,

    Thanks for suggestion.Actually I have done it in the same way. I have replaced standard "Add new item" link with my custom link which passed ID value of the item. NewForm script queried list using this ID and get necessary values to the form.

    Issue with IE8 was present because I used console.log which apparently works only in developer mode.

    Thanks again.

    • Marked as answer by MateuszBill Thursday, August 16, 2018 1:19 PM
    Thursday, August 16, 2018 1:19 PM

All replies

  • I just realized that if I switch Document Mode in my browser from IE 8 (it is set by default) to some higher version everything is working fine. I would like o avoid changing it on all machines in my company.

    Do you see any workaround for this? 

    Tuesday, July 10, 2018 2:27 PM
  • Hi,

    How did you pass the data from DispForm.aspx page to the NewForm.aspx page? They are different pages.

    We need to store the data to query string on button click and set the field on NewForm.aspx page using the query string.

    In the DispForm.aspx page, use JavaScript behind the button to open the NewForm.aspx page with the custom string. Herei s a demo to pass the current item id to NewForm.aspx page with custom string “RelativeID”.

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    
    function GetParameterValues(param) { 
    
                    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    
                    for (var i = 0; i < url.length; i++) { 
    
                                    var urlparam = url[i].split('='); 
    
                                    if (urlparam[0] == param) { 
    
                                                    return urlparam[1]; 
    
                                    } 
    
                    } 
    
    }
    
    function buttonclick ()
    
    {
    
    //get current item id
    
    var itemId = GetParameterValues('ID');
    
    var newLink= "http://sp/sites/team/Lists/<list>/NewForm.aspx?RelativeID="+itemId;
    
    window.open(newLink);
    
    };
    
    </script>
    
    <button text="create new item" onclick="javascript:buttonclick()">new item</button>


    Then in the NewForm.aspx, we can get the item properties based on the id. Try using the following script in the NewFrom.aspx to get the “RelativeID” from Url and get the item from the source list using CSOM.

    Per my test, it works in SharePoint 2010 and IE8 or other versions.

    Note: Change the list name and element ids in the script.

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    
    </script>
    
    <script language="javascript" type="text/javascript">
    
    //source list name
    
    var listName='cl01';
    
    var itemId = GetParameterValues('RelativeID'); 
    
    var clientContext ;
    
    var oItem;
    
      setTimeout(function() {
    
                    if(itemId!=null && itemId!="undefined"){
    
          SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getItem);
    
                    } 
    
      }, 200);           
    
    function GetParameterValues(param) { 
    
                    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    
                    for (var i = 0; i < url.length; i++) { 
    
                                    var urlparam = url[i].split('='); 
    
                                    if (urlparam[0] == param) { 
    
                                                    return urlparam[1]; 
    
                                    } 
    
                    } 
    
    } 
    
    function getItem() {
    
        clientContext = new SP.ClientContext.get_current();
    
        var oList = clientContext.get_web().get_lists().getByTitle(listName);
    
                    oItem = oList.getItemById(itemId);
    
       
    
        clientContext.load(oItem);
    
        clientContext.executeQueryAsync(
    
            Function.createDelegate(this, this.onQuerySucceededRetrieve),
    
            Function.createDelegate(this, this.onQueryFailed)
    
        );
    
    }
    
    function onQuerySucceededRetrieve(sender, args) {
    
                    // get item information
    
                      var title=oItem.get_item('Title');
    
                      var color=oItem.get_item('color');
    
                      // if the "color" is a lookup column
    
                      //var color = oItem.get_item("color").get_lookupValue();
    
                      console.log("title:"+title+";color:"+color);
    
                      // use F12 to get the ids of Title field and color field elements. Change ids to yours.
    
                      document.getElementById("<field element id>").value = title;
    
                      document.getElementById("<field element id>").value = color; 
    
    }
    
    function onQueryFailed(sender, args) {
    
        alert('Request failed. ' + args.get_message() +
    
            '\n' + args.get_stackTrace());
    
    }
    
    </script>


    Best regards,

    Linda Zhang


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


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Wednesday, July 11, 2018 9:05 AM
  • Hi,

    How are things going?

    Does my suggestion help you?

    If you think it is helpful, you can mark it as answer and it will help others who meet the same issue in this forum.

    Best regards,

    Linda Zhang


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


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Tuesday, July 17, 2018 8:52 AM
  • Hello Linda,

    Thanks for suggestion.Actually I have done it in the same way. I have replaced standard "Add new item" link with my custom link which passed ID value of the item. NewForm script queried list using this ID and get necessary values to the form.

    Issue with IE8 was present because I used console.log which apparently works only in developer mode.

    Thanks again.

    • Marked as answer by MateuszBill Thursday, August 16, 2018 1:19 PM
    Thursday, August 16, 2018 1:19 PM