StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you are using a <code><button></code> element to activate the serialize and ajax, and if that <code><button></code> element is within the <code>form</code> element, the <code>button</code> automatically acts as a form submission, no matter what other .click assignment you give it with jQuery.</p> <h2>type='submit'</h2> <p><code><button></button></code> and <code><button type='submit'></button></code> are the same thing. They will submit a form if placed within the <code><form></code> element.</p> <h2>type='button'</h2> <p><code><button type='button'></button></code> is different. It is just a normal button and will not submit the form (unless you purposely make it submit the form via JavaScript).</p> <p>And in the case where a <strong>form</strong> element has no action attribute specified, this submission simply sends the data back onto the same page. So you will end up seeing a page refresh, along with the serialized data appearing in the URL as if you used GET in your ajax.</p> <h2>Possible solutions</h2> <p>1 - Make the <code><button></code> type <code>button</code>. As explained above, this will prevent the button from submitting the form.</p> <p>Before:</p> <pre><code><form id='myForm'>  <button id='mySubmitButton'>Submit</button> </form> </code></pre> <p>After:</p> <pre><code><form id='myForm'>  <button type='button' id='mySubmitButton'>Submit</button> </form> </code></pre> <p>2 - Move the <code><button></code> element outside the <code><form></code> element. This will prevent the button from submitting the form.</p> <p>Before:</p> <pre><code><form id='myForm'>  <button id='mySubmitButton'>Submit</button> </form> </code></pre> <p>After:</p> <pre><code><form id='myForm'>  </form> <button id='mySubmitButton'>Submit</button> </code></pre> <p>3 - Add in the <code>preventDefault()</code> into the button click handler to prevent the form from being submitted (it's default action):</p> <pre><code>$("#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); }); }); </code></pre> <p>Obviously without seeing all your code, I have no idea if this is the case for your issue, but the only reason I have ever seen behavior you are describing is because the submit button was a <code><button></code> without a type specified.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload