Javascript/jquery if statements aren't working

Question

I've really been racking my few brain cells on this one- It seems simple enough but I can't get it to work-

$(function() {
    function check() {
        var myname = $("#myname").val();
        var myemail = $("#myemail").val();
        var password = $("#password").val();
        var repeatpassword = $("#repeatpassword").val();

        if (myname == "") {
            $("#mynameresult").append("Please Enter Your Name");
            return false;
        }
        if (myemail =="") {
            $("#myemailresult").append("Please Enter Your Email");
            return false;
        }
        if (password == "") {
            $("#passwordresult").append("Please Enter a Password");
            return false;
        }
        if (repeatpassword == "") {
            $("#repeatpasswordresult").append("Please Repeat the Password");
            return false;
        }
        return true;
    }
});

My form looks like this-

<table class="registrationform">

  <form method="post" onsubmit = "return check();" action="/ToDoneList/ToDoneList/usr/registrationparse.php" enctype="multipart/form-data" >

    <tr><td>Username: </td><td><input class="focusfox" type="text" name="username" id="myname"></td><td id="mynameresult"></td></tr>
    <tr><td>Email: </td><td><input type="text" name="email" id="myemail"></td><td id="myemailresult"></td></tr>
    <tr><td>Password: </td><td><input type="password" name="password" id="password" /></td><td id="passwordresult"></td></tr>
    <tr><td>Repeat the Password: </td><td><input type="password" name="repeatpassword" id="repeatpassword"/></td><td id="repeatpasswordresult"></td></tr>           
    <tr><td rowspan="2"><img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" /></td><td><input type="text" name="captcha_code" maxlength="6" title="Enter What you see on the Left If you are having trouble click the New Image Button"/></td></tr>
    <tr><td><button type="button "onclick=\'document.getElementById("captcha").src = "/securimage/securimage_show.php?" + Math.random(); return false\'>New Image</button></td>
    <tr><td class="regbutton" colspan="2"><input type="submit" value="Register" ></td></tr>

  </form>
</table>

The problem is that this function won't catch when I submit the form with empty spaces. I think it must be a problem with my if statements because when I strip it down and have it save values to the variables and append those values to the variables with return being false outside of an if statement it does stop it from submitting.

Anyway, is there anything that you can see that is wrong here? Thanks in advance for the help!

Your HTML is invalid - you can't put a <form> inside a <table> like that. Also, always have your browser developer console open; you're getting an error currently. — Pointy
– Pointy, Commented Jan 28, 2014 at 17:33
It should be the other way around: put the table inside the form. — Barmar
– Barmar, Commented Jan 28, 2014 at 17:34
Why do you think it's a problem with the if statements? Don't you get an error in the Javascript console saying that the function check is not defined? — Barmar
– Barmar, Commented Jan 28, 2014 at 17:35
Thanks for the info on the forms and tables, I switched them around- html seems pretty forgiving though since it didn't give me an error — Jimbo
– Jimbo, Commented Jan 28, 2014 at 18:02

Pointy · Accepted Answer · 2014-01-28 17:32:58Z

7

You're defining your "check" function inside the "ready" callback. Therefore, it's not global, so you can't call it from your "submit" handler.

Attach your submit handler via jQuery instead:

$('form').submit( check );

Put that at the end (inside) the "ready" handler.

answered Jan 28, 2014 at 17:32

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jimbo Over a year ago

Great! that fixed it. If I defined it outside the ready callback would it be considered global then? Is there anything wrong with doing that if the function won't be called til the page is loaded anyway?

Pointy Over a year ago

No it's fine to keep things in the "ready" handler, and attaching event handlers via jQuery is cleaner and more flexible anyway. Modern best practice is to keep HTML free from any JavaScript at all.

bajajsahil · Accepted Answer · 2014-01-28 17:37:38Z

1

put your function check() outside the $(function(){ }) block !!

answered Jan 28, 2014 at 17:37

bajajsahil

663 bronze badges

Collectives™ on Stack Overflow

Javascript/jquery if statements aren't working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related