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

最新推荐文章于 2025-06-18 10:00:00 发布

kungfu_panda

最新推荐文章于 2025-06-18 10:00:00 发布

阅读量3.7k

点赞数

分类专栏：前端开发

前端开发专栏收录该内容

118 篇文章

订阅专栏

本文介绍了JavaScript中如何通过代码实现表单的自动提交功能及其禁用方法，包括使用按钮替代默认的提交按钮和通过事件监听器自定义提交行为。通过实例演示了如何根据不同按钮触发不同表单动作，适用于需要灵活控制表单提交场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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" onclick="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" onclick="defineSubmit(this)" value="submit1"/>
		<input type="button" name="submitName" onclick="defineSubmit(this)" value="submit2"/>
</form>

原文出处：http://blog.youkuaiyun.com/shutear/article/details/7914243