I am new to coding and learning through learning people platform HTML,CSS,and JavaScript. The topic I am learning is "HTML for registration Form" and "Retrieveing Form Data from JavaScript". I have recreated the whole code which contains 3 pages. Form.HTML (with the message "Form Submitted Successfully...!", HTML page with the form itself and JS file with Javascript code. When I test the form it doesn't work the way it supposed to. No Alert pop-up, and not validation working. What could be a possible porblem? Thank you
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Form Submitted Successfully...!</h1>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body bgcolor="#d3d3d3">
<h2>HTML Forms</h2>
<form name="myForm" action = "Form.html" onsubmit="return validateForm()">
<h3>Registration form</h3>
Username: <input type = "text" placeholder = "Your username" name = "uname"><br><br>
Age: <input type = "number" name = "age" required><br><br>
Residency: <input type = "radio" name="residency" value="resident" checked>Resident
<input type = "radio" name="residency" value="nonresident" >Non-resident
<br><br>
Select account: <input type = "checkbox" name="acctype" value="savings"> Savings
<input type = "checkbox" name="acctype" value="checking" checked>Checking
<input type = "checkbox" name="acctype" value="mmarket">Money Market
<br><br>
Nationality: <select id="nationality">
<option value="1">Australia</option>
<option value="2">Canada</option>
<option value="3">Germany</option>
<option value="4" selected>India</option>
<option value="5">Kenya</option>
<option value="6">USA</option>
</select>
<br><br>
<input type="submit" name="forms" value="Submit">
<input type="reset" name="forms" value="Reset">
</form>
<script src="JSFormsintro.js"></script>
</body>
</html>
function validateForm(){
var uname = document.forms["myForm"]["uname"].value;
var age = document.forms["myForm"]["age"].value;
var residentStatus = document.forms["myForm"]["residency"].value;
var accountType = document.querySelectorAll('input [name=acctype]: checked');
var nationality = document.forms["myForm"] ["nationality"].value;
if (uname.length < 6) {
alert("The username needs to be at least 6 characters long");
return false;
} else {
var selectedAccounts = [];
for (let i=0; i < accountType.length; i++) {
selectedAccounts.push(accountType[i].value);
}
var alertMsg = "The details supplied: " +
"\nUsername: " + uname +
"\nAge: " + age +
"\nResident status: " + residentStatus +
"\nAccounts selected: " + selectedAccounts +
"\nNationality index: " + nationality;
alert(alertMsg);
return true;
}
}
I have checked the whole code many times but cannot find anything different from what was in the learning script. When I removed that Form.html page with and tried to print to the console, the message is "crbug/1173575, non-JS module files deprecated." Does this mean that the code which I am learning is too old and deprecated? Really confused. Maybe somebody can help me with that. Thank you
