jQuery HTML Button fires function multiple times

Question

I'm creating an HTML form that displays a column of checkboxes, click on submit and the event will be picked up by a jQuery function. However, after examining the function in the Firebug net panel, I've noticed that the function fires multiple times even if I click the button just once! Any idea why?

HTML:

echo "<form id='massHoursSubtraction'>";
echo "How many hours to subtract? <input type='text' name='hours'><br />";
$entries = 1;
while($row = mysql_fetch_array($members)) {
    $studentID = $row['studentid'];
    echo "<input type='checkbox' name='studentID[]' id='' value='$studentID'>$studentID";
    echo "<br />";
    $entries++;
}
echo "<input type='button' id='submitValues' value='Submit' onclick='javascript:getHours($entries);' />";
echo "</form>";

Javascript:

function getHours(numberOfEntries) {
$(document).ready(function() {
    $("#submitValues").click(function(){
        var str = $("#massHoursSubtraction").serialize();
        alert("How many times?");           
        $.post("output.php", str);                                  
    });
});
}

Here's a screenshot of the Firebug net panel: http://imgur.com/Z83s5fr This is the $_POST string: hours=1&studentID%5B%5D=5112244

Oded · Accepted Answer · 2013-04-07 07:47:22Z

5

You have both an onclick attribute on the button and in your jQuery you then register the click event. So, every time you click the button, you add at least one more listener to the click event. First click, you add it once, second time, you add it another 2 times for a total of 4, this time, however the handler will actually fire (it doesn't first time as it is registering).

Remove the onclick attribute from the button and remove the function altogether so you only have:

$(document).ready(function() {
    $("#submitValues").click(function(){
        var str = $("#massHoursSubtraction").serialize();
        alert("How many times?");           
        $.post("output.php", str);                                  
    });
});

answered Apr 7, 2013 at 7:47

Oded

501k102 gold badges900 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Travis J · Accepted Answer · 2013-04-07 07:47:22Z

4

That is because every time you click on the element submitValues it attaches a click handler there. That is where your extra events are coming from. You should instead just do this:

echo "<input type='button' id='submitValues' value='Submit' />"

and then attach your event handler once when document.ready is issued here:

$(document).ready(function() {
 $("#submitValues").click(function(){
    var str = $("#massHoursSubtraction").serialize();
    alert("How many times?");           
    $.post("output.php", str);                                  
 });
});

answered Apr 7, 2013 at 7:47

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Comments

Pang · Accepted Answer · 2015-02-03 06:29:50Z

0

Put the following line inside the function you are calling

$("#IdofButton").removeAttr('onclick');

This will remove the click function of the button, so it cannot fire the function multiple times.

edited Feb 3, 2015 at 6:29

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Oct 27, 2014 at 6:56

Vicky

1,5524 gold badges18 silver badges32 bronze badges

Collectives™ on Stack Overflow

jQuery HTML Button fires function multiple times

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related