JavaScript 表单提交的三种方法

最新推荐文章于 2024-04-18 17:52:13 发布
最新推荐文章于 2024-04-18 17:52:13 发布
阅读量1.3w 收藏 49
点赞数 6
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houyanhua1/article/details/78568078
版权
表单提交的三种方法：
1、submit按钮，结合form标签的onsubmit事件。  <form name="form1" method="post" action="login.php" οnsubmit="return checkForm()" > </form> checkForm()需要return
2、submit按钮，结合onclick事件。  <input type="submit" value="提交表单" οnclick="return checkForm()" />  checkForm()需要return
3、button按钮，结合onclick事件。 <input type="button" value="提交表单" οnclick="return checkForm()" />  js中：checkForm(){document.form1.submit();} 不需要return


1、submit按钮，结合form标签的onsubmit事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：submit按钮，结合onsubmit事件，验证和提交表单
function checkForm()
{
	//判断用户名是否为空，需要return
	if(document.form1.username.value=="")
	{
		window.alert("用户名不能为空！");
		return false;
	}else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
	{
		window.alert("用户名长度必须介于5-20个字符之间！");
		return false;
	}
}
</script>
</head>
<body>

<form name="form1" method="get" action="login.php">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="submit" value="提交表单" οnsubmit="return checkForm()" />
</form>


</body>
</html>
2、submit按钮，结合onclick事件： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：submit按钮，结合onclick事件，验证和提交表单
function checkForm()
{
	//判断用户名是否为空，需要return
	if(document.form1.username.value=="")
	{
		window.alert("用户名不能为空！");
		return false;
	}else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
	{
		window.alert("用户名长度必须介于5-20个字符之间！");
		return false;
	}
}
</script>
</head>
<body>
<form name="form1" method="get" action="login.php">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="submit" value="提交表单" οnclick="return checkForm()" />
</form>

</body>
</html>
3、button按钮，结合onclick事件： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：button按钮，结合onclick事件，验证和提交表单
function checkForm()
{
	//判断用户名是否为空，不需要return
	if(document.form1.username.value=="")
	{
		window.alert("用户名不能为空！");
	}else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
	{
		window.alert("用户名长度必须介于5-20个字符之间！");
	}else
	{
		//使用form对象的submit()方法，实现提交，不用return
		document.form1.submit();
	}
}
</script>
</head>
<body>
<form name="form1" method="get" action="login.php">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="button" value="提交表单" οnclick="checkForm()" />
</form>

</body>
</html>




houyanhua1
关注
  • 6
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript处理表单示例(javascript提交表单)
10-26
主要介绍了javascript处理表单示例,处理 各种表单, 以及链接,按钮的通用组件,需要的朋友可以参考下
JavaScript动态创建form表单并提交的实现方法
10-23
主要介绍了JavaScript动态创建form表单并提交的实现方法,涉及JavaScript动态创建页面元素及模拟表单提交的技巧,需要的朋友可以参考下
JavaScript表单：事件和方法提交
爱蹦跶的全栈大A阿
02-07 756
​表单提交是 web 开发中常见的功能，用于将用户输入的数据发送到服务器。本文介绍了表单提交的流程、两种方式、使用form元素和 JavaScript 提交表单、阻止表单提交以及获取表单数据等主题，并提供了一些代码示例。希望本文对你有所帮助！阅读 HTML 和 JavaScript 文档，以了解更多关于表单提交的信息。练习使用不同的方式提交表单。在实际项目中使用表单提交功能。祝你学习愉快！​。
js提交form表单,并传递参数的实现方法
10-22
下面小编就为大家带来一篇js提交form表单,并传递参数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript获取网页表单提交方式的方法
10-24
主要介绍了JavaScript获取网页表单提交方式的方法,可判断表单提交方式是get还是post,具有一定参考借鉴价值,需要的朋友可以参考下
js提交form表单方法
winkexin的博客
06-14 3021
form表格的写法，需要写id。
JavaScript表单提交
weixin_44540247的博客
04-28 9648
表单提交在前端编程阶段中也是一个重点。它是由页面数据保存到后台数据库的重要枢纽，通过表单提交的方式将数据上传到数据库进行保存。同时这些数据也包含用户信息、统计信息、日志信息等等。 数据的信息不同，上传的方式也不同。在JavaScript中有四种种表单提交的方式： 一、 Form表单手动提交（get与post） 在没有任何Js代码的影响下，Form表单本身是自带提交功能的。在form元素标签上有两个...
【web开发】js实现表单提交
平凡的世界
08-19 6872
1.方法一 通常表单的提交有两种方式，一是直接通过html的form提交，代码如下： <form action="" method="" id="forms"> <input type="text" name="username" value="" /> <input type="password" name="pwd" value="" /> <input type="submit" value="提交"/> </form&gt
JavaScript阻止表单提交方法（附代码）
10-19
主要介绍了JavaScript阻止表单提交方法,通过代码示例讲解了阻止表单提交需要注意的事项，以及onSubmit和check（）的区别写法,需要的朋友可以参考下
用js提交表单解决一个页面有多个提交按钮的问题
12-29
用js提交表单解决一个页面有多个提交按钮的问题,主要是判断是否为提交文本，然后再执行相应的动作，比较简单。 <pre class=javascript name=code>function check(txt){ $j(form).submit(function(){ if($txt==提交){ this.action=doAddMessage.action?button=提交; this.submit(); }else{ this.action=doAddMessage.action?button=保存; this.submit(); } }); }</pre><b
利用JavaScript阻止表单提交的两种方法
01-21
在JavaScript中，阻止表单默认提交行为的方法有两种，分别是： （1） return false 示例代码 <form name=loginForm action=login.aspx method=post> <button type=submit value=Submit id=submit>...
javascript实现回车键提交表单方法总结
10-24
主要介绍了javascript实现回车键提交表单方法,实例总结了纯javascript与jQuery的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Javascript 同时提交多个Web表单的方法
10-30
1 问题来自一位网友的提问： web页面里有多个表单，每个表单对应着某一类数据操作。
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 602
​​​​​​​。
使用 Fetch API 执行 GraphQL 查询和变体
ikxin的博客
04-15 1099
GraphQL 是从远程服务器查询数据的强大工具，也是我构建 API 的首选方式。对一些人来说，学习它可能有一定难度，因为教程通常使用 Apollo 或 Relay 等工具进行编写。这些工具很不错，但通常更适用于复杂项目。在某些情况下，最好选择更轻量级的方法，并且不要通过添加额外的库增加包大小。在这种情况下，你可以直接使用浏览器中提供的工具，在本快速教程中，我们将使用在你的浏览器中通常可用的fetch。让我们首先简单地回顾一下fetch。
PLSQL的下载与安装
最新发布
code袁的博客
04-18 293
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
Vue.js（自定义指令）
Luo3255069063的博客
04-18 144
【代码】Vue.js（自定义指令）
js的filter函数
xiaohua0708day的博客
04-14 284
这个函数接收数组中的每个元素作为参数，并检查该元素是否是偶数。如果是偶数，函数返回。是一个数组方法，它创建一个新数组，其包含通过提供的函数实现的测试的所有元素。函数遍历数组中的每个元素，并只将那些使测试函数返回。在这个箭头函数版本中，我们直接返回了表达式。在上面的代码中，我们传递了一个匿名函数给。方法就会将该元素包含在新数组中。，则该元素会被包含在新数组中。在JavaScript中，的元素包含在新数组中。
javascript实现表单提交
05-04
你可以使用 HTML 表单和 JavaScript 来实现表单提交。下面是一个简单的例子，假设你有一个包含用户名和密码输入框的表单： ```html <form id="my-form"> <label>用户名:</label> <input type="text" name="username"><br> <label>密码:</label> <input type="password" name="password"><br> <input type="submit" value="提交"> </form> ``` 然后使用 JavaScript 代码来拦截表单提交事件，并通过 AJAX 发送表单数据到服务器端： ```javascript document.getElementById("my-form").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单默认提交行为 var xhr = new XMLHttpRequest(); xhr.open("POST", "/submit-form"); // 替换成服务器端接口地址 xhr.setRequestHeader("Content-Type", "application/json"); // 设置请求头 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); // 在控制台输出响应结果 } }; xhr.send(JSON.stringify({ username: document.getElementsByName("username")[0].value, password: document.getElementsByName("password")[0].value })); // 将表单数据转换为 JSON 字符串并发送到服务器端 }); ``` 上面的代码中，我们使用了 `preventDefault()` 方法来阻止表单的默认提交行为，然后创建了一个 XMLHttpRequest 对象，设置请求头和回调函数，并使用 `send()` 方法将表单数据发送到服务器端。在服务器端，你需要解析请求体中的 JSON 数据并进行相应的处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值