Forms

@CHL_FirearmsMar 20.2012

Below is a form I’m using on my website but I don’t like that it takes you to a different page to show you what you have submitted but when you click on the back arrow on the browser, the values are still in the boxes and you can’t clear them by refreshing the browser. You have to actually go to another page and come back to the form before it’s cleared.

What am I missing?

</font></td>
</tr>
<tr>
<td valign=”top”> <div align=”right”><font face=”Arial, Helvetica, sans-serif”><strong>Type
of class:</strong> </font></div></td>
<td valign=”top”> <p><font face=”Arial, Helvetica, sans-serif”>
<input type=”radio” name=”Type_of_Class” id=”Type_of_Class_0″ value=”Initial CHL – Qualified Individual” />
Initial CHL – Qualified Individual<br/>
<input type=”radio” name=”Type_of_Class” id=”Type_of_Class_1″ value=”Initial CHL – Military Veteran” />
Initial CHL – Military Veteran<br/>
<input type=”radio” name=”Type_of_Class” id=”Type_of_Class_2″ value=”Initial CHL – Active Military” />
Initial CHL – Active Military<br/>
<input type=”radio” name=”Type_of_Class” id=”Type_of_Class_3″ value=”Initial CHL – Senior” />
Initial CHL – Senior<br/>
</font></td>
</tr>
<tr>
<td valign=”top”> <div align=”right”><font face=”Arial, Helvetica, sans-serif”><strong>How
did you find out about us?</strong> </font></div></td>
<td valign=”top”> <p><font face=”Arial, Helvetica, sans-serif”>
<input type=”radio” name=”How_did_you_find_us” id=”How_did_you_find_us_0″ value=”Friend” />
Friend<br/>
<input type=”radio” name=”How_did_you_find_us” id=”How_did_you_find_us_1″ value=”Google Search” />
Google Local Listing<br/>
<input type=”radio” name=”How_did_you_find_us” id=”How_did_you_find_us_2″ value=”Other Web Search” />
Google Search<br/>
<input type=”radio” name=”How_did_you_find_us” id=”How_did_you_find_us_3″ value=”Other Web search” />
Other Web search</font></p>
<p><font face=”Arial, Helvetica, sans-serif”><br/>
<input type=”radio” name=”How_did_you_find_us” id=”How_did_you_find_us_4″ value=”Other” />
Other<br/>
</font> </p></td>
</tr>
<tr>
<td valign=”top”> <div align=”right”><font face=”Arial, Helvetica, sans-serif”><strong>Keyword Search phrase you used:</strong> </font></div></td>
<td valign=”top”> <input type=”text” name=”Search_Phrase” id=”Search_Phrase” size=”40″ value=”” />
</td>
</tr>
<tr>
<td valign=”top”> <div align=”right”><font face=”Arial, Helvetica, sans-serif”><strong>Comments/questions:</strong>
</font></div></td>
<td valign=”top”> <textarea name=”Comments_Questions” id=”Comments_Questions” rows=”6″ cols=”40″></textarea>
</td>
</tr>
<tr>
<td colspan=”2″ align=”center”>
<p>
<input type=”submit” value=” Submit Form ” />
</p>
</td>
</tr>
</table>
</form>

to post a comment

HTML

10 Comments(s) _↴

@rtretheweyMar 20.2012 — #You're not really missing anything. Browsers do this as a convenience for users. You could add a <input type="reset" value="Reset Form"> button to let users clear the form manually.

@CHL_FirearmsauthorMar 20.2012 — #What if I wanted the customer be re-routed to the home page when they click submit on the form? What code can I use for that? Thanks for your help with this.

@DanInMAMar 20.2012 — #What if I wanted the customer be re-routed to the home page when they click submit on the form? What code can I use for that? Thanks for your help with this.[/QUOTE]

if your form submits via javscript/ajax, then you would add a redirect in that code, if your using a simpler setup, for example if the user is always directed to the page that processes the form when they submit, then you can use that page to redirect upon success

code examples woule be dependant on what server side languages you are using now

@CHL_FirearmsauthorMar 20.2012 — #thanks for your help y'all.

@PBSWebDesignMar 23.2012 — #You can also add a meta redirect on the results page if you need too. I do this alot on websites I build. I will let them see the results they submitted and then have them redirected automatically after 5 secs or so. You can also use Javascript to redirect the form page to any page you want once the submit button is clicked, and have the results page open in a separate window at the same time. If you need the code I can show you. Just let me know.

[CODE]
 <html>
 <head>
 <title>Test Page</title>
 
 <script type="text/javascript" >
 
 function thankyou()
 {
 window.location = "http://www.Your-url-to-new-thank-you-page.com";
 }
 </script>
 </head>
 
 <body>
 <br>
 <div>
 <form action="https://www.paypal.com/cgi-bin/webscr" id="PayPalForm" method="POST" target="_blank">
 First Name: <input type="text" name="First Name:">
 <br>
 Last Name: <input type="text" name="Last Name:">
 <input type="submit" onclick="thankyou()" value="submit">
 
 </form>
 <div>
 </body>
 </html>
 [/CODE]

Here it is anways ? That will redirect the form page and if you use something like Natemail or something that goes to a review page for the data submitted it will open up in a new window. This was from an old post on here that I answered a while back.

@CHL_FirearmsauthorMar 23.2012 — #That would be great. Please show me. This is what I ended up doing.

<FORM ACTION="/cgi-sys/formmail.cgi" METHOD="POST">

<input TYPE="hidden" NAME="return_link_url" VALUE="http://www.chl-firearms-training.com/contact.html">

<input TYPE="hidden" NAME="print_blank_fields" VALUE="1">

<input TYPE="hidden" NAME="redirect" VALUE="http://chl-firearms-training.com/thank_you.html">





<input TYPE="hidden" NAME="title" VALUE="CHL Firearms Training and Gun Sales Registration Response. -- We will contact you shortly to confirm your date. -- You may contact us at 281-849-3647 with any questions. -- Be sure to print this form!">

<input TYPE="hidden" NAME="subject" VALUE="CHL RENEWAL Training Registration">

<input TYPE="hidden" NAME="recipient" VALUE="[email protected]">

<div>

<font face="Arial, Helvetica, sans-serif" color="#CC0000"><strong>We will

contact you within one business day of your registration to confirm.<br>

</strong></font></div>

<table cellspacing="5" cellpadding="5" border="0" width="694">

<tr>

<td valign="top"> <div align="right"><font face="Arial, Helvetica, sans-serif"><strong>Name:</strong>

</font></div></td>

<td valign="top"> <font face="Arial, Helvetica, sans-serif">

<input type="text" name="realname" id="realname" size="40" value="" />

</font></td>

</tr>

<tr>

<td valign="top"> <div align="right"><font face="Arial, Helvetica, sans-serif"><strong>Email

Address:</strong> </font></div></td>

<td valign="top"> <font face="Arial, Helvetica, sans-serif">

<input type="text" name="email" id="email" size="40" value="" />

</font></td>

</tr>

<tr>

<td valign="top"> <div align="right"><font face="Arial, Helvetica, sans-serif"><strong>Street

Address:</strong> </font></div></td>

<td valign="top"> <font face="Arial, Helvetica, sans-serif">

<input type="text" name="Street_Address" id="Street_Address" size="40" value="" />

</font></td>

</tr>

<tr>

<td valign="top"> <div align="right"><font face="Arial, Helvetica, sans-serif"><strong>City,

State, ZIP:</strong> </font></div></td>

<td valign="top"> <font face="Arial, Helvetica, sans-serif">

<input type="text" name="City_State_Zip" id="City_State_Zip" size="40" value="" />

</font></td>

</tr>

<tr>

<td valign="top"> <div align="right"><font face="Arial, Helvetica, sans-serif"><strong>Phone

</strong> </font></div></td>

<td valign="top"> <font face="Arial, Helvetica, sans-serif">

<input type="text" name="Phone_Number" id="Phone_Number" size="40" value="" />

</font></td>

</tr>

<tr>

<td valign="top"> <div align="right"><font face="Arial, Helvetica, sans-serif"><strong>First

choice class date:</strong> </font></div></td>

<td valign="top"> <font face="Arial, Helvetica, sans-serif">

<select name="First_Choice_Class_date">

<option>Choose One</option>

<option>Saturday, April 7, 2012</option>

<option>Saturday, April 14, 2012</option>

<option>Saturday, April 21, 2012</option>

<option>Saturday, April 29, 2012</option>

<option>Saturday, May 5, 2012</option>

<option>Saturday, May 12, 2012</option>

<option>Saturday, May 19, 2012</option>

<option>Saturday, May 26, 2012</option>

<option>Saturday, June 2, 2012</option>

<option>Saturday, June 9, 2012</option>

<option>Saturday, June 16, 2012</option>

<option>Saturday, June 23, 2012</option>

<option>Saturday, June 30, 2012</option>

</select>

 </tr>
   <tr>
   <td valign="top"> <div align="right"><font face="Arial, Helvetica, sans-serif"><strong>Second
   choice class date: </strong> </font></div></td>
   <td valign="top"> <font face="Arial, Helvetica, sans-serif">

<select name="Second_Choice_Class_date">

<option>Choose One</option>

<option>Saturday, April 7, 2012</option>

<option>Saturday, April 14, 2012</option>

<option>Saturday, April 21, 2012</option>

<option>Saturday, April 29, 2012</option>

<option>Saturday, May 5, 2012</option>

<option>Saturday, May 12, 2012</option>

<option>Saturday, May 19, 2012</option>

<option>Saturday, May 26, 2012</option>

<option>Saturday, June 2, 2012</option>

<option>Saturday, June 9, 2012</option>

<option>Saturday, June 16, 2012</option>

<option>Saturday, June 23, 2012</option>

<option>Saturday, June 30, 2012</option>

</select>

 </font></td>
   </tr>
   <tr>
   <td valign="top"> <div align="right"><font face="Arial, Helvetica, sans-serif"><strong>Type
   of class:</strong> </font></div></td>
   <td valign="top"> <p><font face="Arial, Helvetica, sans-serif">
   <input type="radio" name="Type_of_Class" id="Type_of_Class_0" value="Initial CHL - Qualified Individual" />
   Initial CHL - Qualified Individual<br/>
   <input type="radio" name="Type_of_Class" id="Type_of_Class_1" value="Initial CHL - Military Veteran" />
   Initial CHL - Military Veteran<br/>
   <input type="radio" name="Type_of_Class" id="Type_of_Class_2" value="Initial CHL - Active Military" />
   Initial CHL - Active Military<br/>
   <input type="radio" name="Type_of_Class" id="Type_of_Class_3" value="Initial CHL - Senior" />
   Initial CHL - Senior<br/>
   </font></td>
   </tr>
   <tr>
   <td valign="top"> <div align="right"><font face="Arial, Helvetica, sans-serif"><strong>How
   did you find out about us?</strong> </font></div></td>
   <td valign="top"> <p><font face="Arial, Helvetica, sans-serif">
   <input type="radio" name="How_did_you_find_us" id="How_did_you_find_us_0" value="Friend" />
   Friend<br/>
   <input type="radio" name="How_did_you_find_us" id="How_did_you_find_us_1" value="Google Search" />
   Google Local Listing<br/>
   <input type="radio" name="How_did_you_find_us" id="How_did_you_find_us_2" value="Other Web Search" />
   Google Search<br/>
   <input type="radio" name="How_did_you_find_us" id="How_did_you_find_us_3" value="Other Web search" />
   Other Web search</font></p>
   <p><font face="Arial, Helvetica, sans-serif"><br/>
   <input type="radio" name="How_did_you_find_us" id="How_did_you_find_us_4" value="Other" />
   Other<br/>
   </font> </p></td>
   </tr>
   <tr>
   <td valign="top"> <div align="right"><font face="Arial, Helvetica, sans-serif"><strong>Keyword Search phrase you used:</strong> </font></div></td>
   <td valign="top"> <input type="text" name="Search_Phrase" id="Search_Phrase" size="40" value="" />
   </td>
   </tr>
   <tr>
   <td valign="top"> <div align="right"><font face="Arial, Helvetica, sans-serif"><strong>Comments/questions:</strong>
   </font></div></td>
   <td valign="top"> <textarea name="Comments_Questions" id="Comments_Questions" rows="6" cols="40"></textarea>
   </td>
   </tr>
   <tr>

@PBSWebDesignMar 23.2012 — #Here is the Meta Redirect as well

[CODE]
 <meta http-equiv="refresh" content="5;url=http://webdesign.about.com/">
 [/CODE]

Content is where you enter in the amount of seconds until the refresh

@CHL_FirearmsauthorMar 23.2012 — #Thanks!

@CHL_FirearmsauthorMar 23.2012 — #Will someone tell me how to make at least the "email address" and the "name" on my form above required fields. I don't want people to just hit the submit button and be able to send that form empty like it is now. I really appreciate that.

@PBSWebDesignMar 24.2012 — #This is pretty easy. You can use javascript to handle this. A simple google search will point you to the w3 school for JS validation. I will post what they said here.

To validate the name field:

[CODE]
 function validateForm()
 {
 var x=document.forms["myForm"]["fname"].value;
 if (x==null || x=="")
 {
 alert("First name must be filled out");
 return false;
 }
 }
 [/CODE]

Put that in the header of your document.

[CODE]
 <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
 [/CODE]

Add the onsubmit to the form tag.

For email do this:

[CODE]
 function validateForm()
 {
 var x=document.forms["myForm"]["email"].value;
 var atpos=x.indexOf("@");
 var dotpos=x.lastIndexOf(".");
 if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
 {
 alert("Not a valid e-mail address");
 return false;
 }
 }
 [/CODE]

Add that as well to the header of your document.

[CODE]
 <form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
 [/CODE]

Now this is just a generic way to do this. Just pointing you in the right direction to validate your forms. http://www.w3schools.com/js/js_form_validation.asp

Also in #HTML _↴

How to declare check box inside a form ?Exact image placement?How to submit a form from a text link?

Success!

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

Tweet This

Forms

10 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Forms

10 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #HTML _↴