Implementing jQuery function

Question

I have been trying to implement some JavaScript that would disable a submit button until all fields were filled. I found a great here: Disabling submit button until all fields have values. Hristo provided a link that does exactly what I need here: http://jsfiddle.net/qKG5F/641/.

My problem is that when I try to put together a full "minimum working example" I am completely stumped. I'm sure there's some minor aspect that I'm missing but here's what I've come up with:

<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
    (function() {
        $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
            empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled'); // updated according to https://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        } else {
            $('#register').removeAttr('disabled'); // updated according to https://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        }
        });
    })()
    </script>
</head>
<body>
    <form>
    Username<br />
    <input type="text" id="user_input" name="username" /><br />
    Password<br />
    <input type="text" id="pass_input" name="password" /><br />
    Confirm Password<br />
    <input type="text" id="v_pass_input" name="v_password" /><br />
    Email<br />
    <input type="text" id="email" name="email" /><br />     
    <input type="submit" id="register" value="Register" disabled="disabled" />
    </form>
    <div id="test">
    </div>
</body>

I simply copied/pasted and added in what I thought would be necessary to make the page work but my submit button remains permanently disabled. What simple part am I missing to make this work??

Thanks!

Is there any console output? Can you put a jsFiddle together showing your error? — tobspr, Aug 05 '13 at 18:05
My problem doesn't seem to exist on jsFiddle. The link that I included in my question works just fine for me but when I try to create my own page to test on WAMP the submit link remains disabled. No specific error shows on the page. Did that answer your question? — Michael, Aug 05 '13 at 18:09
possible duplicate of [Code working in jsFiddle but not in browser](http://stackoverflow.com/questions/4637873/code-working-in-jsfiddle-but-not-in-browser) — JJJ, Aug 05 '13 at 18:10
You need to run the code in a [document ready event](http://api.jquery.com/ready/). jsfiddle does that by default. Also, unless you have a very good reason to use jQuery 1.5.2, update to a newer version. 1.5 is more than 2 years old. — JJJ, Aug 05 '13 at 18:11
Juhana, I missed that question you linked. After looking at the answers, I simply added: "$(window).load" in front of "(function() { --rest of code--" and it works fine. Proply solved! — Michael, Aug 05 '13 at 18:15
ToBSpr, the same problem existed until I added the .load that I mentioned above. — Michael, Aug 05 '13 at 18:16

score 0 · Accepted Answer · answered Aug 05 '13 at 18:11

You have to surround it with an onload function:

$(window).load(function(){
(function() {
    $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()
});

If you look at the source of the jsFiddle, you'll see it got wrapped the same way.

This was exactly what I did! The same answer was provided in a similar question that I initially missed: http://stackoverflow.com/questions/4637873/code-working-in-jsfiddle-but-not-in-browser Thanks! — Michael, Aug 05 '13 at 18:17

score 0 · Answer 2 · answered Aug 05 '13 at 18:16

I tested this on my system, works with your own version of jquery, as well as code with a little change and wrapping javascript in document.ready().

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
        $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
            empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        } else {
            $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        }
        });
    });
    </script>
</head>
<body>
    <form>
    Username<br />
    <input type="text" id="user_input" name="username" /><br />
    Password<br />
    <input type="text" id="pass_input" name="password" /><br />
    Confirm Password<br />
    <input type="text" id="v_pass_input" name="v_password" /><br />
    Email<br />
    <input type="text" id="email" name="email" /><br />     
    <input type="submit" id="register" value="Register" disabled="disabled" />
    </form>
    <div id="test">
    </div>
</body>

</html>

score 0 · Answer 3 · edited May 23 '17 at 12:23

Your original js is an immediately-invoked function expression. Here's a link explaining that pattern: http://benalman.com/news/2010/11/immediately-invoked-function-expression/

You defined an anonymous function and then immediately called it. By the time your html page had loaded, the script had already run. As others correctly answered, you need to instead wait for all the DOM elements to load before executing the script.

While

$(window).load(function(){};

works, you should probably use the jQuery version of this:

$(document).ready(function(){ };

For one, it's the jQuery idiom, and for another, $(window).load fires at a later time, where as $(document).ready() fires as soon as all DOM elements are available; not as soon as all assets (possibly large) are loaded.

Source: window.onload vs $(document).ready()

score 0 · Answer 4 · answered Aug 05 '13 at 20:39

If you place the JavaScript (the entire script element) at the end of the page, right before the closing body tag, it should work. This is because the JavaScript needs to be run after the DOM is built. By placing your script after the page is loaded (and then immediately invoking it as you are doing), the document will be ready and it should work.

Working example: http://jsfiddle.net/NgEHg/

Implementing jQuery function

4 Answers4