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:
- Lets add a Quick Step using SharePoint designer to pass query string.
- On clicking the Quick Step Link, say “Add Project Metrics”, It navigates to the NewForm URL of Project Metrics list with QueryString “ProjectID”.
- Lets get the query string from URL and set the NewForm’s “Project ID” field of Project metrics list item.
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) }})
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="https://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('[\\?&]'+key+'=([^&#]*)');
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 URL
Here is another example I’ve used in SharePoint Online:
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(setFieldValue, "sp.js");
});
function setFieldValue()
{
var ItemID = GetParameterValues('ID');
if(ItemID)
{
//set the value of Item ID Field Value
$("input[title='Item ID']").val(ItemID);
//disable Field
$("input[title='Item ID']").prop("disabled", true);
}
}
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];
}
}
}
//Enable the fields during "PreSaveAction" otherwise, their values will not get saved!
function PreSaveAction()
{
$("input[title='Item ID']").removeAttr('disabled');
return true;
}
</script>
what changes should i make in case my url has %3F instead of ? and %3D insead of =
I use $(“input[Title=’1234′]”).removeAttr(‘disabled’);
in PreSaveAction. Everything works fine.
So frustrated 🙂
I can’t seem to get the PreSaveAction to fire in SharePoint 2010 and so the disabled attribute isn’t being unset that I can see as the list item is created but the field set isn’t there
If I comment out the disable attribute line the item goes in as you expect
Is there anyway to prove of ensure the PreSaveAction fires?
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?
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$.
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?
John
Thanks a lot! Also works in SP2013 (Online).
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?
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!