Pass Value From URL to Form

**GFP63** · 04-16-2012 07:04 AM

I want to pass a value via a URL/link to a form field. An answer in "for Dummies" terms would be appreciated. Assuming I get a working solution I need to try to implement it on a web site being built in SiteBuilder on intuitwebsites (whether that helps or hinders a solution). But first things first.

To summarize:

A page has various items a user may request information about. Say the 'red' item, 'blue' item, 'green' item.
I want the user to click a 'Request more information' link that populates a field in the form with the item the link refers to. For example if the user clicks the 'Request more information about the RED item' link a field on the form (i.e. "selected item") is filled with 'RED item'.

I want to avoid a selection menu because

the user has already selected the/an item they are interested in so it would be redundant to them and
the items are subject to change (frequently) and we don't want to have to keep updating the form

Thank you!

**WolfShade** · 04-16-2012 09:01 AM

HTML Code:

<a href="secondPage.html?field=Information%20on%20This">Option A</a>
<a href="secondPage.html?field=Information%20on%20That">Option B</a>
<a href="secondPage.html?field=Information%20on%20Other">Option C</a>

secondPage.html

Code:

 $(document).ready(function() {
   var df = document.forms["getInfo"];
   var thisURL = document.URL;
   var urlArray = thisURL.split("?");
   var thisQS = urlArray[1];
   var QSarray= thisQS.split("=");
   var thisValue = QSarray[1];
   df.information.value = thisValue;
 });

HTML Code:

<form name="getInfo" id="getInfo">
<input type="text" name="information" id="information" value=""/>
<input type="submit" name="submitBtn" id="submitBtn" value="Submit" />
</form>

Haven't tested it, but this should work.

**GFP63** · 04-16-2012 12:06 PM

Thank you for your reply. I am sure I am doing something wrong but this is not working for me. I have loaded my sample files here:

http://www.mandgweb.net/FormTest/page1.html

I don't know the difference between javascript and jquery.
For Dummies!

page1.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>page1</title>
</head>
<body>
	<a href="secondPage.html?field=Information%20on%20This">Option A</a><br>
	<a href="secondPage.html?field=Information%20on%20That">Option B</a><br>
	<a href="secondPage.html?field=Information%20on%20Other">Option C</a>	
</body>
</html>

secondPage.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>page2</title>
	<SCRIPT LANGUAGE="JavaScript">
	$(document).ready(function() {
	  var df = document.forms["getInfo"];
	  var thisURL = document.URL;
	  var urlArray = thisURL.split("?");
	  var thisQS = urlArray[1];
	  var QSarray= thisQS.split("=");
	  var thisValue = QSarray[1];
	  df.information.value = thisValue;
	});
	
	</SCRIPT>		
</head>
<body>
	<form name="getInfo" id="getInfo">
	<input type="text" name="information" id="information" value=""/>
	<input type="submit" name="submitBtn" id="submitBtn" value="Submit" />
	</form>	
</body>
</html>

**WolfShade** · 04-17-2012 11:39 AM

Sorry. I just assumed you already have jQuery loaded. On the second page, between the <head> tags, add:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

**GFP63** · 04-18-2012 10:14 AM

Sweet! Thank you! And I actually got it working on the Intuit SiteBuilder where the site is being built (if you are interested):

http://www.unu4794572.com/Camiones-Usado.html

Again, thank you very much!

Thread: Pass Value From URL to Form

Thread Tools

Display

Pass Value From URL to Form

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions