Reputation: 330
My Ajax form is submitting twice for some reason even using preventDefault()
and return false
.
<script type="text/javascript">
$("#form_codes").submit(function(e) {
e.preventDefault();
$.ajax({
data: $('#form_codes').serialize(),
type: 'POST',
url: '{{url('save_code')}}',
success: function(msg) {
$('#product_codes > tbody:last-child').append('<tr><td>' + $('#code').val() + '</td><td>' + $('#description').val() + '</td></tr>');
$('#code').val('');
$('#description').val('');
},
error: function(msg) {
}
});
return false;
});
</script>
Upvotes: 0
Views: 105
Reputation: 330
Turns out in my blade template engine i was yielding my script twice (effectively including it twice.)
The function works fine and only submits once now.
Upvotes: 0
Reputation: 2613
Try adding e.stopImmediatePropagation()
to the submit event, as it prevents every other event from executing so this may stop the second form submit.
<script type="text/javascript">
$("#form_codes").submit(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$.ajax({
data: $('#form_codes').serialize(),
type: 'POST',
url: '{{url('save_code')}}',
success: function(msg) {
$('#product_codes > tbody:last-child').append('<tr><td>' + $('#code').val() + '</td><td>' + $('#description').val() + '</td></tr>');
$('#code').val('');
$('#description').val('');
},
error: function(msg) {
}
});
return false;
});
</script>
Upvotes: 1