Javascript 如何防止按钮提交表单

在下一页中，Firefox的“删除”按钮提交表单，但“添加”按钮不提交表单

如何防止

删除
按钮提交表单


函数addItem（）{
var v=$（'form:hidden:last'）.attr（'name'）；
var n=/（*）input/.exec（v）；
var-newPrefix；
如果（n[1]。长度==0）{
newPrefix='1'；
}否则{
newPrefix=parseInt（n[1]）+1；
}
var oldElem=$（'formtr:last'）；
var newElem=oldElem.clone（true）；
var lasthhidden=$（'form:hidden:last'）；
lasthinded.val（newPrefix）；
var pat='=\“'+n[1]+'input'；
html（newElem.html（）；
newElem.appendTo（“表”）；
$（'form:hidden:last'）.val（“”）；
}
函数removietem（）{
变量行=$（'form tr'）；
如果（rows.length>2）{
行[rows.length-1].html（“”）；
$（'form:hidden:last'）.val（“”）；
}否则{
警报（“无法删除更多行”）；
}
}

标题：

添加项
删除最后一项
名称
设置按钮的类型：

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

请注意更改：您的原始代码从jQuery集中提取了一个HTML元素，然后尝试对其调用jQuery方法-这引发了一个异常，导致按钮的默认行为

FWIW，还有另一种方法你可以这样做。。。使用jQuery连接事件处理程序，并使用jQuery对象上的方法提前取消默认行为：

$(function() // execute once the DOM has loaded
{

  // wire up Add Item button click event
  $("#AddItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
  });

  // wire up Remove Last Item button click event
  $("RemoveLastItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of remove last logic
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

$（function（）//加载DOM后执行
{
//连线添加项目按钮单击事件
$（“#添加项”）。单击（函数（事件）
{
event.preventDefault（）；//取消默认行为
//…添加逻辑的其余部分
});
//连线删除最后一项按钮单击事件
$（“RemovelAsItem”）。单击（函数（事件）
{
event.preventDefault（）；//取消默认行为
//…删除最后一个逻辑的其余部分
});
});
...
添加项
删除最后一项

此技术将所有逻辑保持在一个位置，使调试更容易。。。它还允许您通过将按钮上的
类型更改回
submit
并在服务器端处理事件来实现回退-这称为。
我确信在FF上

removeItem 

函数遇到JavaScript错误，这在IE上不会发生

当出现javascript错误时，“return false”代码将不会运行，使页面回发
我同意Shog9，但我可能会使用：

<input type = "button" onClick="addItem(); return false;" value="Add Item" />



，标签在不同的浏览器上有不同的行为。
函数removeItem实际上包含一个错误，使表单按钮执行默认行为（提交表单）。在这种情况下，javascript错误控制台通常会给出一个指针

查看javascript部分中的函数removeItem：

该行：

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

不起作用。请尝试以下方法：

rows.eq(rows.length-1).html('');

我现在无法测试这个，但我认为您可以使用jQuery的方法。
不久前，我需要一些非常类似的东西。。。我明白了

因此，我在这里介绍的是如何使用JavaScript提交表单，而无需任何验证，并且仅当用户按下按钮（通常是发送按钮）时才执行验证

对于这个例子，我将使用一个最小的表单，只有两个字段和一个提交按钮

记住你想要什么：
从JavaScript中，它必须能够在不进行任何检查的情况下提交。但是，如果用户按下这样一个按钮，则必须完成验证，并且只有通过验证后才能发送表单

通常情况下，一切都会从这附近的某个地方开始（我删除了所有不重要的额外内容）：

在
函数验证器
上，其中
返回True是，我还添加了一个JavaScript提交语句，类似于：

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

id=“”
仅用于JavaScript
getElementById
，而
name=“”
仅用于在POST数据上显示

按我需要的方式工作

我只为那些不需要表单上的submit
函数，但在用户按下按钮时进行一些验证的人提供了这个功能

为什么我不需要在表单标签上提交？简单，在其他JavaScript部件上，我需要执行提交，但我不希望有任何验证

原因是：如果用户是执行提交的人，我希望并需要进行验证，但如果是JavaScript，有时我需要执行提交，而这样的验证可以避免

这听起来可能很奇怪，但不是在思考时，例如：在登录时。。。有一些限制。。。比如不允许使用PHP会话，也不允许使用Cookie

因此，任何链接都必须转换为这样的表单提交，这样登录数据就不会丢失。
当没有登录完成时，它也必须工作。因此，不必对链接执行任何验证。
但是如果用户没有同时输入user和pass两个字段，我想向用户显示一条消息。因此，如果缺少一个，则不得发送该表格！这就是问题所在

查看问题：只有当用户按下按钮时，当一个字段为空时，才能发送表单，如果是JavaScript代码，则必须能够发送表单

如果我在表单标签上的
onsubmit
上进行工作，我需要知道它是用户还是其他JavaScript。由于无法传递任何参数，因此不可能直接传递，因此有些人会添加一个变量来判断是否必须进行验证。验证函数的第一件事是检查变量值等。。。太复杂了，代码没有说明真正需要什么

因此，解决方案是在表单标记上不包含onsubmit。欧洲工商管理学院把它放在真正需要的地方，在按钮上

另一方面，既然概念上我不想要onsubmit验证，为什么要把onsubmit代码放在上面呢。我真的需要按钮验证<
<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>

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

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

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

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

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});

     <button type="submit" onclick="return false"> Register </button>

return false;

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

$("#form_id").submit(function(){
  return false;
});

 <form autocomplete="off" method="post" action="">
   <p>Title:
     <input type="text" />
   </p>
   <input type="button" onclick="addItem()" value="Add Item">
   <input type="button" onclick="removeItem()" value="Remove Last Item">
   <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>
<script language="javascript">
function addItem() {
return false;
}

function removeItem() {
return false;
}
</script>

   <button onclick="myFunc(e)"> Remove </button>  
   ...
   ...

   In function...

   function myFunc(e){
       e.preventDefault();
   }

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

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

            return false;
    });});

 <button id="btnSubmit" type="button">PostData</button>
 <Script> $("#btnSubmit").click(function(){
   // do stuff
   return false;
}); </Script>

 <button type="submit" onclick="return false"> PostData</button>

function myFunc(e){
       e.preventDefault();
}