function submitNewsletter(event) {
event.preventDefault();
var name = document.getElementById("name");
var email = document.getElementById("email");
if (name.value === "" || email.value === "" || !name.value || !email.value) {
alert("Please fill in your details.");
return false;
}
}
document.querySelector(".newsletterForm")
.addEventListener('submit', submitNewsletter);
There's a few reasons why this code does not work.
You haven't setup your event listeners on your form
You're checking if the variables name and email are empty strings instead of checking name.value and email.value are empty strings. name and email are HTML Elements, to check their value you must check .value
You're not checking if the .value of each are null
You must call event.preventDefault() in your form's submit callback function. Otherwise the form's submit will cause the page to reload.
Here's the code revised to work:
function submitNewsletter(event) {
event.preventDefault();
var name = document.getElementById("name");
var email = document.getElementById("email");
if (name.value === "" || email.value === "" || !name.value || !email.value) {
alert("Please fill in your details.");
return false;
}
}
document.querySelector(".newsletterForm")
.addEventListener('submit', submitNewsletter);
function submitNewsletter() {
var name = document.getElementById("name");
var email = document.getElementById("email");
if (name.value == "" || email.value == "") {
alert("Please fill in your details.");
return false;
}
}
<section class="signup">
<h1>Keep up to date.</h1>
<p>Sign up to our newsletter to hear about improvements and additions to Electric Dreams.</p>
<form class="newsletterForm">
<label for="name" class="label">Full Name</label>
<input type="text" id="name" name="name" class="input" placeholder="Full Name"> <br>
<label for="email" class="label">Email Address</label>
<input type="email" id="email" name="email" class="inout" placeholder="Email Address"> <br>
<button type="submit" class="btn" onclick="submitNewsletter()">Submit</button>
</form>
</section>
Beacues you checking in the if statement the name, and email the DOM element existing or not. You would like to check the value of the input elements.
function submitNewsletter() {
var name = document.getElementById("name");
var email = document.getElementById("email");
if (name.value == "" || email.value == "") {
alert("Please fill in your details.");
return false;
}
}
<section class="signup">
<h1>Keep up to date.</h1>
<p>Sign up to our newsletter to hear about improvements and additions to Electric Dreams.</p>
<form class="newsletterForm">
<label for="name" class="label">Full Name</label>
<input type="text" id="name" name="name" class="input" placeholder="Full Name"> <br>
<label for="email" class="label">Email Address</label>
<input type="email" id="email" name="email" class="inout" placeholder="Email Address"> <br>
<button type="submit" class="btn" onclick="submitNewsletter()">Submit</button>
</form>
</section>
function submitNewsletter() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (name == "" || email == "") {
alert("Please fill in your details.");
return false;
}
I hope you are well.
This is how you should first get value inputs
function submitNewsletter() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (name == "" || email == "") {
alert("Please fill in your details.");
return false;
}
发布评论
评论（3）
该代码不起作用有几个原因。
name和电子邮件是空字符串，而不是检查name.value和email.value是空字符串。name和电子邮件是HTML元素，要检查其值，您必须检查.Value.value每个为null， event.preventdefault（）。否则表格的提交将导致页面重新加载。这是修改工作的代码：
jsfiddle： htttps://jsfiddle.net/qu2pesw0/1/
There's a few reasons why this code does not work.
nameandemailare empty strings instead of checkingname.valueandemail.valueare empty strings.nameandemailare HTML Elements, to check their value you must check.value.valueof each are nullevent.preventDefault()in your form's submit callback function. Otherwise the form's submit will cause the page to reload.Here's the code revised to work:
JSFiddle: https://jsfiddle.net/qu2pesw0/1/
您在if语句中检查名称，并通过电子邮件发送是否存在的DOM元素。您想检查输入元素的值。
Beacues you checking in the if statement the name, and email the DOM element existing or not. You would like to check the value of the input elements.
我希望你一切都好。
这就是您首先要获得价值输入的方式
I hope you are well.
This is how you should first get value inputs