防止表单自动提交,以及submit和button提交表单的区别

如题所述

先说防止表单自动提交:
1、可以为form标签加入 onsubmit 事件,事件调用的方法返回true时,提交,false时不提交。
2、较为全面的方式是为form做一个表单提交前验证,就是在表单提交按钮上添加一个方法:检查所有表单内容是否符合标准,符合就发送ajax请求将数据发到后端保存,不符合就提示用户更正。

submit和button的提交表达的区别,submit不用特殊绑定事件,直接回提交当前form中的数据到form指定的地址,button需要单独绑定事件才能达到相同效果。可以理解为submit与form直接相关,button只是一个普通的按钮,用户不为他制定任务他就是一个没用的按钮。
温馨提示:内容为网友见解,仅供参考
第1个回答  2016-05-23

----button提交(默认为form提交,可以提交表单 form)

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function checkForm()
{
  if(document.form1.userName.value.length==0)
  {
     alert("请输入用户名!");
     return false;
  }
  return true; 
  document.form1.submit(); 
}
</script>
</head>

<body>
<form name="form1"  method="post" action="ygdacx.html" onsubmit="return checkForm()">
  <input type="text" name="userName" size="10" />
   <input type="submit" value="提 交" />
</form>
</body>
</html>

-----submit提交(响应用户自定义事件,如果不指定onclick事件等事件处理函数,则不做任何事情)

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function checkForm()
{
  if(document.form1.userName.value.length==0)
  {
     alert("请输入用户名!");
     return false;
  }
  document.form1.action ="ygdacx.html";   
  document.form1.submit(); 
}
</script>
</head>

<body>
<form name="form1"  method="post">
  <input type="text" name="userName" size="10" />
   <!--<input type="submit" value="提 交" />  -->
   <input type="button" value="提 交"  onclick="checkForm()" />
</form>
</body>

相似回答