Why isn't this Javascript function showing the alert()?-CodePudding

I've got a function to show an alert if two elements aren't filled out, but the alert isn't showing up and it's just reloading the page. Not sure what I've missed or where I'm going wrong. Here is the Javascript:

function submitNewsletter() {
    var name = document.getElementById("name");
    var email = document.getElementById("email");
    if (name == "" || email == "") {
        alert("Please fill in your details.");
        return false;
    }
}

And here is the html it's for:

<section >
        <h1>Keep up to date.</h1>
        <p>Sign up to our newsletter to hear about improvements and additions to Electric Dreams.</p>
        <form >
            <label for="name" >Full Name</label>
            <input type="text" id="name" name="name"  placeholder="Full Name"> <br>
            <label for="email" >Email Address</label>
            <input type="email" id="email" name="email"  placeholder="Email Address"> <br>
            <button type="submit"  onclick="submitNewsletter()">Submit</button>
        </form>
    </section>

CodePudding user response：

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);

JSFiddle: https://jsfiddle.net/qu2pesw0/1/

CodePudding user response：

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 >
    <h1>Keep up to date.</h1>
    <p>Sign up to our newsletter to hear about improvements and additions to Electric Dreams.</p>
    <form >
        <label for="name" >Full Name</label>
        <input type="text" id="name" name="name"  placeholder="Full Name"> <br>
        <label for="email" >Email Address</label>
        <input type="email" id="email" name="email"  placeholder="Email Address"> <br>
        <button type="submit"  onclick="submitNewsletter()">Submit</button>
    </form>
</section>

CodePudding user response：

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;
}

}