user982124 user982124 - 11 months ago 57
HTML Question

Button Firing 2 Scripts instead of 1

I have a table which allows users to make a selection from a list of items and stores the selected ID in a hidden form input, and then a submit button which validates to make sure the hidden form input is not empty.

Here's the HTML showing a single row and the submit button:

<tr class="" id="PR7518">
<td>Option A</td>
<td class="text-center">
<button type="button" class="btn btn-success btn-sm">Select</button>

<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" class="btn btn-success">Submit</button>

The submit button is invoking both of the following scripts, when I only want it to invoke the form submit (2nd script):

$(document).ready(function() {
$('button.btn-success').click(function() {

$("form").submit(function(event) {
if ($('#productID').val() == '') {
return false;

Not sure what change I need to make to prevent the submit button from invoking the first script?

Answer Source

You can add :not([type="submit"]) to your selector in the first script to exclude the submit button.

$(document).ready(function() {
  $('button.btn-success:not([type="submit"])').click(function() {