I'm trying to pass the first name and cars names to the other page, and I tried everything but doesn't work for me once the user clicks on submit it's supposed to redirect to success.html page and show a message with their name and the cars they chose to test
this is page#1
h1 {
text-align: center;
color: #4A4A67;
font-weight: bold;
font-style: 'Amatic SC';
font-size: 55px; }
h3 {
font-size: 28px;
}
body { background-image: url("car.jpg");
text-align: center;
border-style: inset;
border-color: #8CA7B3;
font-family: 'Amatic SC';
font-weight: bold;
color: #6F6F9B;
border-radius: 25px;}
#fname:focus{
border-color: green;
background-color: lightgreen}
#Pnum:focus{
border-color: green;
background-color: lightgreen}
span {
color:darkred;
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
document.getElementById("fname").style.borderColor = "red";
error1.textContent = "*Name must not be empty!"
return false;}
document.getElementById("fname").style.borderColor = "";
error1.textContent = ""
var y = document.forms["myForm"]["Pnum"].value;
if ( y == "" || isNaN(y) || (y.toString()).length>10 ){
document.getElementById("Pnum").style.borderColor = "red";
error2.textContent ="*Phone number invalid."
return false;}
document.getElementById("Pnum").style.borderColor = "";
error2.textContent = ""
var radios = document.getElementsByName("Age");
var formValid = false;
var i = 0;
while ( !formValid && i < radios.length) {
if (radios[i].checked) formValid = true;
i++; }
if (!formValid){
error3.textContent = "Must check at least one option!"
return false;}
error3.textContent = ""
var checkbox = document.getElementsByName("cars");
var formValid = false;
var i = 0, x = 0;
while ( i < checkbox.length ) {
if (checkbox[i].checked) { x++; formValid = true; }
i++; }
if (!formValid) error4.textContent = "must check at least 1 option!"
if ( x > 3 ) { error4.textContent = "must check at most 3!"
return false; }
// Getting the value of your text input
var fname = document.getElementById("fname").value;
// Storing the value above into localStorage
localStorage.setItem("fname", fname);
return formValid;
}
</script>
</head>
<body>
<h1>Car Test Request</h1>
<h3>please fill in the form to make your car test request.</h3>
<form name="myForm" onsubmit="return validateForm()" action="file:///C:/Users/s/Desktop/457/assignment%202/success.html" method="GET">
<label for="FirstName">please enter your name:</label>
<input type="text" id="fname" name="fname" value=""><span id="error1"></span><br><br>
<label for="PhoneNumber">please enter your phone number:</label>
<input type="text" id="Pnum" name="Pnum" value=""><span id="error2"></span><br><br>
How old are you? <span id="error3"></span><br>
<input type="radio" name="Age" id="18-23">18-23<br>
<input type="radio" name="Age" id="23-30">23-30<br>
<input type="radio" name="Age" id="31-39">31-39<br>
<input type="radio" name="Age" id="40+">40+<br><br>
<h>choose the wanted car(s) for the test drive:</h> <span id="error4"></span><br>
<input type="checkbox" id="cars" name="cars" value="Bentley">
<label for="cars">Bentley</label>
<input type="checkbox" id="cars" name="cars" value="BMW">
<label for="cars">BMW</label>
<input type="checkbox" id="cars" name="cars" value="Cadillac">
<label for="cars">Cadillac</label><br>
<input type="checkbox" id="cars" name="cars" value="Dodge">
<label for="cars">Dodge</label>
<input type="checkbox" id="cars" name="cars" value="Fiat">
<label for="cars">Fiat</label>
<input type="checkbox" id="cars" name="cars" value="Ford">
<label for="cars">Ford</label><br>
<input type="checkbox" id="cars" name="cars" value="Jaguar">
<label for="cars">Jaguar</label>
<input type="checkbox" id="cars" name="cars" value="Mazda">
<label for="cars">Mazda</label><br><br><br><br><br><br><br><br>
<input type="submit">
<input type="reset">
<br><br>
</form>
</body> </html>this is page#2 (success.html)
h1 {
text-align: center;
color: #4A4A67;
font-weight: bold;
font-style: 'Amatic SC';
font-size: 55px; }
h3 {
font-size: 28px;
}
body { background-image: url("car.jpg");
text-align: center;
border-style: inset;
border-color: #8CA7B3;
font-family: 'Amatic SC';
font-weight: bold;
color: #6F6F9B;
border-radius: 25px;}
#fname:focus{
border-color: green;
background-color: lightgreen}
#Pnum:focus{
border-color: green;
background-color: lightgreen}
span {
color:darkred;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
<script>
// var fname = document.forms["myForm"]["fname"].value;
function init() {
// Retrieving the text input's value which was stored into localStorage
var fname = localStorage.getItem("fname");
}
</script>
</head>
<body>
<p>
<span id='fname'></span>, thanks for your request! <br>
we will call you soon to schedule a test drive for: <br>
</p>
<img src="bye.gif" alt="bye bye" width="200" height="200">
</body>
</html>
