When I run submit, an alert message occurs as many times as you send it before you reload.
For example.
first run submit occur success message
not refresh second run submit two repeat occurs success message
not refresh third run submit three repeat occurs success message
...
not refresh n run submit n repeat occurs success message
Why does it run like this? How can I solve this problem?
My code is as follows.
$(document).ready(function() {
$('#my_modal').on('show.bs.modal', function(e) {
var p_index = $(e.relatedTarget).data('p_index');
$(e.currentTarget).find('input[name="p_index"]').val(p_index);
$("button#submit").click(function() {
$.ajax({
type: "POST",
async: false,
url: "../receipt/send.php",
data: $('form.send_p_index').serialize(),
success: function(data) {
alert("success")
$("#send_p_index")[0].reset()
$("#my_modal").modal('hide');
},
error: function() {
alert("Error");
}
});
});
});
}
WRONG
$(document).ready(function() {
$('#my_modal').on('show.bs.modal', function(e) {
var p_index = $(e.relatedTarget).data('p_index');
$(e.currentTarget).find('input[name="p_index"]').val(p_index);
$("button#submit").click(function() {
$.ajax({
type: "POST",
async: false,
url: "../receipt/send.php",
data: $('form.send_p_index').serialize(),
success: function(data) {
alert("success")
$("#send_p_index")[0].reset()
$("#my_modal").modal('hide');
},
error: function() {
alert("Error");
}
});
});
});
}
CORRECT: Put this outside of modal.shown because every time the modal shown, it will write a submit function that repeats as many as it shown.
$(document).on('click', 'button#submit', function() {
$.ajax({
type: "POST",
async: false,
url: "../receipt/send.php",
data: $('form.send_p_index').serialize(),
success: function(data) {
alert("success")
$("#send_p_index")[0].reset()
$("#my_modal").modal('hide');
},
error: function() {
alert("Error");
}
});
});