CHECK FORM USING JAVASCRIPT

JavaScript
1

Help me understand what is wrong with my code as it cannot check forms as it supposed to. Here is my code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Lone Wolf Expert</title>
<link rel="stylesheet" type="text/css" href="lonewolf6.css"/>
<script type="text/javascript">
<!--
 function checkForm(form) {
            var values = '';
            const elem = document.getElementById('myForm').elements;
            for (var i = 0; i < elem.length; i++) {
			values += "<strong>Type:</strong>" + elem[i].type + "&nbsp;&nbsp;";
            values += "<strong>Name:</strong>" + elem[i].name + "&nbsp;&nbsp;";
            values += "<strong>Value:</strong><em>" + elem[i].value + "</em>&nbsp;&nbsp;";
            values += "<br />";
                if (elem[i].value.length < 1) {
                    alert("Enter your details for this field: " + elem[i].name);
                    return false;
                }	
            }
			if (form.email_address.value.indexOf("@", 0) < 0) {
               alert("This is not a valid email address!");
			   }
			var len = document.myForm.mySubject.length;
				userChoice= "";
				for( var i = 0; i<len; i++){
				if(document.myForm.mySubject.options[i].selected){
				userChoice += 
				}
				}
			
			 document.getElementById("validValues").innerHTML = values;
        }
//-->
</script>
</head>

<body>
<h1>Jestin Carter</h1>
<hr />
<form id = "myForm" name = "myForm" method ="post" action = "CarterJestinAssignment6.htm" >

<fieldset>
<legend>Student's Name:</legend>
First Name:<br /><br />
<input type = "text" name = "First_Name" id ="First_Name" value = "Enter your First Name" /> <br>
Last Name: <br /><br />
<input type = "text" name = "Last_Name" id = "Last_Name" value = "Enter your Last Name" /> <br>
</fieldset>


<fieldset>
<legend>Enter your APUS email address:</legend>
<input type="text" id="email" size="32" maxLength="32"/> 
</fieldset>


<fieldset>
<legend>Student Subjects</legend>
Which is your favorite subject? <br /><br />
<select name="mySubject" id = "mySubject" >
<option value = "mathematics">Mathematics</option>
<option value = "computer science"> Computer Science</option>
<option value = "physics">Physics</option>
<option value = "chemistry"> Chemistry </option>
<option value = "biology"> Biology </option>
</select>
</fieldset>

<input id="submit" type= "submit" value="Submit Data" onclick= "return checkForm(this.form);" />
<input type = "reset" value = "Reset Form" />
</form>
<hr />
<div id= "validValues"></div>

</body>	
</html>
4

It is supposed to check that any of the inputs are not left unfilled when submitting the form. For example it must ensure the user inputs their first and last name, otherwise it gives an alert message. Thank you.

6

This line is supposed to access form elements

8

querySelectorAll doesn’t work as I have not used class property. Is there any other method I can use?

9

Not sure what you are talking about. You can use querySelectorAll to select element types. In fact, you can use querySelectorAll to select anything really. I suggest you read MDN’s reference information on querySelectorAll to see how you can use it as I suggested.

10

Great. Thank you for the help

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.