JavaScript onSubmit event handler not working

Drewbun · 12-09-2012, 09:46 PM

The onSubmit event handler is not preventing access to the specified site i want it to go to. I don't know if something is wrong with my function or what. For various reasons im leaving out the site name for now, so please dont think thats the issue. Readers please jump down to the last post, that is where i hit road block. Please Help!

Heres the html

<meta charset="UTF-8" />
<title>Join Here</title>
<script src="../javaScriptFiles/newArtist.js"></script>
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("footer");
document.createElement("aside");
</script>
<link href="../Stylesheets/newArtist.css" rel="stylesheet" type="text/css" />

</head>
<body>
<hgroup>
<h1>New Artist Application Form</h1>
<h2></h2>
</hgroup>
<p>

</p>
<div style="text-align: center;" valign="middle">
<form name="naform" id="naform" action="THIS IS WHERE THE WEBSITE WOULD USUALLY SHOW UP/BUT I LEFT IT OUT"
method="post"
onSubmit="return checkAllTextBoxes();">
<table border="2" style="border-collapse:collapse;width:40%">
<tr>
<td colspan="2">

<label for="firstname">
Artist Actual First Name:</label> <input type="text" name="firstname" id="firstname" placeholder="First Name" required="required" size="20" maxlength="20"/><br>
</td>
</tr>
<tr>
<td colspan="2">
Artist Actual Last Name: <input type="text" name="lastname" id="lastname" placeholder="Last Name" required="required" size="25"/><br>
</td>
</tr>
<tr>
<td colspan="2">
Street Address: <input type="text" name="address" required="required" size="35"/><br>
</td>
</tr>
<tr>
<td colspan="2">
City: <input type="text" name="city" required="required" size="20"/><br>
</td>
</tr>
<tr>
<td colspan="2">
State/Province/Region: <input type="text" name="region" required="required" size="20"/><br>
</td>
</tr>
<tr>
<td colspan="2">
Zip or Mail Code: <input type="text" name="zipcode" required="required" size="15"/><br>
</td>
</tr>
<tr>
<td colspan="2">
Country:
<select name="mydropdown">
<option>Argentina</option>
<option>Australia</option>
<option>Bolivia</option>
<option>Canada</option>
<option>Finland</option>
<option>Kazakhstan</option>
<option>Norway</option>
<option>Russia</option>
<option>Sweden</option>
<option>USA</option>
</select><br>
</td>
</tr>
<tr>
<td colspan="2">
Gender Code:
<select name="mydropdown1">
<option>Yes</option>
<option>No</option>
<option>Not Answered</option>
</select><br>
</td>
</tr>
<tr>
<td colspan="2">
Local Telephone #: <input type="text" name="telephone" required="required" size="15"/><br>
</td>
</tr>
<tr>
<td colspan="2">
Email Address: <input type="text" name="email" required="required" size="40"/><br>
</td>
</tr>
<tr>
<td>
Media in which Artist Works:<br>
<input type="checkbox" name="mediatype" value="Ceramic"/>Ceramic<br>
<input type="checkbox" name="mediatype" value="Fabric"/>Fabric<br>
<input type="checkbox" name="mediatype" value="Glass"/>Glass<br>
<input type="checkbox" name="mediatype" value="Other"/>Other<br>
</td>
<td>
Discount for Quantity?:<br>
<input type="radio" name="discount" value="yes"/>Yes<br>
<input type="radio" name="discount" value="no"/>No<br>
<hr />
Work under prof. name?:<br>
<input type="radio" name="name" value="no" checked />No<br>
<input type="radio" name="name" value="yes"/>Yes<br>
</td>
</tr>
<tr>
<td colspan="2">
Agree to Sell Own Work?<br>
<input type="radio" name="name" value="yes"/>Yes<br>
<input type="radio" name="name" value="no"/>No<br>
</td>
</tr>
<tr>
<td colspan="2">
Password:
<input type="password" name="password" id="password" required="required" size="15"/><br>
</td>
</tr>
<tr>
<td colspan="2">
Password Confirm Repeat:
<input type="password" name="repeatpassword" id="repeatpassword" required="required" size="15"/><br>
</td>
</tr>
<tr>
<td colspan="2">
Brief Artist Biography:<br>
<textarea name="comments" id="biography" cols="70" rows="5" wrap="hard">
</textarea><br>
<tr>
<td colspan="2">
<input type="submit" value="Submit"/>
<input type="reset" action="reset"/>
</td>
</tr>
</table>
</form>
</div>
<br>
<footer>
<div align="center">
<a href="index.html">
<img src="../images/homebutton.gif">
</a>
</div>
</footer>

</body>

</html>

Heres the javascript file:

function checkAllTextBoxes() {

if (document.naform.firstname.value.length <= 1) {
alert("First Name too short--must be at least 2 chars");
document.naform.firstname.focus();
document.naform.firstname.select();
return false; // leave now --block submit
}

}

return true; // if made it to here, all OK--let submit proceed
}

More if statements are going to be added, but i cant get the first stipulation to work, to prevent access to the site. It keeps on bypassing my function. Please help as soon as possible, i have a tight deadline, thanks!

AndrewGSW · 12-09-2012, 11:41 PM

Code:

function checkAllTextBoxes() {

if (document.naform.firstname.value.length <= 1) {
alert("First Name too short--must be at least 2 chars");
document.naform.firstname.focus();
document.naform.firstname.select();
return false; // leave now --block submit
}

} <<< this bracket is incorrect/spare, causing the code to fail

return true; // if made it to here, all OK--let submit proceed
}

..because my console told me so!

Drewbun · 12-09-2012, 11:52 PM

I changed the curly bracket to face the other way and it still doesnt run the function and deny access to the linked page. thanks for your help, but do you have any other suggestions??NVM you were right thanks a ton!

AndrewGSW · 12-10-2012, 12:23 AM

Quote:

Originally Posted by Drewbun

I changed the curly bracket to face the other way and it still doesnt run the function and deny access to the linked page. thanks for your help, but do you have any other suggestions??NVM you were right thanks a ton!

It is not necessary to turn a bracket the other way before deleting it

Drewbun · 12-10-2012, 04:23 AM

My string as i interpret it, is saying i have to enter at least five characters whether they are a letter, a number, or a special character, but when i enter just 1 character the function still allows access to the site. What is going on with my password if statement? Someone please help!

This is the JS library file for newArtist.html page
-------------------------------------------------------*/
/*
The purpose of this function is to go thru the new
artist form and check the content of all the
text boxes for validity. Created yyyy/mm/dd by .
*/

function checkAllTextBoxes() {

if (document.naform.firstname.value.length <= 1) {
alert("First Name too short--must be at least 2 chars");
document.naform.firstname.focus();
document.naform.firstname.select();
return false; // leave now --block submit
}

if (document.naform.lastname.value.length <= 1) {
alert("Last Name too short--must be at least 2 chars");
document.naform.lastname.focus();
document.nafofrm.lastname.select();
return false; // leave now --block submit
}

if (/^\w{5,}$/.test(password)) {
}else {
alert("Invalid Password");
return false;
}

return true; // if made it to here, all OK--let submit proceed
}

Philip M · 12-10-2012, 09:24 AM

if (/^\w{5,}$/.test(password.value) ) {

BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.