J.doe J.doe - 3 months ago 10
Javascript Question

a stubborn jquery function

So i have a log in page, there is a form and what i wanna do is when the user enters their username and password, it checks it in an object (ik i should do it in backend but stay with me here) but the jquery function is not working. here is the code.

<div class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="ID" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button id="but" type="submit" class="btn btn-primary btn-block btn-large">Enter Workspace</button>
</form>
</div>
<script>
$('#but').click(function() {
alert("lol");
});
</script>


what do i neeed to fix in order for the jquery function to work?

Answer

Adding jquery in the script. Also you may write the jquery functions in $(document).ready() or $(function(){}) but it as optional as long as your write your script after the element it is trying to access.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login">
    <h1>Login</h1>
    <form>
        <input type="text" name="u" placeholder="ID" required="required" />
        <input type="password" name="p" placeholder="Password" required="required" />
        <button id="but" type="submit" class="btn btn-primary btn-block btn-large">Enter Workspace</button>
    </form>
</div>
    <script>
      $(function(){
        $('#but').click(function() { 
            alert("lol");   
        });
      })
        
    </script>