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.
 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="" 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;

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.
Document SharePoint Farm
Automatically generate SharePoint documentation.

Check out these SharePoint products:


  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?

    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!

  2. Thanks a lot! Also works in SP2013 (Online).

  3. Great Article!This is similar to the task I am currently working on but in my case I am tasked with populating multiple field values in the relational lists .
    Parent list is document library
    Child list is just a list that holds ratings based on the document uploaded the document library.
    Can you help please?

  4. Thanks for this - Have been looking for just this type of script. Have tried in in 2013 though it seems to be truncating the value of the query string value sometimes - Have used a value of "This is a test" but am only getting "This is" in the field. Wondering if any known reason for this?

    1. Try wrapping your query string parameter inside characters like "$" and use Split function to get the parameter value. E.g. Instead of ?Param=Value use: ?Param=$Value of the Parameter$.


Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...