Submit fires even if email.value == ""

Question

I'm making a simple form where a user submits a video, alongside their email address. I'd like to make it so that the person can not submit the form until they have filled in the email and saved the video.

The video part is working, but when I test with an empty email, it still seems to submit. The code is below, and the live version is at http://www.atlas-china.com/record-your-multi-lingual-abilties/

Help much appreciated!

// Global variable to hold player's reference.
var _Nimbb;

// Global variable to hold the guid of the recorded video.
var _Guid = "";

// Event: Nimbb Player has been initialized and is ready.
function Nimbb_initCompleted(idPlayer) {
    // Get a reference to the player since it was successfully created.
    _Nimbb = document[idPlayer];
}

// Event: the video was saved.
function Nimbb_videoSaved(idPlayer) {
    _Guid = _Nimbb.getGuid();
}

jQuery(document).ready(function ($) {

    // Get the data from the form.  Check that everything is completed.
    $('#video_submit').click(function (e) {

        var email = document.getElementById("email").value;
        var video_title = document.getElementById("video_title").value;
        var form = document.myForm;

        // Make sure the email is specified.
        if (email.value == "") {
            alert("Please enter your email to proceed.");
            return;
        }

        // Verify that the video is not currently recording.
        if (_Nimbb.getState() == "recording") {
            alert("The video is being recorded. Please wait.");
            return;
        }

        // Check that video has been recorded.
        if (_Guid == "") {
            alert("You did not save the video.  Click save.");
            return;
        }

        // Set the guid as hidden parameter.
        form.guid.value = _Guid;

        var dataString = 'email=' + email + '&guid=' + _Guid + '&video_title=' + video_title;
        //alert (dataString);return false;  
        $.ajax({
            type: "POST",
            url: "<?php echo get_template_directory_uri();?>/send.php",
            data: dataString,
            success: function () {
                $('#contact_form').html("<div id='message'></div>");
                $('#message').html("<h2>Contact Form Submitted!</h2>")
                    .append("<p>We will be in touch soon.</p>")
                    .hide()
            }
        });
        document.forms["myForm"].submit();
    });
});

No matter the result of this check, you must verify the result on the server. — asawyer, Oct 08 '13 at 13:26
Hey Pointy, it's because I'd like the ajax to send data over to Zapier, which emails the data and does a bunch of cool stuff with it. However, I also want the person to be redirected to a thank you page. — Stepan Parunashvili, Oct 08 '13 at 13:29
email.value == "" - using "==" will attempt to convert the types of both arguments to the same type. Use "===" instead. See http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons. — JBeagle, Oct 08 '13 at 13:31
Hey guys, I made the suggested updates, but it still seems to be submitting. However, this only happens with the email value, every other check stops it. What do you think might be the cause? — Stepan Parunashvili, Oct 08 '13 at 13:36
Ok, I looked at your live site. "email" = "", whereas "email.value" = undefined. Try changing your code to : if (email == "") { — JBeagle, Oct 08 '13 at 14:21

score 0 · Answer 1 · answered Oct 08 '13 at 13:27

0

When you return from that handler function, the browser will proceed to carry out the normal behavior of the "submit" event, which is to submit the form.

You can change your "abort" return statements to

return false;

answered Oct 08 '13 at 13:27

Pointy

405,095
59
585
614

score 0 · Accepted Answer · answered Oct 08 '13 at 14:26

After viewing your live site...

email = "" // Empty string

Whereas

email.value = undefined

Try changing your code to

if (email === "") {
    alert("Please enter your email to proceed.");
    return;
}

I assume you are doing .value twice by mistake as you have the following line earlier in your code

var email = document.getElementById("email").value;

Submit fires even if email.value == ""

2 Answers2