jQuery button click registering previous clicks

Question

I have a form with multiple buttons that submit to it that differ by value. After I click a button, and then click a second button, the function operates on them both instead of just the second button. Is there a way to prevent this behavior?

This is somewhat related to a question I asked here: Why does function only work on second click? but the solution isn't valid if there a multiple buttons as it just registers the first button from the list of buttons.

JS:

$(document).ready(function () {
    $(':button').click(function (){
        var myval = $(this).attr("value");


        $('#post-form').on('submit', function(event) {
            event.preventDefault();
            console.log("form submitted!");
            console.log(myval);
            //var cbtn = $("button");
            //var btnval = cbtn.val();
            //console.log(cbtn);
            document.getElementById('gbimg').style.display = 'none';
            document.getElementById('rgimg').style.display = 'none';
            create_post(myval);

        });

    });


    function create_post(btnval) {
        console.log("create post is working!");
        $.ajax({

HTML:

<form action="/create_post/" method="POST" id="post-form">
    <div class="col-sm-4" id="toprow">
        <h4 style="font-family:verdana"> Models </h4>
        <img src='{% static 'images/USAcomplete2.png' %}' class="img-responsive thumbnail" id='gbimg' >
        <div class="btn-toolbar">
            <button type="submit" name="model" value="test" class="btn btn-default">test</button>
            <button type="submit" name="model" value="test2" class="btn btn-default">test2</button>
            <button type="submit" name="model" value="test3" class="btn btn-default">test3</button>
        </div>
    </div>
</form>

Why do you have a submit handler inside click handler? A single `submit` handler would suffice; as you already have `button type="submit"` — Shaunak D, Jun 19 '15 at 16:22
@ShaunakD When I just use the submit handler it returns a list of all the buttons, not the one I clicked. See the second paragraph. — wxcoder, Jun 19 '15 at 16:23
possible duplicate of [jQuery: how to get which button was clicked upon form submission?](http://stackoverflow.com/questions/5721724/jquery-how-to-get-which-button-was-clicked-upon-form-submission) — lshettyl, Jun 19 '15 at 16:37
@LShetty That solution did in fact work. I didn't implement the second function when I tried it which was key. — wxcoder, Jun 19 '15 at 17:46

score 0 · Answer 1 · answered Jun 19 '15 at 16:24

What is happening here is that you are binding the submit event to #post-form a second time when a second button is clicked, as the binding happens inside the button clicking event callback.

The best way to prevent this is to move this

$('#post-form').on('submit', function(event) {
            ...
});

outside of your button click event.

Katrina · Accepted Answer · 2015-06-19T18:41:25.883

You need to prevent the form from submitting before the user clicks the button.

$(document).ready(function () {
    $('#post-form').on('submit', function(event, myval) {
        event.preventDefault();
        console.log("form submitted!");
        console.log(myval);
        //var cbtn = $("button");
        //var btnval = cbtn.val();
        //console.log(cbtn);
        document.getElementById('gbimg').style.display = 'none';
        document.getElementById('rgimg').style.display = 'none';
        create_post(myval);
    });
    $(':button').click(function (){
        var myval = $(this).attr("value");
        $('#post-form').trigger('submit', myval);

    });

Update

Sorry, I think this code should work. The above code would run twice, since a button click would be considered a form submit as well.

$(document).ready(function () {
    $('#post-form').on('submit', function(event) {
        event.preventDefault();
    });
    $(':button').click(function (){
        var myval = $(this).attr("value");
        console.log("form submitted!");
        console.log(myval);
        //var cbtn = $("button");
        //var btnval = cbtn.val();
        //console.log(cbtn);
        document.getElementById('gbimg').style.display = 'none';
        document.getElementById('rgimg').style.display = 'none';
        create_post(myval);

    });

This returns the button value and `none` when clicking the buttons. — wxcoder, Jun 19 '15 at 17:38
When you say returns, do you mean `console.log()` puts the buttons value? Or the `create_post()` function returns the value? And how does it return none? As a string, or do you mean `undefined`? — Katrina, Jun 19 '15 at 18:37
From what I remember (i've changed the code since), the console.log() output my value would first return the button value and a second value of `None`. Your updated answer works. — wxcoder, Jun 19 '15 at 19:11

jQuery button click registering previous clicks

2 Answers2

Update