StanSight

Get Submitted Form Values

Wed, Feb 11, 2009 – 2:15 pm

Getting the values from a form which has been submitted is easy if you are using a server side language such as PHP, JSP, or ASP.

But – sometimes you can’t use a server side language (restrictions of your ISP, you need to create a CD based demo or prototype, etc..), and this is where JavaScript can step in and save the day.

The right form method

If your form has uses the “post” method (<form method=”post”>) then you are out of luck. The form field values are essentially hidden from the client side – but if your form uses the “get” method (<form method=”get”>) then you are in luck, because when the form posts to the target page all the field names and values are stuck on as part of the URL.

Using this knowledge and the fact that “window.location.href” will return the value of the URL address bar, allows you to use JavaScript retrieve the form field the values that you need.

The Functions

OK, the address bar can look like a mess after a form submit. But if you look at it closely you’ll see that the names of your form fields and the values that they have been assigned are part of that mess.

I’ve written some functions which you can use to painlessly pick out the values of the fields your are interested in and then display them on the screen (or assign their values to other HTML objects, such as hidden input fields or DIV’s)

Take the functions below and include them between the HEAD tags of the target page.

Get values

If you need to just retrieve the value so you can use it in your own JavaScript functions then just use the getParameter function.

Example:

<script>
	if (getParameter("loginName") == "") {
		alert("You must supply a login name");
	}
</script>

Code:

//////////////////////////////////////////////////////////////////////////////
// getParameter
//
//		If page was called as an action from a form post (method="get") then
//		get the value of the parameter "paramName" from the name/value pairs
//		in the current URL
//
//  @param   paramName	- name of parameter to retreive value of
//  @return  results[1]	- value of parameter extracted from location.href
//////////////////////////////////////////////////////////////////////////////
function getParameter(paramName) {

	// Build regex expression to find paramName in window.location.href
	// and then parse out everything after the "=" sign and before the "&"
	// sign
	paramName = paramName.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]"+paramName+"=([^&#]*)";
	var regex = new RegExp( regexS );
	var results = regex.exec( window.location.href );

	if( results == null )
		return "";
	else {
		returnValue = unescape(results[1]);				// Unescape it
		returnValue = returnValue.replace(/\+/g, ' ');	// Replace plus sign with space
		return returnValue;
	}
}

Assign values

If you wish to take the field value and assign it to some other element on your page (like a hidden field) then you can use the copyParameter function to copy the value of the field to any other element on your page who has an ID that is the same as the fields name.

Example:

	<input type="hidden" id="loginName" name="loginName">
	<script>copyParameterValue("loginName");</script>

Code:

//////////////////////////////////////////////////////////////////////////////
// copyParameter
//
//		Take the results of the getParameter function and assing it to the
//		value of an element on the page whoose ID matches the parameters name
//
//  @param   paramName	- name of parameter to retreive value of *AND* ID
//						  of element on page
//  @return  void
//////////////////////////////////////////////////////////////////////////////
function copyParameterValue(paramName) {
	var paramValue = getParameter(paramName);
	if (document.getElementById(paramName) != null) {
		document.getElementById(paramName).value = paramValue;
	}
}

Show values

If you just wish to display the value of a field on the page then just use the showParameter function where ever you want the value displayed

Example:

<td>Login Name: <script>showParameter("loginName")</script></td>

Code:

//////////////////////////////////////////////////////////////////////////////
// showParameter
//
//		Display the results of the getParameter function at the current
//		location in the document body.
//
//  @param   paramName	- name of parameter to retreive value of
//  @return  paramValue	- value of paramter written to the document.
//////////////////////////////////////////////////////////////////////////////
function showParameter(paramName) {
	// If object exists on page with the same ID as the param name then
	// copy set its value to the parameter value
	copyParameterValue(paramName);

	var paramValue = getParameter(paramName);	// Get parameter value
	document.write(paramValue);					// Write to document
}