Explore Courses Blog Tutorials Interview Questions
0 votes
in Web Technology by (20.3k points)

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?



<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">

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');


  var pat = '=\"'+n[1]+'input';

  newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"'+newPrefix+'input'));


  $('form :hidden:last').val('');


function removeItem() {

  var rows = $('form tr');

  if ( rows.length > 2 ) {


    $('form :hidden:last').val('');

  } else {

    alert('Cannot remove any more rows');






<form autocomplete="off" method="post" action="">

<p>Title:<input type="text" /></p>

<button onclick="addItem(); return false;">Add Item</button>

<button onclick="removeItem(); return false;">Remove Last Item</button>




  <td><input type="text" id="input1" name="input1" /></td>

  <td><input type="hidden" id="input2" name="input2" /></td>



<input id="submit" type="submit" name="submit" value="Submit">




1 Answer

0 votes
by (40.7k points)

It looks like you are using an HTML5 button element. 

Therefore, you have to specify its type explicitly to override the default submit type like this:

<button type="button">Button</button>

Note: The HTML5 button has a default behavior of submitting. 

For more information, you can refer to this document:

Related questions

0 votes
1 answer
asked Aug 28, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer
0 votes
1 answer

Browse Categories