www.webdeveloper.com
Results 1 to 5 of 5

Thread: Pass Value From URL to Form

  1. #1
    Join Date
    Apr 2012
    Posts
    3

    Pass Value From URL to Form

    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
    1. the user has already selected the/an item they are interested in so it would be redundant to them and
    2. the items are subject to change (frequently) and we don't want to have to keep updating the form

    Thank you!

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    Apr 2012
    Posts
    3
    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>

  4. #4
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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>
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  5. #5
    Join Date
    Apr 2012
    Posts
    3
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles