Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

How to insert form variable into URL of redirect page?

Here's a simple form, what javascript can add form data to landing page URL



6:45 am on Dec 4, 2009 (gmt 0)

5+ Year Member

I need people filling out a subscribe form to type in their referral ID, and have the referral ID become part of the URL string of the redirect page.

In other words, if someone typed in "1234567" in the "code" field, after submitting the form they would be directed to http://example.com/?1234567

If anyone can help me with whatever javascript additions could make that happen, it would be a huge favor, thanks.

<FORM METHOD="POST" ACTION="http://www.example.com/subscribe.cgi">
<input type="hidden" name="redirect" value="http://www.example.com/?{code}">
<input TYPE="text" name="code" size="20" id="code"></TD>
<input type="SUBMIT" name="submit" value="Submit">

[edited by: Fotiman at 2:58 pm (utc) on Dec. 4, 2009]
[edit reason] Examplified URLs [/edit]


8:18 pm on Dec 4, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I'd suggest building the "Javascript disabled" solution first. Post to a small parser script that takes the input from the field entered, then redirects it to the subscribe URL. This means it will work without Javascript, like

<FORM METHOD="POST" ACTION="http://www.example.com/my-code-parser.cgi">
<input type="text" name="code">

So now you have your parser script assembling the URL for you, then printing a location header to the original script which contains the redirect string. Works without JS. NOW you can safely add JS methods to do what you want. In this method, we'll re-introduce the redirect field.

<FORM METHOD="POST" ACTION="http://www.example.com/my-code-parser.cgi" onSubmit="return buildURL(this);">
<input type="text" name="code">
<input type="hidden" name="redirect" value="">

The onSubmit is important in case someone presses enter instead of the button. The return is important because we will be returning false from our function, which is what stops the form from submitting. We are going to do that with Javascript, and we don't want it submitting twice. The "this" keyword refers to the form object itself, which we are going to alter a few things with JS.

We are going to build the redirect URL, but also change the action back to your original script.

<script type="text/javascript">
function buildURL(form) {
if (form.code.value!='') {
var code = form.code.value;
// Comment the alert and uncomment the form.submit() line
alert('form will be posted to ' + form.action + ' redirect: ' + form.redirect.value);
else { alert('Ahem. Enter promo code.'); }
return false;


Now you have both accessibility and enhancement via JS. One more bit of advice, **never** use reserved names like submit, reset, form, etc. for id'ed elements or form names:

<input type="SUBMIT" name="submitButton" value="Submit">


Featured Threads

Hot Threads This Week

Hot Threads This Month