Thursday, June 27, 2013

Get Query String and Set List Form Field Value using jQuery

Years back, I used JavaScript for the similar requirement in SharePoint 2007: Get the value from URL Query String and populate the value of SharePoint list form field: How to Get the Query String from URL and Set SharePoint List Form field value?

Now in SharePoint 2010, lets use jQuery to get query string from URL and populate list form field's value and SharePoint designer Quick Step to pass the query string value to target URL.

Scenario: We've a "Projects" list with list of projects, and "Project Metrics" list to capture project metrics.We need to add project metrics to the projects from a context (ECB) menu item from Projects list.

Overall Idea:

  1. Lets add a Quick Step using SharePoint designer to pass query string. 
  2. On clicking the Quick Step Link, say "Add Project Metrics", It navigates to the NewForm URL of Project Metrics list with QueryString "ProjectID".
  3. Lets get the query string from URL and set the NewForm's "Project ID" field of Project metrics list item. 
Get Query String and Set List Form Field Value using jQuery
Add a Quick Step in SharePoint Designer:
Create a new Quick Step in SharePoint designer with "Navigate to URL" selected. Enter the below code in it, to navigate to NewForm.aspx file of Project Metrics list with ProjectID value in URL.
javascript:SP.UI.ModalDialog.showModalDialog({url:"/Lists/ProjectMatrics/NewForm.aspx?ProjectID={ItemId}",dialogReturnValueCallback:
 function(dialogResult, returnValue) { 
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK) }}) 
sharepoint list newform query string
Get Query String and Populate List Form Field Value
In NewForm.aspx of the Project Metrics list, Add a CEWP and link to the below script. Basically, it fetches the Query string "ProjectID" from URL and sets the "Project ID" field in Project metrics list item.
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

        <script language="javascript" type="text/javascript">

         $(document).ready(function() {

            //Get the Query string value
            var qs = getQueryString('ProjectID'); 

            //Set the Value of "ProjectID" field
     $("input[Title='Project ID']").val(qs);

            //Disable "Project ID" field
     $("input[Title='Project ID']").attr("disabled", "disabled");
         //You can also make the field read-only: $("input[Title='Project ID']").attr('readonly','true');

   });

          //Function to Get Query String from URL
          function getQueryString(key){
            var regex=new RegExp('[\\?&amp;]'+key+'=([^&amp;#]*)');
            var qs=regex.exec(window.location.href);
            return qs[1];
          }

          //Clear the "Disabled" property on Save. If its not enabled, Mandatory field validation fails
   function PreSaveAction() {
     $("input[Title='Project ID']").attr("disabled", "");
     return true;
   }

         </script>
Result: Project ID field is populated from the query string ProjectID from URLsharepoint set field value query string



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Five Challenges in SharePoint Security
...And How to Solve Them. Free White Paper
*Sponsored


Check out these SharePoint products:

2 comments :

  1. Just what I was looking for but I can only get the readonly option to work.
    For some reason when disabled, the values aren't populated into the list. Also, if the fields ARE set to mandatory, the form always asks to fill the mandatory field in, even though populated as if the 'PreSaveAction' function isn't working at all! Any ideas as to why?

    ReplyDelete
    Replies
    1. Rick,
      When you disable fields, they will **NOT** be populated in the list. You got to enable them back on "PreSaveAction" as I did above. Make sure your code is error free for the presaveaction to fire!

      Delete

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...