Я знаю, что на этот вопрос был дан ответ несколько сотен раз, но я столкнулся с нагрузкой потенциальных спутников, но никто из них, похоже, не работает в моем случае.
Ниже приведена моя форма и код для отправки формы. Он запускается в PHP-скрипт. Теперь я знаю, что сам сценарий не является причиной отправки, поскольку я пробовал форму вручную, и она только отправляет один раз.
Первая часть кода jQuery связана с открытием лайтбокса и вытягиванием значений из таблицы внизу, я включил его в случае, по какой-либо причине, это потенциальная проблема.
Код jQuery:
$(document).ready(function(){ $('.form_error').hide(); $('a.launch-1').click(function() { var launcher = $(this).attr('id'), launcher = launcher.split('_'); launcher, launcher[1], $('td .'+launcher[1]); $('.'+launcher[1]).each(function(){ var field = $(this).attr('data-name'), fieldValue = $(this).html(); if(field === 'InvoiceID'){ $("#previouspaymentsload").load("functions/invoicing_payments_received.php?invoice="+fieldValue, null, function() { $("#previouspaymentsloader").hide(); }); } else if(field === 'InvoiceNumber'){ $("#addinvoicenum").html(fieldValue); } $('#'+field).val(fieldValue); }); }); $("#addpayment_submit").click(function(event) { $('.form_error').hide(); var amount = $("input#amount").val(); if (amount == "") { $("#amount_error").show(); $("input#amount").focus(); return false; } date = $("input#date").val(); if (date == "") { $("#date_error").show(); $("input#date").focus(); return false; } credit = $("input#credit").val(); invoiceID = $("input#InvoiceID").val(); by = $("input#by").val(); dataString = 'amount='+ amount + '&date=' + date + '&credit=' + credit + '&InvoiceID=' + invoiceID + '&by=' + by; $.ajax({ type: "POST", url: "functions/invoicing_payments_make.php", data: dataString, success: function(result) { if(result == 1){ $('#payment_window_message_success').fadeIn(300); $('#payment_window_message_success').delay(5000).fadeOut(700); return false; } else { $('#payment_window_message_error_mes').html(result); $('#payment_window_message_error').fadeIn(300); $('#payment_window_message_error').delay(5000).fadeOut(700); return false; } }, error: function() { $('#payment_window_message_error_mes').html("An error occured, form was not submitted"); $('#payment_window_message_error').fadeIn(300); $('#payment_window_message_error').delay(5000).fadeOut(700); } }); return false; }); }); Вот html-форма:
<div id="makepayment_form"> <form name="payment" id="payment" class="halfboxform"> <input type="hidden" name="InvoiceID" id="InvoiceID" /> <input type="hidden" name="by" id="by" value="<?php echo $userInfo_ID; ?>" /> <fieldset> <label for="amount" class="label">Amount:</label> <input type="text" id="amount" name="amount" value="0.00" /> <p class="form_error clearb red input" id="amount_error">This field is required.</p> <label for="credit" class="label">Credit:</label> <input type="text" id="credit" name="credit" /> <label for="amount" class="label">Date:</label> <input type="text" id="date" name="date" /> <p class="form_error clearb red input" id="date_error">This field is required.</p> </fieldset> <input type="submit" class="submit" value="Add Payment" id="addpayment_submit"> </form> </div>
Надеюсь, кто-то может помочь, так как он сводит меня с ума. Благодарю.
Иногда вам приходится не только предотвращать поведение по умолчанию для обработки события, но также предотвращать выполнение любой последующей последовательности обработчиков событий. Это можно сделать, вызвав event.stopImmediatePropagation() в дополнение к event.preventDefault() .
Пример кода:
$("#addpayment_submit").on('submit', function(event) { event.preventDefault(); event.stopImmediatePropagation(); });
Кроме того, вы привязываете действие к кнопке отправки «нажмите». Но что, если пользователь нажимает «вводить» во время ввода текстового поля и запускает действие формы по умолчанию? Ваша функция не будет работать.
Я бы это изменил:
$("#addpayment_submit").click(function(event) { event.preventDefault(); //code }
к этому:
$("#payment").bind('submit', function(event) { event.preventDefault(); //code }
Теперь не имеет значения, как пользователь отправляет форму, потому что вы собираетесь ее захватить независимо от того, что.
Попробуйте добавить следующие строки.
event.preventDefault(); event.stopImmediatePropagation();
Это сработало для меня.
Под вашей функцией щелчка добавьте в preventDefault() .
$("#addpayment_submit").click(function(event) { event.preventDefault(); // Code here return false; });
Это может решить вашу проблему. preventDeafult() останавливает событие по умолчанию от запуска. В этом случае ваша форма запускается при нажатии, а затем запускается снова, когда вы отправляете ее с помощью функции ajax.
Это также помогает добавить return false; в конце функции щелчка (см. выше).
Поскольку вы используете запрос AJAX для отправки данных на сервер, нет причин даже использовать тег form и <input type="submit" .../> (вместо этого вы можете использовать простую кнопку). Также я думаю, что ответ Кумбо должен работать. Если это не так, вы также можете попробовать event.stopPropagation() .
Я закончил тем, что менял сценарий по рекомендациям @ user2247104, к сожалению, форма, которую все еще подавали дважды.
Однако @Cumbo, @Barmar также были на правильном пути, за исключением того, чтобы заставить его работать
event.preventDefault();
Необходимо разместить внизу сценария:
}); event.preventDefault(); return false;
Спасибо всем за помощь 🙂