Why does function only work on second click?

Question

I am trying to submit data through a form and when the submit button is click I want certain images to disappear with style.display = 'none';. Currently, I have to click the button twice before images disappear. Is there a way to do this on first click?

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>

JS:

$('#post-form').on('submit', function(event) {
    event.preventDefault();
    console.log("form submitted!")
    create_post();
});

function create_post() {
    console.log("create post is working!");
    $("button").click(function() {
        var cbtn = $(this);
        var btnval = cbtn.val();
        console.log(btnval);
        document.getElementById('gbimg').style.display = 'none';
    });

    //$.ajax({
    //    url : "create_post/",
    //    type : "POST",
    //    data : { model : 
};

roscioli · Accepted Answer · 2015-06-18T15:39:15.340

2

If your <button> executes the submit function for the form, you should just disappear the button on submitting of the form instead of adding the click handler in the create_post() method. So:

$('#post-form').on('submit', function(event) {
    event.preventDefault();
    console.log("form submitted!");

    var cbtn = $("button");
    var btnval = cbtn.val();
    console.log(btnval);
    document.getElementById('gbimg').style.display = 'none';

    create_post();
});

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

    //$.ajax({
    //    url : "create_post/",
    //    type : "POST",
    //    data : { model : 
};

edited Jun 18 '15 at 15:39

answered Jun 18 '15 at 15:33

roscioli

1,200
3
15
33

What if you have multiple buttons that are of `type=submit` but they have different values? The request seems to only preserve the first button when I process it server side. I'm using Django. – wxcoder Jun 18 '15 at 19:04
Check out http://stackoverflow.com/questions/547821/two-submit-buttons-in-one-form – roscioli Jun 18 '15 at 19:08
It seems that this problem is before it even get servers side I did a `console.log()` of the button values (before the ajax request) when I click the second and third buttons and they return the value of the first button. – wxcoder Jun 18 '15 at 19:19
Hmm, even if you label each with a unique `name=""`? – roscioli Jun 18 '15 at 19:23
Yes. Maybe the code is grabbing the first button it sees as opposed to the button that is actually clicked? – wxcoder Jun 18 '15 at 19:25
What you could do at this point is make a separate form for each submit button. Not exactly the best solution, but it'll work for now. – roscioli Jun 18 '15 at 19:27
That's a possibility but I have more buttons that what I have shown here so it's not really a great solution. – wxcoder Jun 18 '15 at 19:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80930/discussion-between-roscioli-and-wxcoder). – roscioli Jun 18 '15 at 19:40

taxicala · Answer 2 · 2015-06-18T15:44:26.953

1

Move the button click handler outside your create_post function:

$(document).ready(function () {
    $('#post-form').on('submit', function(event) {
        event.preventDefault();
        console.log("form submitted!")
        create_post();
    });

    function create_post() {
        console.log("create post is working!");
        var cbtn = $("button");
        var btnval = cbtn.val();
        console.log(btnval);
        document.getElementById('gbimg').style.display = 'none';

        //$.ajax({
        //    url : "create_post/",
        //    type : "POST",
        //    data : { model : 
    };
});

edited Jun 18 '15 at 15:44

answered Jun 18 '15 at 15:32

taxicala

21,408
7
37
66

I should have been more specific. I'm looking for this behavior only when a submission is made to the form, so not all buttons on the page are affected. – wxcoder Jun 18 '15 at 15:42
Edited, remove the click handler and move the code inside the create post function. – taxicala Jun 18 '15 at 15:44

Why does function only work on second click?

2 Answers2

Linked