www.webdeveloper.com
Results 1 to 11 of 11

Thread: Forms

  1. #1
    Join Date
    Mar 2012
    Location
    Missouri City, TX
    Posts
    6

    Forms

    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>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,109
    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.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2012
    Location
    Missouri City, TX
    Posts
    6
    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.

  4. #4
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    Quote Originally Posted by CHL Firearms View Post
    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.
    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

  5. #5
    Join Date
    Mar 2012
    Location
    Missouri City, TX
    Posts
    6
    thanks for your help y'all.

  6. #6
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    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>
    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.
    Last edited by PBSWebDesign; 03-22-2012 at 09:14 PM.
    ----------------------------------------------------------------------------------------------
    WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

  7. #7
    Join Date
    Mar 2012
    Location
    Missouri City, TX
    Posts
    6
    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="return_link_url" VALUE="http://chl-firearms-training.com/contact.html">-->

    <!--<input TYPE=hidden NAME="required" value="Street_Address,realname,email,Phone_Number">-->
    <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="martin@chl-firearms-training.com">
    <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>
    <TD> <div align="right">
    <input type="reset" value="Reset" name="Reset">
    </TD>
    <TD>
    <input type="submit" value="Submit" name="Submit">
    </TD>
    </tr>
    </table>
    </form>

  8. #8
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Here is the Meta Redirect as well
    Code:
    <meta http-equiv="refresh" content="5;url=http://webdesign.about.com/">
    Content is where you enter in the amount of seconds until the refresh
    ----------------------------------------------------------------------------------------------
    WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

  9. #9
    Join Date
    Mar 2012
    Location
    Missouri City, TX
    Posts
    6
    Thanks!

  10. #10
    Join Date
    Mar 2012
    Location
    Missouri City, TX
    Posts
    6
    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.

  11. #11
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    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;
      }
    }
    Put that in the header of your document.
    Code:
    <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    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;
      }
    }
    Add that as well to the header of your document.
    Code:
    <form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
    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
    ----------------------------------------------------------------------------------------------
    WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles