How to prevent buttons from submitting forms

2018-12-31 01:27发布

站内问答 / JavaScript
1031 16 6

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>

16条回答
泪湿衣
2楼-- · 2018-12-31 01:35

Sometime ago I needed something very similar... and I got it.

So what I put here is how I do the tricks to have a form able to be submitted by JavaScript without any validating and execute validation only when the user presses a button (typically a send button).

For the example I will use a minimal form, only with two fields and a submit button.

Remember what is wanted: From JavaScript it must be able to be submitted without any checking. However, if the user presses such a button, the validation must be done and form sent only if pass the validation.

Normally all would start from something near this (I removed all extra stuff not important):

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

See how form tag has no onsubmit="..." (remember it was a condition not to have it).

The problem is that the form is always submitted, no matter if onclick returns true or false.

If I change type="submit" for type="button", it seems to work but does not. It never sends the form, but that can be done easily.

So finally I used this:

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

And on function Validator, where return True; is, I also add a JavaScript submit sentence, something similar to this:

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

The id="" is just for JavaScript getElementById, the name="" is just for it to appear on POST data.

On such way it works as I need.

I put this just for people that need no onsubmit function on the form, but make some validation when a button is press by user.

Why I need no onsubmit on form tag? Easy, on other JavaScript parts I need to perform a submit but I do not want there to be any validation.

The reason: If user is the one that performs the submit I want and need the validation to be done, but if it is JavaScript sometimes I need to perform the submit while such validations would avoid it.

It may sounds strange, but not when thinking for example: on a Login ... with some restrictions... like not allow to be used PHP sessions and neither cookies are allowed!

So any link must be converted to such form submit, so the login data is not lost. When no login is yet done, it must also work. So no validation must be performed on links. But I want to present a message to the user if the user has not entered both fields, user and pass. So if one is missing, the form must not be sent! there is the problem.

See the problem: the form must not be sent when one field is empty only if the user has pressed a button, if it is a JavaScript code it must be able to be sent.

If I do the work on onsubmit on the form tag, I would need to know if it is the user or other JavaScript. Since no parameters can be passed, it is not possible directly, so some people add a variable to tell if validation must be done or not. First thing on validation function is to check that variable value, etc... Too complicated and code does not say what is really wanted.

So the solution is not to have onsubmit on the form tag. Insead put it where it really is needed, on the button.

For the other side, why put onsubmit code since conceptually I do not want onsubmit validation. I really want button validation.

Not only the code is more clear, it is where it must be. Just remember this: - I do not want JavaScript to validate the form (that must be always done by PHP on the server side) - I want to show to the user a message telling all fields must not be empty, that needs JavaScript (client side)

So why some people (think or tell me) it must be done on an onsumbit validation? No, conceptually I am not doing a onsumbit validating at client side. I am just doing something on a button get pressed, so why not just let that to be implemented?

Well that code and style does the trick perfectly. On any JavaScript that I need to send the form I just put:

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

And that skips validation when I do not need it. It just sends the form and loads a different page, etc.

But if the user clicks the submit button (aka type="button" not type="submit") the validation is done before letting the form be submitted and if not valid not sent.

Well hope this helps others not to try long and complicated code. Just not use onsubmit if not needed, and use onclick. But just remember to change type="submit" to type="button" and please do not forget to do the submit() by JavaScript.

查看更多
0人赞 添加讨论(0) 举报
春风洒进眼中
3楼-- · 2018-12-31 01:36

I am sure that on FF the 

removeItem

function encounter a JavaScript error, this not happend on IE

When javascript error appear the "return false" code won't run, making the page to postback

查看更多
0人赞 添加讨论(0) 举报
时光乱了年华
4楼-- · 2018-12-31 01:36 
return false;

You can return false at the end of the function or after the function call.

Just as long as it's the last thing that happens, the form will not submit.

查看更多
0人赞 添加讨论(0) 举报
笑指拈花
5楼-- · 2018-12-31 01:37

You can simply get the reference of your buttons using jQuery, and prevent its propagation like below:

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});
查看更多
0人赞 添加讨论(0) 举报
若你有天会懂
6楼-- · 2018-12-31 01:38

$("form").submit(function () { return false; }); that will prevent the button from submitting or you can just change the button type to "button" <input type="button"/> instead of <input type="submit"/> Which will only work if this button isn't the only button in this form.

查看更多
0人赞 添加讨论(0) 举报
梦寄多情
7楼-- · 2018-12-31 01:39

Suppose your HTML form has id="form_id"

<form id="form_id">
<!--your HTML code-->
</form>

Add this jQuery snippet to your code to see result,

$("#form_id").submit(function(){
  return false;
});
查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)