-2

I'm trying to check if the input is empty with jQuery and the code doesn't work.

That's the code:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="demo.js"></script>
    </head>

    <body>
        <form>
            <input type="text" id="name">
            <input type="submit" id="btnConnect">
        </form>
    </body>
</html>

$('#btnConnect').click(function()
{
    if($('#name').val() == '')
    {
        alert('Input is empty!');
    }
});
Emile Bergeron
  • 14,368
  • 4
  • 66
  • 111
Asez
  • 141
  • 1
  • 3
  • 13
  • 1
    check for undefined – Geeky Nov 02 '16 at 22:39
  • When I run your code, I get an alert "Input is empty" without a filled out input. – Wiktor Stribiżew Nov 02 '16 at 22:40
  • wrap the code in $(document).ready(function(){}); it shoud work as it is – Geeky Nov 02 '16 at 22:41
  • It works with $(document). But I don't understand why it doesn't work with my code, because I've seen the same code on another script and it works well. Thanks! – Asez Nov 02 '16 at 22:46
  • @Geeky is probably right. I assume the JS portion you pasted is from `demo.js`, which is loaded before the body of the page is parsed. This means that the event listener attempts to attach to `#btnConnect` when that element hasn't been parsed yet - so it attaches to nothing instead. You can either use the `$(document).ready()` function to postpone the script execution until the DOM is parsed, or you can put the script at the end of your body so the DOM is parsed anyway before the script is executed. – Mark Nov 02 '16 at 22:47
  • Load your ` – Chris Yongchu Nov 02 '16 at 22:47
  • And, what can I do if i have multiple inputs to check? Because as can I see, document is global. Please correct me if I'm wrong. I'm new on jQuery. – Asez Nov 02 '16 at 22:49
  • It's ok guys, I loaded my script before closing body and it works well. Thank you for your support! – Asez Nov 02 '16 at 22:51
  • http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready ...Read about document.ready ,you should make sure of wrapping your jQuery code within document.ready because it executes when whole html page gets rendered,if without this ,your js code gets executed and their may be a chance of not finding your input element – Geeky Nov 02 '16 at 22:51
  • but should read about document.ready and window.onload,they play very important role in js code – Geeky Nov 02 '16 at 22:52
  • If my answer helps, please accept it – mancestr Nov 03 '16 at 13:51

1 Answers1

0

Your problem has two easy solutions. Basically, you call your script before the rest of the page loads. Your script tries to attach to #btnConnect, which doesn't exist yet.

1). Use document.ready or window.onload. The script will only execute after the whole page loads, so it should work as you meant it to.

2). Place the JS files at the bottom of the document, right before the closing body tag. Most programmers chose to put the scripts at the bottom of the page, because if you have large scripts, the user sees a blank page untill they load. It works quite well, because most of the time JS is not required until the user begins interacting with the site. It also enables progressive rendering.

For more good JS practices, check out:

JSTheRightWay.org

Hope this helps!

mancestr
  • 833
  • 2
  • 11
  • 28