HTML form 避免(回车)表单自动提交

最新推荐文章于 2024-08-13 10:33:00 发布

kungfu_panda

最新推荐文章于 2024-08-13 10:33:00 发布

阅读量3.6k

点赞数

分类专栏：前端开发

前端开发专栏收录该内容

118 篇文章 1 订阅

订阅专栏

1、JavaScript提交表单代码

 <span style="font-size:14px;">   <span style="font-size:18px;">
      <span style="color:#FF0000;"> document.forms["myform"].submit(); </span> 
       or   
       document.myform.submit();//myform为表单名
    </span>  </span>

2、当表单中包含input的text、password等时按下回车键(Enter)会自动提交表单，有时需要这种功能，有时不需要这一功能。禁用回车自动提交攻略之一：

1）用button按钮替换submit按钮；

2）给button按钮添加onclick事件，同时在onclick事件中提交表单；

<script language="javascript">
	function defineSubmit(btn)
	{
		document.testForm.submit();
	}
</script>

<form name="testForm" method="post" action=" ">
	username:<input type="text" name="username"/>
	password:<input type="password" name="password"/>
	<input type="button" name="submitName" οnclick="defineSubmit(this)" value="submit1"/>
</form>

改进：

假如一个表单中需要有多个按钮，不同的按钮提交给不同的处理程序，可进行如下改进：

<script language="javascript">
	function defineSubmit(btn)
	{
		if("submit1" == btn.value)
		{
			<span style="color:#FF0000;"><span style="background-color: rgb(255, 255, 255);">document.testForm.action</span></span>="firstAction";
		}
		else
		{
			<span style="color:#FF0000;">document.testForm.action</span>="secondAction";
		}
		
		document.testForm.submit();
	}
</script>
<form <span style="color:#FF0000;">name="testForm"</span> method="post">
		username:<input type="text" name="username"/>
		password:<input type="password" name="password"/>
		<input type="button" name="submitName" οnclick="defineSubmit(this)" value="submit1"/>
		<input type="button" name="submitName" οnclick="defineSubmit(this)" value="submit2"/>
</form>

原文出处：http://blog.csdn.net/shutear/article/details/7914243