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

user_18784596 0
Viewed 62

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 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>
alert onclick function html javascript
3 Answers

There's a few reasons why this code does not work.

  1. You haven't setup your event listeners on your form
  2. 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
  3. You're not checking if the .value of each are null
  4. 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/

user_187177850

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>

user_138042560

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

}

user_140469150
Related