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

[timg]

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]

[rocknbil]

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; 
 form.redirect.value='http://www.example.com/?'+code; 
 form.action='http://www.example.com/subscribe.cgi'; 
 // Comment the alert and uncomment the form.submit() line 
 alert('form will be posted to ' + form.action + ' redirect: ' + form.redirect.value); 
 //form.submit(); 
 } 
 else { alert('Ahem. Enter promo code.'); } 
 return false; 
  
} 
</script> 

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">