Pre populate SharePoint DropDown column in NewForm.aspx depending on query String using Content Editor Web Part and JavaScript.
Step 1: Kindly follow my intital post to understand how java script can be used in Content Editor Web Part.
Step 2: Consider a list like "Announcement" with custom "Drop Down" type column.
Step 3: Edit the page. You can modify the URL to edit NewForm.aspx. To the end of the URL append PageView=Shared&ToolPaneView=2. This will open the form in edit mode.
your URL must be like this http://sample.com/sites/BasicJs/Lists/Announcements/NewForm.aspx?PageView=Shared&ToolPaneView=2
Step 4: Add Content Editor Web Part.
Step 5: Write the following code in a text. save as html. upload into SharePoint.Link this html page to content editor web part or Write code in Web Part's text editor directly.
Step 6: Code. Here the query string value from the URL will determine with what value column "Announcement Category" must be populated with.If the URL is like http://sample.com/sites/BasicJs/Lists/Announcements/NewForm.aspx?AnnouncementCategory=Public
<html>
<head>
<SCRIPT type=text/javascript src="/mysites/myDocLibrary/JsFiles/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="/mysites/myDocLibrary/JsFiles/JsFiles/jquery.SPServices-0.5.6.min.js"></SCRIPT>
<SCRIPT type=text/javascript>
$(document).ready(function()
{
var queryStringVals = $().SPServices.SPGetQueryString();
var AnnCategory = queryStringVals["AnnouncementCategory"];
var AnnCategorytField = getTagFromIdentifierAndTitle("select","","Announcement Category");
//alert("Control is " + AnnCategorytField.name);
setSelectedOption(AnnCategorytField,AnnCategory);
});
function setSelectedOption(select, value)
{
var opts = select.options;
var l = opts.length;
if (select == null) return;
for (var i=0; i < l; i++)
{
if (opts[i].text == value)
{
select.selectedIndex = i;
return true;
}
}
return false;
}
function getTagFromIdentifierAndTitle(tagName, identifier, title)
{
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++)
{
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len))
{ return tags[i]; }
}
return null;
}
</SCRIPT>
</head>
<Body></Body>
</html>
Step 7: To remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page.
Step 8: Now you can see that the column "Announcement" is populated with the value from the query string "Public".
Leave your comments below.
