Changing Form Thank-You Page URL On-the-Fly

When the URL of the thank-you page needs to be different when a certain option is checked, here is how to do it.

The instructions are for a radio button selection. The code can be modified for a checkbox check or a dropdown list selection.

For the example, let's assume the form is something like this:

If the "Pay now" radio button is checked when the form is submitted, the browser is redirected to http://example.com/paynow.html. Otherwise, it is redirected to http://example.com/paylater.html.

The example form has a redirect hidden field with id="redirect" (see code immediately below). An id is required for the method to work. The value may be something other than "redirect", in which case the JavaScript (see further below) will need to be modified accordingly.

<input 
   type="hidden" 
   id="redirect" 
   name="redirect" 
   value="http://example.com/paynow.html" />

The value of the hidden field will be changed with JavaScript if needed. For browsers with JavaScript disabled, the value will not change.

The pay now/pay later radio buttons also each have an id.

<input 
   type="radio" 
   id="paynow" 
   name="paychoice" 
   value="now" 
   checked="checked" />Pay now 
<input 
   type="radio" 
   id="paylater" 
   name="paychoice" 
   value="now" />Pay later

The radio button field names are identical, as is required to make radio buttons into a set. However, the id values are different. All id values on a web page must be unique.

The final special part of the form is in the submit button. It has an onclick attribute that calls the JavaScript function RedirectURL(), which changes the value of the redirect field if needed.

<input 
   type="submit" 
   name="submitter" 
   onclick="return RedirectURL()" 
   value="Complete Purchase" />

In a moment, I'll provide the complete code for implementing the example. But first, the JavaScript function RedirectURL().

<script type="text/javascript">
function RedirectURL() {
if( document.getElementById("paynow").checked )
   { document.getElementById("redirect").value = "http://example.com/paynow.html"; }
else if( document.getElementById("paylater").checked )
   { document.getElementById("redirect").value = "http://example.com/paylater.html"; }
return true;
}
</script>

The JavaScript can be put anywhere on the page, in the HEAD or BODY area, above or below the form.

When the form submit button is clicked, function RedirectURL() tests to see if the radio button with id="paynow" is checked.

If it is checked, the value of the hidden field with id="redirect" is changed to http://example.com/paynow.html; otherwise, it is changed to http://example.com/paylater.html.

If the radio button id values in your form are not "paynow" and "paylater" or if the redirect URL field's id is not "redirect", then change the JavaScript accordingly.

Here is the complete code for implementing the example.

<p>
<b>Widget Purchase Form</b>
</p>
<form 
   method="post" 
   action="/cgi-bin/script.cgi">
<input 
   type="hidden" 
   id="redirect" 
   name="redirect" 
   value="http://example.com/paynow.html" />
<p>
Name: 
<input 
   type="text" 
   name="name" 
   style="width:200px;">
</p>
<p>
<input 
   type="radio" 
   id="paynow" 
   name="paychoice" 
   value="now" 
   checked="checked" />Pay now 
<input 
   type="radio" 
   id="paylater" 
   name="paychoice" 
   value="now" />Pay later
</p>
<p>
<input 
   type="submit" 
   name="submitter" 
   onclick="return RedirectURL()" 
   value="Complete Purchase" />
</p>
</form>

<script type="text/javascript">
function RedirectURL() {
if( document.getElementById("paynow").checked )
   { document.getElementById("redirect").value = "http://example.com/paynow.html"; }
else if( document.getElementById("paylater").checked )
   { document.getElementById("redirect").value = "http://example.com/paylater.html"; }
return true;
}
</script>

If your implementation does not use radio button selection, the code can be modified for a checkbox check or a dropdown list selection.

Will Bontrager