CODEWITHSUNDEEP
javascriptjqueryhtml
Victor Oliveira
Victor Oliveira

Reputation: 3713

JQuery not working through Google's CDN

For a few hours I've been trying to understand what's wrong. My purpose is to enable a button after textfields are filled. Code seems fine according to my test at JSFiddle but it's still not working on my server. Am'I missing something or is this a server problem (which is hard to believe since javascript is client-side)?

PS: I'm not expert at HTML, so I don't know how to identate it's syntax; if it's not that readable I'm sorry and would appreciate an edit-help. thanks.

   <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <link rel="stylesheet" href="css/style.css">

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script type="text/javascript">
                var $input = $('input:text'),
                $apply = $('#apply');

                $apply.attr('disabled', true);
                $input.keyup(function() {
                    var trigger = false;
                    $input.each(function() {
                        if (!$(this).val()) {
                            trigger = true;
                        }
                    });
                    trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
                });
            </script>
    </head>

      <body>
      <section class="container">
        <div class="OpenKore">
        <div id="absolute">
          <form method="GET" action="generate.php">
            <fieldset>
                <legend><h1>OpenKore Automatic Config:</h1></legend>
                LOGIN:
                <p><input type="text" id="id_login" name="login_value" value="" placeholder="Login"></p>
                SENHA:
                <p><input type="text" id= "id_senha" name="senha_value" value="" placeholder="Senha"></p>
                PIN:
                <p><input type="text" id="id_pin" name="pin_value" value="" placeholder="PIN"></p>

                <input id="apply" type="submit" name="commit" disabled value="Gerar Configurações">
            </fieldset>
          </form>
        </div>
        </div>
        </section>
        </body>
    </html>

Upvotes: 0

Views: 125

Answers (1)

OJay
OJay

Reputation: 4921

When the browsers reads your HTML page, it reads top to bottom. When it gets to your <script> tags it runs them. Now it us doing this before it has got to the rest of the page, i.e. before it even knows about any body or form or input:text tags, so even though you code will run, it will simply not do anything because none of the elements on the page exist yet.

JavaScript 101, make the code run after the page has loaded, if you need to access elements on the page. How do you do that? either put the code at the bottom of the page (move your <script> tags to just before the </body> tag), or wrap your code in a function that is executed after the browser has finished loading the page. Now jQuery has a very helpful way of doing this for you, pass a function to jQuery and it will be executed after the page is loaded.

jsFiddle does this automatically for you, hence the drop down in the top left corner saying 'onLoad'

i.e. your code

$(); //this is the jQuery function


//This is your code wrapped in a function called 'yourCode'
function yourCode() {
    var $input = $('input:text'),
           $apply = $('#apply');

    $apply.attr('disabled', true);
    $input.keyup(function () {
        var trigger = false;
        $input.each(function () {
            if (!$(this).val()) {
                trigger = true;
            }
        });
        trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
    });
}

$(yourCode); //this is passing the jQuery function a function, 
             //this will now be execute once the page is loaded

//or what most people do, pass in as an anonymous function 
//which eliminates a step

$(function () {
    var $input = $('input:text'),
             $apply = $('#apply');

    $apply.attr('disabled', true);
    $input.keyup(function () {
        var trigger = false;
        $input.each(function () {
            if (!$(this).val()) {
                trigger = true;
            }
        });
        trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
    });
});

as suggested by @j08691 I would suggest reading about the document ready in jQuery here

Upvotes: 2

Related Questions