Jump to content

How to check form before it is submitted?


holmedwa04

Recommended Posts

Hi,I have been working on making my feedback form and my guestbook using a CGI script recently and I was wondering if anyone knew how to get it to be checked to make sure that all fields are filled in before you can click the submit button? I am assuming that this would require Javascript.Also, does anyone know how a can make my form dynamic so that when a selection is made, different form elements appear? Because on my feedback form, there is a question about how the viewer found my site, there are 3 options: A friend, Signature in Forum and A search Engine. I currently have two other questions, which are designed for if the viewer picks "Signature of Forum" and also a box for if they pick "A search engine" however it would be really cool, if I was able to make the second and thrid questions only appear if a certain thing is selected in the 1st question.I am aware that the above can be done, but I am worried that the second question require very complicated coding. Its the kind of thing you see on a form where you contact MSN about a fault, and the questions change depending on what you pick.Any help on both of the above two matters would be greatly appreciated.

Link to comment
Share on other sites

If you want to check the form before it gets submitted, then you need to use Javascript. Look at the Javascript tutorial on the w3schools site, but you will want to have an ID on each form element and use getElementById to check the value of each one. Even if you validate the form using Javascript, you will still need to check in the PHP or server-side script to make sure the values are not empty, because the Javascript won't always work. The second question is fairly similar, you need to have the element that is responsible for the form changing run a Javascript function when the value changes (there is an onchange event) and you can check what the value of the element is and decide what to show or hide. To do that part, have a div contain what you want to show or hide and set the display property to either block or none:

<div id="div1" style="display: none;">hidden content</div><a href="#" onclick="document.getElementById('div1').style.display='block';">Show</a>

Link to comment
Share on other sites

If I add the code, please can you make make it so that it checks if the email address is correct, checks if all fields are filled in and also so that it makes form elements appear like so: when "Friend" is selcted on "How did you find us?" nothing appears, when "A search engine" is selected box appears to type in search engine and when "A signature on forum" is selected radio buttons appear, so that you can select which one?Here is the code so far...

<html><head><title>Feedback</title><meta name="keywords" content=""/></head><LINK rel="stylesheet" type="text/css" href="stylesheet.css"><body bgcolor="#000066" link="blue" vlink="blue"><font size="3"><font face="Arial"><font color="black"><center><table border="0" cellpadding="100" cellspacing="0" width="85%" bordercolor="#000000" bgcolor="#FFFFFF"><tr><td><BR><font size="5"> <center><b><u>Feedback</u></b><BR><BR></center><font size="2">If you would like to give feedback on Shape Making Club please ensure that you have an account setup with Outlook or Outlook Express, if so please continue by following instructions belowIf you would like to add feedback, please fill in all of the fields below, and click submit.<BR><BR>Please note that meaningless, worthless, abusive, vulgar, hateful, harassing, obscene, profane, sexually oriented, threatening, invasive of a person's privacy, or otherwise in violation of ANY law, spam, flooding, advertisements, chain letters, pyramid schemes, and solicitations are all inappropriate to this feedback.<BR><BR><HR><BR>Its true, we really do care about your thoughts and feelings and so this is why this feedback page has been provided.  When you work so closely to your website, coding it and everything, it is sometimes hard to see problems that are completely obviously to most viewers.  And so this feedback page has been provided for you to help me help you, by improving the site.<BR><BR>So first of all just a few simple questions, about how you came across our site, how often you visit etc.  But before we do that, just a few simple rules to follow, number one, dont ask questions on the feedback form, it is provided to help improve the site, questions should be directed to the contact us button on the homepage or at the bottom of every page, or otherwise in this case <a href="mailto:shapemakingclub@btconnect.com">here!</a>  Be constructive, dont just critise the site, send a worthy and helpful responce, this way I can provide you, with a better service.<BR><BR>Ok, were away, just follow the questions through, answering them as acurately as you can and then there is a comments box at the bottom, just in case I have missed anything out!<BR><BR><FORM METHOD=POST ACTION="../cgi-bin/feedback.cgi"><fieldset style="padding: 10px; border: #000066 solid 3px;"><legend><b>1: Personal Information</b></legend><BR><table cellspacing="0" cellpadding="1" border="0"><tr><td width="50%"><label for="yourname">Name / Nickname:</label></td><td><input type="text" name="yourname" id="yourname" /></td></tr><tr><td><label for="youraddress">Your Email Address:</label></td><td><input type="text" name="youraddress" id="youraddress" /></td></tr></tr></table></fieldset><BR><fieldset style="padding: 10px; border: #000066 solid 3px;"><legend><b>2: How Did You Find Us?</b></legend><BR>Ok, so you obviously found us, otherwise you wouldn't be reading the feedback form, so please select one of the following:<BR><BR><select name="howdidyoufindus"><BR><BR><option selected>Search Engine, see below<option>A friend<option>A signature on a forum, see below<option>Other</select><BR><BR>Search Engine, please type below:<BR><BR><input type="text" name="searchengine" size="34"><BR><BR>A signature on a forum, please select:<BR><BR><input type="radio" name="forumsignature" value="W3Schools" id="wschools"> <label for="wschools"> W3Schools Forum</label><BR><input type="radio" name="forumsignature" value="Hogwarts Forum" id="hogforum"> <label for="hogforum"> Hogwarts Forum</label><BR><input type="radio" name="forumsignature" value="Computer Mouth Forum" id="compmouth"> <label for="compmouth"> Computer Mouth Forum</label><BR></fieldset><BR><fieldset style="padding: 10px; border: #000066 solid 3px;"><legend><b>3: Your Valued Opinion</b></legend><BR>Now it is time for you to tell us what you think of Shape Making Club website on a scale of one to five, so here goes.<BR><BR><input type="radio" name="scale" value="1. Excellent, can't fault it" id="1"> <label for="1">1. Excellent, can't fault it</label><BR><input type="radio" name="scale" value="2. Its good, but there are slight problems" id="2"> <label for="2">2. Its good, but there are slight problems</label><BR><input type="radio" name="scale" value="3. Average" id="3"> <label for="3">3. Average</label><BR><input type="radio" name="scale" value="4. Not really very good" id="4"> <label for="4">4. Not really very good</label><BR><input type="radio" name="scale" value="5. I don't even know why I am filling out this form" id="5"> <label for="5">5. I don't even know why I am filling out this form</label><BR></fieldset><BR><fieldset style="padding: 10px; border: #000066 solid 3px;"><legend><b>4: Your Comments</b></legend><BR>So now, what do you think about the site, in your own words, what is it that <b>you</b> want to say?  Has it been useful?  Etc.<BR><BR><center><TEXTAREA NAME="feedback" ROWS="9" COLS="80" style="font-family: arial;" onfocus="if (this.value=='Add Your Comments Here.') {this.value='';}" onblur="if (this.value=='') {this.value='Add Your Comments Here.';}">Add Your Comments Here.</TEXTAREA></center><BR>Now, it is time to get negative, go on, constuctive criticism is welcomed.<BR><BR><center><TEXTAREA NAME="constructivecriticism" ROWS="6" COLS="80" style="font-family: arial;" onfocus="if (this.value=='Im sure there is something that you dont like.') {this.value='';}" onblur="if (this.value=='') {this.value='Im sure there is something that you dont like.';}">Im sure there is something that you dont like.</TEXTAREA></center></fieldset><BR><fieldset style="padding: 10px; border: #000066 solid 3px;"><legend><b>5: Visits to the Site</b></legend><BR>Finally, just before you click submit, please spend a little more of your time by telling me how often you visit this site?<BR><BR><input type="radio" name="visitsite" value="Daily" id="6"> <label for="6"> Daily</label><BR><input type="radio" name="visitsite" value="Once a Week" id="7"> <label for="7"> Once a Week</label><BR><input type="radio" name="visitsite" value="Once a Month" id="8"> <label for="8"> Once a Month</label><BR><input type="radio" name="visitsite" value="Less Than Once a Month" id="9"> <label for="9"> Less Than Once a Month</label><BR><input type="radio" name="visitsite" value="This is my First Visit" id="10"> <label for="10"> This is my First Visit</label><BR></fieldset><BR><fieldset style="padding: 10px; border: #000066 solid 3px;"><legend><b>6: Submission</b></legend><center><BR><INPUT TYPE="submit" VALUE="Submit" onclick="window.location='thankyouf.html';">   <INPUT TYPE="reset" VALUE="Reset"></center></fieldset><BR>If your browser starts giving you grief, then just send on your <a href="mailto:shapemakingclub@btconnect.com?subject=Feedback">comments</a>. Thanks.<p style="background: #fcfbff; border: 1px dashed silver; padding: 8px; font-family: Arial"><em>Depressingly Necessary Privacy Policy:</em><br />Your privacy is always important and because we know it is so important any of your details will never be given out to any third parties or sold to anyone, for more information on this matter please visit our <a href="privacypolicy.html">Privacy Policy</a>.</p><BR><center><BR><form> <input type="Button" value="Back" onclick="history.back()"> </form><BR>______________________________________________________<BR><font size=1>Edward Holmes, SMC @ CCMS, <a href="mailto:shapemakingclub@btconnect.com">shapemakingclub@btconnect.com</a></center></td></tr></table></center></body></html>

As I am not very good at Java Script, and cant follow the tutorials.If anyone could edit this, I would be emmemsly appreciative.

Link to comment
Share on other sites

Do you want to learn how to do it or do you just want someone to do everything for you?
Well I would like to learn how to do it, but I am very busy at the moment making shapes, which are due to be photogaphed for my website.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...