Wenn Sie eine <button> Element, um die Serialisierung und Ajax zu aktivieren, und wenn das <button> Element befindet sich innerhalb der form Element, das button fungiert automatisch als Formularübermittlung, unabhängig davon, welche andere .click-Zuweisung Sie ihm mit jQuery geben.
type='submit'
<button></button> y <button type='submit'></button> sind ein und dasselbe. Sie übermitteln ein Formular, wenn sie innerhalb der <form> Element.
type='Schaltfläche'
<button type='button'></button> ist anders. Es handelt sich um eine normale Schaltfläche, die das Formular nicht abschickt (es sei denn, Sie veranlassen sie absichtlich, das Formular per JavaScript abzuschicken).
Und für den Fall, dass ein Formular Element kein Aktionsattribut angegeben ist, sendet diese Übermittlung die Daten einfach an dieselbe Seite zurück. Die Seite wird also aktualisiert, und die serialisierten Daten erscheinen in der URL, als ob Sie GET in Ihrem Ajax verwenden würden.
Mögliche Lösungen
1 - Machen Sie die <button> Typ button . Wie oben erläutert, wird dadurch verhindert, dass die Schaltfläche das Formular abschickt.
Vorher:
<form id='myForm'>
<!--Some inputs, selects, textareas, etc here-->
<button id='mySubmitButton'>Submit</button>
</form>
Danach:
<form id='myForm'>
<!--Some inputs, selects, textareas, etc here-->
<button type='button' id='mySubmitButton'>Submit</button>
</form>
2 - Bewegen Sie die <button> Element außerhalb des <form> Element. Dadurch wird verhindert, dass die Schaltfläche das Formular abschickt.
Vorher:
<form id='myForm'>
<!--Some inputs, selects, textareas, etc here-->
<button id='mySubmitButton'>Submit</button>
</form>
Danach:
<form id='myForm'>
<!--Some inputs, selects, textareas, etc here-->
</form>
<button id='mySubmitButton'>Submit</button>
3 - Hinzufügen der preventDefault() in den Button-Click-Handler, um zu verhindern, dass das Formular abgeschickt wird (Standardaktion):
$("#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);
});
});
Offensichtlich ohne zu sehen, alle Ihren Code, ich habe keine Ahnung, ob dies der Fall für Ihr Problem ist, aber der einzige Grund, den ich jemals gesehen habe Verhalten, das Sie beschreiben, ist, weil die Schaltfläche "Senden" war ein <button> ohne Angabe eines Typs.
