Если вы используете элемент <button>
для активации сериализации и ajax, и если этот элемент <button>
находится внутри элемента form
, button
автоматически действует как отправка формы, независимо от того, что другое. щелкните назначение, которое вы дадите ему с помощью jQuery.
Тип = 'Отправить'
<button></button>
и <button type='submit'></button>
- это одно и то же. Они отправят форму, если они помещены в элемент <form>
.
Тип = 'кнопка'
<button type='button'></button>
отличается. Это обычная кнопка, которая не будет отправлять форму (если вы специально не отправите ее через JavaScript).
И в случае, когда элемент form не имеет указанного атрибута действия, эта отправка просто отправляет данные обратно на ту же страницу. Таким образом, вы увидите обновление страницы вместе с сериализованными данными, отображаемыми в URL, как если бы вы использовали GET в своем ajax.
Возможные решения
1 - сделать <button>
тип button
. Как объяснено выше, это не позволит кнопке отправить форму.
До:
<form id='myForm'>
<!--Some inputs, selects, textareas, etc here-->
<button id='mySubmitButton'>Submit</button>
</form>
После того, как:
<form id='myForm'>
<!--Some inputs, selects, textareas, etc here-->
<button type='button' id='mySubmitButton'>Submit</button>
</form>
2 - Переместите элемент <button>
за пределы элемента <form>
. Это не позволит кнопке отправить форму.
До:
<form id='myForm'>
<!--Some inputs, selects, textareas, etc here-->
<button id='mySubmitButton'>Submit</button>
</form>
После того, как:
<form id='myForm'>
<!--Some inputs, selects, textareas, etc here-->
</form>
<button id='mySubmitButton'>Submit</button>
3 - Добавьте preventDefault()
в обработчик нажатия кнопки, чтобы предотвратить отправку формы (это действие по умолчанию):
$("#addShowFormSubmit").click(function(event){
event.preventDefault();
var perfTimes = $("#addShowForm").serialize();
$.post("includes/add_show.php", {name: $("#showTitle").val(), results: perfTimes }, function(data) {
$("#addShowSuccess").empty().slideDown("slow").append(data);
});
});
Очевидно, что не видя весь ваш код, я понятия не имею, так ли это для вашей проблемы, но единственная причина, по которой я когда-либо видел поведение, которое вы описываете, заключается в том, что кнопка отправки была <button>
без указанного типа.