CODEWITHSUNDEEP
javascriptjqueryformsinputsubmit
Martin
Martin

Reputation: 22760

jQuery form submit doesn't appear to trigger if statement

I have this error but I can't see how to fix it. I've used JSLint with some results (it just tells me document isn't a global value, or the 'else clause' was not needed, etc) but no solution.

I have a form to be submitted and I need to compare that both email fields are equal. So I want a nice simple email1 == email2 script, jQuery isn't my strongest point, but I came up with this:

My form ID is "regIn", my email fields are type="email" (HTML5) and id="MailA" and id="MailB" respectively.

I have preloaded jquery 1.11.1.min.js

My jQuery code (see below why the #forgotten is still in there):

$(document).ready(function() {

    $('#forgotten').click(function() {
        $('#passbox').toggle(360);
        return false;
    });

    $('#regIn').submit(function() {

// * referenced; but this isn't in the code: alert('alert1');

        if ($('#MailA').val() === $('#MailB').val()) {
            return true;
        }
        $('#errorMsg').innerHTML("Emails need to be the same!");
        alert('Hello');
        return false;
    });
});

So - I use Alerts to see how far the script gets (i know, tacky debugging). firebug doesn't report page errors or script errors that I can see. The "alert 1" always fires on form submission, and successfully shows me the values of #MailA.val() and #MailB.val(),

But the if statement doesn't seem to fire at all. I have tried making the values variables (var d1 = $('#MailA').val() etc. ) but that doesn't change anything, the form always submits and neither the if or the else (which did surround the text below the if statement clause but JSLint said it wasn't needed so I removed it).

I have also used variations of syntax, using != and == but was also reading from JSLint that === and !== are preferred.

My HTML:

 <form enctype="multipart/form-data" name="regIn" id="regIn" autocomplete="off" accept-charset="utf-8" action="#" method="post">

    <div class="inputContainer">
        <input type="email" value="" tabindex="31" id="MailA" name="regMailA" required>
    </div>

    <div id="errorMsg"></div>

    <div class="inputContainer">
        <input type="email" value="" id="MailB" tabindex="32" name="regMailB" required>
    </div>

    <div class="registerRow">
        <input type="submit" class="regButton" value="Register" tabindex="34">
    </div>
</form>

As I said, I've looked around for the last hour or so and I just can't see what it is.

Obviously the code is stripped down for the question, the only other aspect is that there is another piece of jQuery in the document ready function - as shown the #forgotten appears for showing / hiding an info. box, this works fine.

Upvotes: 3

Views: 164

Answers (1)

Aviel Fedida
Aviel Fedida

Reputation: 4102

please note that you are using:

$('#errorMsg').innerHTML("Emails need to be the same!");

if you try to alert $('#errorMsg').innerHTML it will be undefined.

When you using JQuery selectors $('#errorMsg') JQuery will wrap the dom object with JQuery dom object that own JQuery special methods(val, html, etc), so you don't have access to the core method innerHTML, instead you should use:

$('#errorMsg').html("Emails need to be the same!");

Enjoy!

Upvotes: 1

Related Questions