Back

Explore Courses Blog Tutorials Interview Questions

How to prevent buttons from submitting forms

0 votes
2 views
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?

<html>

<head>

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

  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 > 2 ) {

    rows[rows.length-1].html('');

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

  } else {

    alert('Cannot remove any more rows');

  }

}

</script>

</head>

<body>

<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>

<table>

<th>Name</th>

<tr>

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

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

</tr>

</table>

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

</form>

</body>

</html>

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:  https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element

Related questions

0 votes
1 answer
Two submit buttons in one form
asked Aug 28, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer
Submitting a form on 'Enter' with jQuery?
asked Aug 29, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer
Set the value of an input field
asked Aug 29, 2019 in Web Technology by Tech4ever (20.3k points)

Browse Categories

© COPYRIGHT 2011-2023 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...