Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to prevent buttons from submitting forms
    text
    copied!<p>In the following page, with Firefox the remove button submits the form, but the add button doesn't. How do I prevent the remove button from submitting the form?</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="jquery-1.3.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; function addItem() { var v = $('form :hidden:last').attr('name'); var n = /(.*)input/.exec(v); var newPrefix; if ( n[1].length == 0 ) { newPrefix = '1'; } else { newPrefix = parseInt(n[1])+1; } var oldElem = $('form tr:last'); var newElem = oldElem.clone(true); var lastHidden = $('form :hidden:last'); lastHidden.val(newPrefix); var pat = '=\"'+n[1]+'input'; newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"'+newPrefix+'input')); newElem.appendTo('table'); $('form :hidden:last').val(''); } function removeItem() { var rows = $('form tr'); if ( rows.length &gt; 2 ) { rows[rows.length-1].html(''); $('form :hidden:last').val(''); } else { alert('Cannot remove any more rows'); } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form autocomplete="off" method="post" action=""&gt; &lt;p&gt;Title:&lt;input type="text" /&gt;&lt;/p&gt; &lt;button onclick="addItem(); return false;"&gt;Add Item&lt;/button&gt; &lt;button onclick="removeItem(); return false;"&gt;Remove Last Item&lt;/button&gt; &lt;table&gt; &lt;th&gt;Name&lt;/th&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="text" id="input1" name="input1" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="hidden" id="input2" name="input2" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;input id="submit" type="submit" name="submit" value="Submit"&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

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