Simple Form Validation

[marisc88]

Hello I've just done my first form validation and need help with one little niggle. The problem is with the "resetForm" Function. It works in terms of clearing the form but the alert that shows is the first alert for Function validateForm i.e."We would like to know your name! A first name must be entered". Can someone see where I have gone wrong?? So the JavaScript at the mo is this:

  function validateForm(){var x=document.forms["contact"]["fname"].value;if (x==null || x=="")    {    alert ("We would like to know your name! A first name must be entered");    return false;    }var x=document.forms["contact"]["lname"].value;if (x==null || x=="")    {    alert ("We would like to know your name! A last name must be entered");    return false;    }var x=document.forms["contact"]["email"].value;var atpos=x.indexOf("@");var dotpos=x.lastIndexOf(".");if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)  {  alert("Please enter a valid email address");  return false;  }    }function show_alert(){alert("Entering a postcode informs us where the demand for our service is, in turn allowing us to best serve your location. If you prefer not to give us this information just leave the field blank.");}function resetForm(){   document.forms("resetForm").reset();   alert("The form has been cleared") }

An then the HTML form is this:

<form name="contact" action="mailto:mypartplanner@hotmail.co.uk" enctype="text/plain"            onsubmit="return validateForm()" method="post">                <p> First Name: *  <input type="text" name="fname" size="20"> </p>                <p> Last Name: *  <input type="text" name="lname" size="20"> </p>                <p> Post Code: <input type="text" name="postcode" size="20"> </p>                <p> <input type="button" onclick="show_alert()" value="Why a Postcode?"/></p>                <p> Email: *  <input type="text" name="email" size="20"> </p>                <p> Phone Number:  <input type="text" name="phonenumber" size="20"> </p>                <p> Reason for Contacting:                  <select name="regarding">                        <option> Praise                         <option> Criticism                         <option> Supplier Review                        <option> Supplier Recommendation                        <option> Listing Application                        <option> Other                </select></p>                <p> Comments: <textarea name="comments" rows="10" cols="50"></textarea></p>                <br>                <p> * Required Field </p>                <p><input type="image" src="submitbutton.gif" height="40" width="100" border="0" alt="Submit Form"></p>                <p><input name="resetForm" type="image" src="clearbutton.jpg" height="30" width="90"                    onClick="this.form.reset()"/></p>            </form>

Many Thanks!

[thescientist]

you're not calling resetForm through in the onclick handler of the input and if you are trying to use the native reset functionality, you need to use an input of type reset.http://www.javascript-coder.com/javascript-form/javascript-reset-form.phtml

[Don E]

I believe it is because when you click on your buttons to either reset and/or submit, they are 'acting' as submit buttons in a way, thus why the form is being cleared AND then the validateForm function is being ran. This is so because of the form attribute you have for onsubmit. Something else I noticed too. For the form reset, you can have onClick="resetForm()" instead of onClick="this.form.reset()". Then inside the resetForm function, change document.forms("resetForm").reset(); to document.forms["contact"].reset();

[marisc88]

Ok thank you both for replying. I've made the changes suggested by Don E and replaced type="image" with type="reset" as suggested by thescientist and it now appears to work... I'm confused why you can customise the submit button by using type="image" but can't use it for the reset button.. going to have to work out how to do that now. My submit button is behaving differently in Mozilla (opening outlook email) and IE (opening message box alerting email is being sent) but im guessing thats because the site hasnt actually been uploaded to the server yet - or am I wrong and the forms supposed to work as should live? But anyways, Thanks again for help with the intial problem.

[thescientist]

because

My submit button is behaving differently in Mozilla (opening outlook email) and IE (opening message box alerting email is being sent) but im guessing thats because the site hasnt actually been uploaded to the server yet - or am I wrong and the forms supposed to work as should live?

because you're submitting the form to an email address, not a server side script that is usually used to handle forms and email.http://www.w3schools.com/php/php_forms.asp