Full Question: Basically I want to redirect the user to another page after they click the "sign up now" button but only if the email address they entered is valid. Otherwise I want to show them an error stating that the email address they entered is invalid. The error should be rendered below the email input field. I have put my current code below. Thank you!
In simple terms:
if email input is valid -> redirect to another html web page after user clicks "sign up now" button
if email input is invalid -> render error message below email input
Code for my main page:
<!DOCTYPE html>
<html>
<head>
<title>Newsletter</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Stay up to date with ecommerce trends <br>with Apple's newsletter</h2>
<h4>Subscribe for free marketing tips</h4>
<script>
function logOptions() {
var s = document.getElementsByName('Interests')[0];
var text = s.options[s.selectedIndex].text;
console.log(text);
}
function logEmail() {
console.log(document.getElementById('emailinput').value);
}
function myFunction() {
logOptions();
logEmail();
}
</script>
<!-- <div class="input form"> -->
<form id="inputform">
<input id="emailinput" type="email" placeholder="Email Address">
<span id='errorMessage'></span>
<select name="Interests">
<option value="" disabled selected>Interested in..</option>
<option value="option1">Marketing</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
</select>
</form>
<!-- Sign up now button -->
<div id="container">
<button id="submitButton" form="inputform" onclick="myFunction()">Sign up now</button>
</div>
<svg>
<rect width="40" height="3" style="fill:lightgreen" />
</svg>
<!-- JS script should be placed towards the end of the file -->
<script src="web.js"></script>
</body>
</html>
Code for page that they should be redirected to:
<!DOCTYPE html>
<html>
<head>
<title>Shopify Frontend Developer Intern</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
<h4 id="thanks">Thanks for subscribing</h4>
<h4 id="tips">You'll start receiving free tips and resources soon.</h4>
<svg>
<rect width="40" height="3" style="fill:lightgreen" />
</svg>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire