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
– tobspr, Commented Aug 5, 2013 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
– Michael, Commented Aug 5, 2013 at 18:09
possible duplicate of Code working in jsFiddle but not in browser — JJJ
– JJJ, Commented Aug 5, 2013 at 18:10
Try <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script> although it should be no difference — tobspr
– tobspr, Commented Aug 5, 2013 at 18:10
You need to run the code in a document ready event. 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
– JJJ, Commented Aug 5, 2013 at 18:11

tobspr · Accepted Answer · 2013-08-05 18:11:42Z

0

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.

answered Aug 5, 2013 at 18:11

tobspr

8,4265 gold badges36 silver badges48 bronze badges

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

1 Comment

Michael Over a year ago

This was exactly what I did! The same answer was provided in a similar question that I initially missed: stackoverflow.com/questions/4637873/… Thanks!

Optimus Prime · Accepted Answer · 2013-08-05 18:16:01Z

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>

Community · Accepted Answer · 2017-05-23 12:23:37Z

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()

andrewrota · Accepted Answer · 2013-08-05 20:39:22Z

0

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/

answered Aug 5, 2013 at 20:39

andrewrota

414 bronze badges

Collectives™ on Stack Overflow

Implementing jQuery function

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related