Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I am trying to learn html and JavaScript and have produced a webform. All was working well until I tried to add an if statement to validate that only an input of 4 characters is to be accepted and return true to the webform. Removal of the if allows the code to work again...what is wrong with my if? what am I missing?
Any help would be gratefully received.
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm()
{
var result = true;
var msg="";
if (document.ExamEntry.name.value=="")
{
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="")
{
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examno.value=="")
{
msg+="You must enter your exam number \n";
document.ExamEntry.examno.focus();
document.getElementById('examno').style.color="red";
result = false;
}
if (document.ExamEnrty.getElementById("examno").value.length != 4)
{
msg+="The exam number must equal 4 \n";
document.Examentry.examno.focus();
document.getElementById('examno').style.color="red";
result = false;
}
if(msg=="")
{
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examno">examno</td>
<td><input type="number" name="examno" /></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
EDIT:
OK, typo has been corrected and
if (document.ExamEnrty.getElementById("examno").value.length != 4)
has been changed to
if (document.ExamEntry.examno.value.length != 4)
but code when run is now returning true to the webform when I add characters of length smaller or longer than 4 when it should return false and throw up an error
code now reads:
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm()
{
var result = true;
var msg="";
if (document.ExamEntry.name.value=="")
{
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="")
{
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examno.value=="")
{
msg+="You must enter your exam number \n";
document.ExamEntry.examno.focus();
document.getElementById('examno').style.color="red";
result = false;
}
if (document.ExamEntry.examno.value.length != 4)
{
msg+="The exam number must equal 4 \n";
document.Examentry.examno.focus();
document.getElementById('examno').style.color="red";
result = false;
}
if(msg=="")
{
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examno">examno</td>
<td><input type="number" name="examno" /></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
Am I being really stupid?!! HELP
There are three issues with your if statement, and two of them are typos. First you misspelled ExamEnrty in the line:
if (document.ExamEnrty.getElementById("examno").value.length != 4)
That should be:
if (document.ExamEntry.getElementById("examno").value.length != 4)
But that's not even the answer because that will refer to the element with the ID of examno which is the table cell parent of the input you want. Instead, replace that line with:
if (document.ExamEntry.examno.value.length != 4) {
Next you have a typo in the if block on the line:
document.Examentry.examno.focus();
That should be:
document.ExamEntry.examno.focus();
Fixed jsFiddle example
Try this out: http://jsfiddle.net/chace/YEQf3/32/
function validateForm() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name<br />";
document.ExamEntry.name.focus();
document.getElementById('name').style.color = "red";
result = false;
} else {
document.getElementById('name').style.color = "black";
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject<br />";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
result = false;
} else {
document.getElementById('subject').style.color = "black";
}
if (document.ExamEntry.examno.value == "") {
msg += "You must enter your exam number<br />";
document.ExamEntry.examno.focus();
document.getElementById('examno').style.color = "red";
result = false;
} else {
document.getElementById('examno').style.color = "black";
}
if (document.ExamEntry.examno.value.length != 4) {
msg += "The exam number must equal 4<br />";
document.ExamEntry.examno.focus();
document.getElementById('examno').style.color = "red";
result = false;
} else {
document.getElementById('examno').style.color = "black";
}
if (msg == "") {
document.getElementById('errorMessage').innerHTML = "Success!";
return result;
} else {
document.getElementById('errorMessage').innerHTML = msg;
return result;
}
}
Also, you should set the red text back to black if it passes the test after the first try, I added that to the fiddle.
You referenced by ID instead of the name of the text field you are trying to validate.
if (document.ExamEnrty.getElementById("examno").value.length != 4)
should actually be something like
if (document.ExamEntry.examno.value.length != 4)
sorry, I didn't test the rest of the syntax but the id examno is assigned to your td not your text field
Related
I am designing an exam entry form to take a users name, subject, exam number and level (GCSE, AS, A2), if the user inputs a value wrong then the name of the field turns red, I need a JavaScript function to change the text back to black and i am having some trouble with this. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exam Entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
if(result) document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
if(result) document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value=="") {
msg+="You must enter the exam number \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value.length!=4) {
msg+="Your exam number must be exactly 4 digits \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if(msg != ""){
alert(msg);
return result;
}
var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
break;
}
}
if(checked==null) {
alert('Please choose an option');
return false;
}
else {
return confirm('You have chosen '+checked.value+' is this correct?');
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" placeholder='Name' /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" placeholder='Subject' /></td>
</tr>
<tr>
<td id="examnumber">Exam Number</td>
<td><input type="text" name="examnumber" size="4" maxlength="4" placeholder='No.'/></td>
</tr>
<tr>
<td><input type="radio" id="examtypeGCSE" name="examtype" value="GCSE" /> : GCSE<br/>
<input type="radio" id="examtypeA2" name="examtype" value="A2" /> : A2<br/>
<input type="radio" id="examtypeAS" name="examtype" value="AS"/> : AS<br/>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
In beginning of the function validateForm() set all the texts to black. Cuz everytime you enter the validate function it will set all the texts to black, then enter the if statements if the conditions is correct.
for example:
function validateForm() {
document.getElementById('name').removeAttribute('style');
....
....
...
}
but then the color wont change until you click the button.
Else add an onchange function on the textboxes to check the validation.
I am currently using html to code a 'form entry'. I am also using a JavaScript validation, to validate the input in of the form. At the moment, i have 'name', 'subject' and 'examination number', each working and having functional validations. However i need to add a validation for 'qualification'. The type of input has to be click select and the 'qualification' has to be radio buttons. there should be three radio buttons called 'GCSE', 'AS' and 'A2'. it would be great if someone could help me with the radio buttons, and the user should only be able to click and select one type of qualification at one time. after clicking the qualification, the user needs to be informed by a message that they have chosen their qualification 'you have selected GCSE as your qualification' this message should be immediately after they clicked their qualification. GCSE is just an example, it could be AS or A2 or GCSE. thanks.
here is my code: the radio buttons are near the bottom, but the validaiton should be below the validation of 'examination number'
<head>
<title>Exam Entry</title>
<script language="javascript" type="text/javascript">
function validateForm(e) {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
msg+="You must enter your examination number";
result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should only contain digits";
result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should contain exactly 4 digits";
result = false;
}
if (msg != "") {
alert(msg);
}
return result;
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html" onsubmit="return validateForm();">
<table width="60%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<td id="Examination_number">Examination number</td>
<td><input type="text" maxlength="4" name="Examination_number" /></td>
</tr>
<tr>
<td id="qualification">Choose your qualification</td>
<tr>
<td>
<input type="radio" name="group1" value="GCSE">GCSE<br>
</td>
</tr>
<tr>
<td>
<input type="radio" name="group1" value="AS">AS<br>
</td>
</tr>
<tr>
<td>
<input type="radio" name="group1" value="A2">A2<br>
</td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
Here is how to add radio validation to your code. (Note this is setup for name="group1" radios only, you will need a for loop to check group2, group3, etc.)
if (document.ExamEntry.group1.value=="") {
msg+="You must choose a qualification\n";
document.ExamEntry.subject.focus();
document.getElementById('radioqual').style.color="red";
result = false;
}
You notify the user of what qualification they clicked by onclick events on each radio.
The function
function qualinform(qualname) {
alert(qualname + " was selected as your qualification.");
}
Example of a radio button (The name should be put into the onclick parameters)
<input onclick="qualinform('GCSE');" type="radio" name="group1" value="GCSE">GCSE
Here is the complete code.
<html>
<head>
<title>Exam Entry</title>
<script language="javascript" type="text/javascript">
function qualinform(qualname) {
alert(qualname + " was selected as your qualification.");
}
function validateForm(e) {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.group1.value=="") {
msg+="You must choose a qualification\n";
document.ExamEntry.subject.focus();
document.getElementById('radioqual').style.color="red";
result = false;
}
var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
msg+="You must enter your examination number";
result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should only contain digits";
result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should contain exactly 4 digits";
result = false;
}
if (msg != "") {
alert(msg);
}
return result;
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html" onsubmit="return validateForm();">
<table width="60%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<td id="Examination_number">Examination number</td>
<td><input type="text" maxlength="4" name="Examination_number" /></td>
</tr>
<tr>
<td id="qualification">Choose your qualification</td>
<tr>
<td id="radioqual">
<input onclick="qualinform('GCSE');" type="radio" name="group1" value="GCSE">GCSE<br>
<input onclick="qualinform('AS');" type="radio" name="group1" value="AS">AS<br>
<input onclick="qualinform('A2');" type="radio" name="group1" value="A2">A2<br>
</td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
Loop over each of the form elements named 'qualification', and when you find the checked one, grab its value and push it into your validation message like this:
var qualifications = document.getElementsByName('group1')
for (var i = 0, length = qualifications.length; i < length; i++) {
if (radios[i].checked) {
msg+='you have selected ' + radios[i].value + ' as your qualification.';
break;
}
}
Okay I have a solution for you :) Try this
Then allocate ids to your inputs as a1, a2 & a3
<script language="javascript" type="text/javascript">
function validateForm(e) {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
msg+="You must enter your examination number";
result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should only contain digits";
result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should contain exactly 4 digits";
result = false;
}
if(document.getElementById('a1').checked){
if (msg != "") {
alert(msg);
}
return result;
}
else{
if(document.getElementById('a2').checked){
if (msg != "") {
alert(msg);
}
return result;
}
else{
if(document.getElementById('a3').checked){
if (msg != "") {
alert(msg);
}
return result;
}
else{
msg+="Please select an option";
result = false;
if (msg != "") {
alert(msg);
}
return result;
}
}
}
}
</script>
I have worked out how to get the alert box up but it seems to skip my other validation which is checking the other feilds, ect, any ideas as too why it is skiiping it? it would really help!
I am fairly new to Javascript and HTML so could you explain it, thank you
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
window.validateForm=function() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color = "red";
//result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
//result = false;
}
if (document.ExamEntry.Exam_Number.value == "") {
msg += "You must enter the exam Number \n";
document.ExamEntry.subject.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
if (document.ExamEntry.Exam_Number.value.length != 4) {
msg += "You must enter at least Four Numbers in the Exam Number \n";
document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
var Number = document.ExamEntry.Exam_Number.value
if (isNaN(document.ExamEntry.Exam_Number.value)) {
msg += "You must enter at least four numeric characters in the Exam Number feild \n";
document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
var checked = null;
var inputs = document.getElementsByName('Exam_Type');
for (var i = 0; i < inputs.length; i++) {
if (!checked) {
checked = inputs[i];
}
}
if (checked == null) {
msg += "Anything for now /n";
} else {
return confirm('You have chosen ' + checked.value + ' is this correct?');
}
if (msg == "") {
return result;
} {
alert(msg)
return false;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="Exam_Number">Exam Number</td>
<td><input type="text" name="Exam_Number"<font size="1">(Maximum characters: 4)</font> </td>
</tr>
<tr>
<table><form action="">
<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
and here is a jsfiddle
Change:
var inputs = document.getElementsByName('Exam_Type');
to
var inputs = document.getElementsByName('examtype');
It seems you picked the wrong name for the radio elements.
Your for loop was checking the radio buttons incorrectly.
Code:
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
}
}
Please find the working fiddle here http://jsfiddle.net/sDLV4/2/
I changed code here please check...
Please find the working fiddle here
http ://jsfiddle.net/sDLV4/3/
Using HTML5 constraint validation, much of your code can be dropped, see my revision below. In addition to the wrong radio button group name pointed out by Juergen Riemer, your code has the following issues:
Better use the HTML5 DOCTYPE declaration, see below
Instead of <script language="javascript" type="text/javascript"> just use <script>. The script element does not have a language attribute, and the type attribute has the value "text/javascript" by default.
Do not define your validation function on the window object, but rather as global function (as below), or preferably as a member of a namespace object.
Instead of setting the form's name attribute to "ExamEntry", rather set its id attribute and reference the form of a variable like var examForm = document.forms["ExamEntry"];
Your HTML code is not well-formed, because in your form's table, on line 79, you start another table element with another form element, both of which do not have an end tag.
Also, it's preferable to us CSS for the form layout, instead of a table.
In my revision below I'm using a Pure CSS stylesheet for styling forms, and corresponding class values in certain elements.
For more about constraint validation in general and the HTML5 constraint validation features, see this tutorial.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8" />
<title>Exam entry</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.3.0/base-min.css&pure/0.3.0/forms-min.css" />
<script>
function validateForm() {
var result = true;
var msg = "";
var checked = null;
var examForm = document.forms['ExamEntry'];
var inputs = examForm.examtype;
for (var i = 0; i < inputs.length; i++) {
if (!checked) {
checked = inputs[i];
}
}
if (!checked) {
msg += "Anything for now /n";
} else {
return confirm('You have chosen ' + checked.value + ' is this correct?');
}
if (msg == "") {
return result;
} else {
alert(msg)
return false;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form id="ExamEntry" class="pure-form pure-form-aligned" method="post" action="success.html">
<div class="pure-control-group">
<label for="exNo">Exam Number:</label>
<input id="exNo" name="Exam_Number" required="required" pattern="\d{4}" title="You must enter a 4-digit exam number" />
</div>
<div class="pure-control-group">
<label>Exam type:</label>
<label class="pure-radio"><input type="radio" name="examtype" value="GCSE" /> GCSE</label>
<label class="pure-radio"><input type="radio" name="examtype" value="A2" /> A2</label>
<label class="pure-radio"><input type="radio" name="examtype" value="AS" /> AS</label>
</div>
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary" onclick="return validateForm();">Submit</button>
<button type="reset" class="pure-button">Reset</button>
</div>
</form>
</body>
</html>
The issue I have with my JavaScript is that when I select the "Send" button for a blank form, it tells me which fields to complete (which I want). After selecting "OK", it asks me to "Please enter a valid email address." in another window.
Can anyone help me with the functions and logic to eliminate this second window if one selects "Send" without filling out the form? Do I need to create a new function for "Entering a valid email address"?
Here's the code:
javascript
function checkforblank() {
var errormessage = "";
if (document.getElementById('fname').value =="") {
errormessage += "enter your first name \n";
}
if (document.getElementById('lname').value =="") {
errormessage += "enter your last name \n";
}
if (document.getElementById('email').value =="") {
errormessage += "enter your email \n";
}
if (document.getElementById('confirmEmail').value =="") {
errormessage += "confirm your email \n";
}
if (errormessage != "") {
alert(errormessage);
return false;
}
};
function verifyEmail() {
var status = false;
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.myForm.email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
}
else if (document.myForm.email.value != document.myForm.confirmEmail.value) {
alert("Email addresses do not match. Please retype them to make sure they are the same.");
}
else {
alert("Thank you for your interest!");
status = true;
}
return status;
}
function confirmEmailAddresses() {
checkforblank();
verifyEmail();
}
html
<div id="content">
<form name="myForm" action="#" method="get" enctype="application/x-www-form-urlencoded" onsubmit="">
<table width="377" height="96">
<tr>
<td style="text-align: right">First Name:</td>
<td><label for="FirstName"></label>
<input type="text" name="fname" id="fname"></td>
</tr>
<tr>
<td style="text-align: right">Last Name:</td>
<td><label for="LastName"></label>
<input type="text" name="lname" id="lname"></td>
</tr>
<tr>
<td style="text-align: right">E-mail:</td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td style="text-align: right">Confirm E-mail:</td>
<td><input type="email" name="confirmEmail" id="confirmEmail"></td>
</tr>
</table>
<input type="submit" value="Send" onClick="confirmEmailAddresses()"><input type="reset" value="Reset Form">
</form>
</div>
I'm fairly new to JavaScript, so please make this as easy as possible! :) Thank you.
replace
function confirmEmailAddresses(){
checkforblank();
verifyEmail();
}
with
function confirmEmailAddresses(){
if ( checkforblank() ) {
verifyEmail();
}
}
and add else return true; like so
if (errormessage != "") {
alert(errormessage);
return false;
} else return true;
so if (in the checkforblank() function) errormessage is not (!=) empty ("") then checkforblank() tells the script (returns) true and if (in confirmEmailAddresses() now) and only if checkforblank() is truthy (true is kinda pretty truthy) then verifyEmail() is run, the end (;). :p
Is this what you want?
function confirmEmailAddresses() {
if(checkforblank() && verifyEmail())
return true;
else return false;
}
ok i think what your asking for is this (jquery)
$(":submit").click( function(event) {
if(!checkforblank() || !verifyEmail()) {
event.preventDefault();
}
});
if you do this make sure to include after then button in the html. or enclose in a $(document).ready
This is very simple code, and similar to my other question.
When I click submit, the alert box shows up three times for option one, twice for two, and once for three.
Here is the part of the code where the problem is most probably located:
var chosen = ""
var len = document.ExamEntry.r1.length
for (var i = 0; i < len; i++) {
if (document.ExamEntry.r1[i].checked) {
chosen = document.ExamEntry.r1[i].value
}
if (chosen != "") {
confirm(chosen)
}
}
And here is my whole code. It all works fine except for this.
<!-- saved from url=(0055)file:///C:/Users/Bartek/Downloads/Exam%20entry4.1.2.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head><body><h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="file:///C:/Users/Bartek/Downloads/success.html">
<input type="radio" name="r1" value="GCSE">GCSE
<input type="radio" name="r1" value="AS">AS
<input type="radio" name="r1" value="A2">A2
<table width="50%" border="0">
<tbody>
<tr>
<td id="name" style="color: black; ">Name</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td id="subject" style="color: black; ">Subject</td>
<td>
<input type="text" name="subject">
</td>
</tr>
<tr>
<td id="enumber" style="color: black; ">Examination Number</td>
<td>
<input type="text" name="enumber">
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit" onclick=" return validateForm();">
</td>
<td>
<input type="reset" name="Reset" value="Reset">
</td>
</tr>
</tbody></table>
</form>
<script>
function validateForm() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color = "red";
result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
result = false;
}
if (document.ExamEntry.enumber.value.length != 4) {
msg += "The examination number must be exactly four characters long \n";
document.ExamEntry.enumber.focus();
document.getElementById('enumber').style.color = "red";
result = false;
}
var chosen = ""
var len = document.ExamEntry.r1.length
for (var i = 0; i < len; i++) {
if (document.ExamEntry.r1[i].checked) {
chosen = document.ExamEntry.r1[i].value
}
if (chosen != "") {
confirm(chosen)
}
}
if (msg == "") {
return result;
} {
alert(msg);
return result;
}
}
</script>
</body>
</html>
This is GCSE computing coursework.
for (var i = 0; i <len; i++) {
if (document. ExamEntry.r1[i].checked) {
chosen = document. ExamEntry.r1[i].value
}
if (chosen != "") {
confirm(chosen)
}
}
chosen won't be "" if it was set before; you don't set it back to "" if the item wasn't checked, and so it'll confirm the last one that was. Just merge them.
for(var i = 0; i < document.ExamEntry.r1.length; i++) {
if(document.ExamEntry.r1[i].checked) {
confirm(document.ExamEntry.r1[i].value);
}
}
You were missing an else.
if (!msg) {
return result;
} else {
alert(msg);
return result;
}