homepage Welcome to WebmasterWorld Guest from 54.211.97.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
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

5+ Year Member



 
Msg#: 4036745 posted 6:45 am on Dec 4, 2009 (gmt 0)

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

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



 
Msg#: 4036745 posted 8:18 pm on Dec 4, 2009 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved