/    Sign up×
Community /Pin to ProfileBookmark

Pass Value From URL to Form

Copy linkTweet thisAlerts:
Apr 16.2012

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:

[LIST]

  • [*]

    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’.


    • [/LIST]

    I want to avoid a selection menu because

    [LIST=1]

  • [*]

    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


    • [/LIST]

    Thank you!

    to post a comment
    JavaScript

    4 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @WolfShadeApr 16.2012 — [code=html]
    <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>
    [/code]

    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;
    });
    [/CODE]
    [code=html]
    <form name="getInfo" id="getInfo">
    <input type="text" name="information" id="information" value=""/>
    <input type="submit" name="submitBtn" id="submitBtn" value="Submit" />
    </form>
    [/code]
    Haven't tested it, but this should work.
    Copy linkTweet thisAlerts:
    @GFP63authorApr 16.2012 — 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>
    [/CODE]

    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>
    [/CODE]
    Copy linkTweet thisAlerts:
    @WolfShadeApr 17.2012 — 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>[/CODE]
    Copy linkTweet thisAlerts:
    @GFP63authorApr 18.2012 — 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!
    ×

    Success!

    Help @GFP63 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...