user982124 user982124 - 1 month ago 7
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>1234A</td>
<td>Option A</td>
<td class="text-center">
<button type="button" class="btn btn-success btn-sm">Select</button>
</td>

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


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() {
$('#productID').val(productID);
});
});



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


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

Answer

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() {
    $('#productID').val(productID);
  });
});