jQuery .on not working

Question

I've seen this appear in a lot of places; however, after several hours, I still can't figure this simple thing out. Could someone verify my syntax is correct here?

$(document).ready(function(){ 
    $("#login-form").on('submit', "#logout-btn", function() {
       alert("The logout button was clicked.");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
            <input placeholder="Username" id="formUsr" required>
            <input type="password" placeholder="Password" id="formPwd" required>

            <input id="logout-btn" type="submit" value="Login">
            <input id="login-btn" type="submit" value="Logout">
</form><!-- login form -->

try `$("#login-form").on('submit', function()` instead of `$("#login-form").on('submit', "#logout-btn", function()` — Pranav C Balan, Aug 24 '15 at 14:16
@PranavCBalan I think he's using the `selector` argument of [`.on()`](https://api.jquery.com/on/) in order to only fire the event when the `#logout-btn` is clicked, so I'm not sure that's the problem. — Noble Mushtak, Aug 24 '15 at 14:17
Hi, so click didn't work. $("#login-form").on('submit', function() works however I want to specify the logout button — userMod2, Aug 24 '15 at 14:20
No, the solution is more complicated than just `.submit()` or `.click()`. Go [here](https://stackoverflow.com/questions/5721724/jquery-how-to-get-which-button-was-clicked-upon-form-submission) for a temporary explanation. — Noble Mushtak, Aug 24 '15 at 14:22
I hope you've realized that the values for the buttons are swapped aswell, the **Login** button has `id="btn-logout"` and the other way around. Hopefully this is not what you've spent hours on... — Daniel B, Aug 24 '15 at 14:47
Do you have multiple login buttons that'd require not just referring to it directly? — Dave Newton, Aug 24 '15 at 14:52
The login button that you're delegating the event to does not have a submit action. — Popnoodles, Aug 24 '15 at 16:01

PeterKA · Accepted Answer · 2015-08-24T14:47:49.823

The submit event is triggered when a submit button is clicked, and there could be more than one, a button element without type="button|reset" is clicked. It can also be triggered by the Enter key.

You can use this to determine if the logout button was clicked. However, for form submission purposes, the submit event is by far the most reliable.:

$("#logout-btn").on('click', function(e) {
    e.preventDefault(); //prevents default action.
    alert("The logout button was clicked.");
});

$(function() {
    $("#logout-btn").on('click', function(e) {
        e.preventDefault(); //prevents default action.
        alert("The logout button was clicked.");
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
    <input placeholder="Username" id="formUsr" required/>
    <input type="password" placeholder="Password" id="formPwd" required/>

    <input id="login-btn" type="submit" value="Login"/>
    <input id="logout-btn" type="submit" value="Logout"/>
</form><!-- login form -->

Another approach:

$(function() {
    $(':submit').on('click', function(e) {
        e.preventDefault();
        if( $(this).is('#login-btn') ) {
            alert('login-btn clicked');
        } else if( $(this).is('#logout-btn') ) {
            alert('logout-btn clicked');
        } else {
            alert('some other submit button clicked');
        }
    });
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form id="login-form">
        <input placeholder="Username" id="formUsr" required/>
        <input type="password" placeholder="Password" id="formPwd" required/>

        <input id="login-btn" type="submit" value="Login"/>
        <input id="logout-btn" type="submit" value="Logout"/>
    </form><!-- login form -->

The code snippet above didn't work - using preventDefault didn't work. — userMod2, Aug 24 '15 at 14:39

score 0 · Answer 2 · answered Aug 24 '15 at 14:18

0

Try this:

$("#login-form").submit(function() {
   alert("The logout button was clicked.");
});

answered Aug 24 '15 at 14:18

Grald

454
5
15

This brings the alert but i want to specify the logout button only – userMod2 Aug 24 '15 at 14:20
Why there's a login and logout button there? – Grald Aug 24 '15 at 14:22
I'm hiding to showing one dependent or current logged in/out status. Theres some class hide code there but i didn't show here so as to keep problem clear ;-) – userMod2 Aug 24 '15 at 14:23
You should not use submit event for logout because there's no need to get info. from user's input – Grald Aug 24 '15 at 14:26

score 0 · Answer 3 · answered Aug 24 '15 at 14:26

Store the value of the last clicked button and in the .submit() event, make sure the last clicked button was the logout button. This works because the .click() event is fired before the .submit() event:

$(document).ready(function() {
    //The logout button:
    var logoutButton = $("#logout-btn");
    //This variable holds the button in #login-form that the user last clicked:
    var lastClicked = null;
    //When the user clicks a button in #login-form, set it equal to lastClicked:
    $("#login-form input[type=submit]").click(function() {
        lastClicked = $(this);
    });
    //When the form is submitted, if it was the logout button, call the alert:
    $("#login-form").on('submit', function() {
       if (lastClicked.is(logoutButton)) {
           alert("The logout button was clicked.");
       }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
            <input placeholder="Username" id="formUsr" required>
            <input type="password" placeholder="Password" id="formPwd" required>

            <input id="login-btn" type="submit" value="Login">
            <input id="logout-btn" type="submit" value="Logout">
</form><!-- login form -->

This works however seems really complicated. I would have thought this is a really simple thing to do. I understand whats happening. If i use click instead of submit that doesn't help either. — userMod2, Aug 24 '15 at 14:31
Unfortunately, this is rather complicated, but I don't think the DOM provides any easy way to do this. This is simply how JavaScript is. :( — Noble Mushtak, Aug 24 '15 at 14:38

score 0 · Answer 4 · answered Aug 24 '15 at 14:43

you have two submit button in your form, you can detrmine which was clicked like this.

$(document).ready(function() {
  $("#login-form input[type=submit]").click(function() {
    var clickedId = $(this).attr('id');
    if(clickedId=="logout-btn")
      alert("The logout button was clicked.");
    else if(clickedId=="login-btn")
    alert("The login button was clicked.");
  });
});

score 0 · Answer 5 · answered Aug 24 '15 at 14:57

Note that your Login button has the ID of the logout button and the other way around.

I'm gonna add an alternative to Peters answer, just for the sake of having an alternative.

Using onclick in the markup

function logOutClicked() {
  alert("Logout button clicked!");
  return true;
}

<form id="login-form">
  <input placeholder="Username" id="formUsr" required>
  <input type="password" placeholder="Password" id="formPwd" required>
  <input id="login-btn" type="submit" value="Login">
  <input id="logout-btn" type="submit" onclick="return logOutClicked();" value="Logout">
</form>

Using .bind() Since we have a linear compilation of JavaScript, the first event that will be bound to the logout button in this case is the click event.

$(document).ready(function() {
  $('#logout-btn').bind('click', function() {
    alert('Logout clicked click');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
  <input placeholder="Username" id="formUsr" required>
  <input type="password" placeholder="Password" id="formPwd" required>
  <input id="login-btn" type="submit" value="Login">
  <input id="logout-btn" type="submit" onclick="return logOutClicked();" value="Logout">
</form>

jQuery .on not working

5 Answers5