CHECK FORM USING JAVASCRIPT

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>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

Explain what it is supposed to check compared to what your code is doing instead. Give exampled of how to replicate the problem(s) you are seeing.

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.

One thing that would help you and others reviewing your code, is to properly indent your code. Currently, it is difficult to see the code blocks.

One thing I do notice though is the above line. You need something after the += You initialize userChoice to be an empty string and you appear to want to concatenate it with something else but you never did.

I also notice the following line:

const elem = document.getElementById('myForm').elements;

What exactly are you expecting this line to do? There is no such property named elements on an element.

This line is supposed to access form elements

Like I said, there is no such elements property. You should use querySelectorAll and specify the different type of form elements you want to capture (separated by commas).

1 Like

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

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.

Great. Thank you for the help