JavaScript 提交表单的方式 （Using JavaScript Submit Form）

最新推荐文章于 2025-05-16 10:30:00 发布
最新推荐文章于 2025-05-16 10:30:00 发布
阅读量3.4w 收藏 12
点赞数
CC 4.0 BY-SA版权
文章标签： javascript input search import list user
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tohmin/article/details/2752556
本文介绍了一种利用JavaScript改进表单提交方式的方法，通过将不变参数封装到表单中并结合JavaScript进行动态提交，简化了页面操作流程。

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

 JavaScript 提交表单的方式 （Using JavaScript Submit Form）

 

最近做项目遇到用Javascript提交表单的问题， 之前也做过几次， 但是不够全面， 这次总结出了几种用JavaScript提交表单的方式， 并且对此作出了比较， 选出了一种最适合此项目的方式。

 

我目前正在为Sun Communication Suite做一个创建用户的小型系统，大家都知道我们可以通过表单，Ajax 和链接来访问服务器， 最简单的方法就是使用连接， 例如：<a href=UserServlet?event=SEARCH_MAILING_LIST&currentPage=1&keyword="+keyword+"&searchBy="+searchBy+"&cn="+request.getAttribute("cn")+">First Page</a>， 把所有需要的数据全部写到超链接上， 如果你能够观察一下就会知道，在上边的链接中只有currentPage是变化的， 其他参数event, keyword, searbyBy和cn是不变的， 那么我就想到如果我能够把这些不变的参数封装到一个表单中， 当用户点击上面的超链接的时候我用JavaScript把这个表单提交， 那么我自然会访问到服务器。

表单：

在提交表单的过程中， 我只需要把参数currentPage传给JavaScript就好了，所以我就把上面的连接改为下边的形式：

<a href=# onclick=document.pagination.currentPage.value="+pages[j]+";document.pagination.submit();><span style='color: red;'>["+pages[j]+"]</span></a>

大家要注意一定要把document.pagination.currentPage.value="+pages[j]+";写在document.pagination.submit();的前边， 这样在用户提交表单之前， 参数currentPage就已经被修改为我们需要的数值。 这样我就完成了用连接来提交表单， 但是我有遇到了一个问题， 我需要试用上面的这段代码在很多页面， 如果我能统一的写一段JavaScript的话，就会方面我以后对整个系统做维护， 所以我几写了一个JavaScript的函数。

然后我在超连接的onclick事件上条用这个函数：

<a href=# onclick=submitForm('pagination',"+pages[j]+")>["+pages[j]+"]</a>， 大家可以看到整段代码简洁了不少。

所以我总结了一下，用Javascript提交表单大概有两种写法（根据我目前的理解）

1. document.formName.submit();

2.  var form = document.getElementById(id);
    form.submit();
下次我想和大家分享一下用JNDI实现分页。我把这次的代码附在下边， 大家可以参考一下。

commons.js

 

mailingListMemberAdd.jsp

      

 

tohmin
关注
JavaScript 表单提交
weixin_44589643的博客
05-01 481
action: URL当它提交表单时，会将数据提交到某个地方。 (1)method :用来发送form-date的HTTP的方法，提交表单的方式。method 它有四种提交表单的方式为method/delete,get,post,put等。 (2)form表单的属性有两种：action,method这两个属性。 2.URL可能的值： (1)绝对URL它指向其它的的站点，比如scr”www.baid...
javascript实现自动提交form表单
06-18
内含联系方式，不懂用可以问我！多次修改后已无瑕疵，用它实现当页面刷新的时候自动提交表单数据，目前我把它运用在领取某论坛每日登录礼包这种繁琐的小事中，你还可以运用到更有价值的地方去。
JavaScript表单提交
weixin_44540247的博客
04-28 1万+
表单提交在前端编程阶段中也是一个重点。它是由页面数据保存到后台数据库的重要枢纽，通过表单提交的方式将数据上传到数据库进行保存。同时这些数据也包含用户信息、统计信息、日志信息等等。 数据的信息不同，上传的方式也不同。在JavaScript中有四种种表单提交的方式： 一、 Form表单手动提交（get与post） 在没有任何Js代码的影响下，Form表单本身是自带提交功能的。在form元素标签上有两个...
JavaScript：表单提交、必填验证与文件上传
最新发布
毒果的博客
05-16 706
在网页开发领域，表单是实现用户与网站交互的重要桥梁，从用户注册登录到信息反馈，从数据录入到文件上传，表单功能无处不在。同时，在表单提交过程中，未对敏感信息进行加密处理，存在数据泄露风险，严重影响系统的安全性和稳定性。同时，在不同浏览器和设备上，文件上传组件的表现不一致，如部分移动浏览器无法正常触发文件选择事件，或者无法获取文件的完整信息。此外，对于一些通用的表单验证组件，可以进行封装，提高代码的复用性。但在验证提示方式上，仅通过简单的弹窗提示，用户体验不佳，且在不同浏览器中，弹窗的显示样式和行为存在差异。
javascript表单提交
热门推荐
Forekaztor's Folder
04-10 1万+
javascript表单提交 1、按钮为button，可在js中调用formName.submit()显性提交。若是submit按钮，则不能再这样加提交语句，否则会提交两次。2、一个input域中回车，会默认第一个submit属性的按钮提交。若都是butoon属性，则回车不会提交表单。3、有时提交表单后不能刷新页面，即没有action=""的情况，（此时在handle()中进行处理
Javascript——表单提交
遇见未来的自己
06-30 1194
总结下这么几种的方法:    1,通过type=submit 或者图片的submti来提交(图片的这种方法很不错)    2,通过在imput里面加onclick来写个方法来做提交前的验证.type可以是button.,反正多个浏览器      做的时候,试验一下.    3,还有可以通过在form里面加onsubmit来验证.    4,通过在javascript的方法里头,用submit(
简述JavaScript提交表单的方式 （Using JavaScript Submit Form）
10-22
主要介绍了简述JavaScript提交表单的方式 （Using JavaScript Submit Form）的相关资料,需要的朋友可以参考下
popup-form-using-css-and-javascript：使用css和javascript的弹出表单
02-14
- **表单处理**：`form`元素的相关事件，如`submit`、`input`，可以帮助我们处理用户输入和表单提交。 - **表单验证**：使用JavaScript可以对用户输入进行实时验证，避免无效或不完整的数据提交。 3. **创建弹出...
Simple Contact Form Using HTML JavaScript.zip
11-08
虽然“Simple Contact Form Using HTML JavaScript”主要关注前端，但实际的表单提交通常需要后端处理。例如，使用PHP、Node.js或其他服务器端语言接收和存储表单数据。 7. **响应式设计** 对于移动设备友好的...
Basic-Form-validator-using-Vanilla-Javascript
05-07
**标题解析：** "Basic-Form-validator-using-Vanilla-Javascript" 指的是一个使用纯JavaScript（也称为Vanilla JavaScript）实现的基础表单验证器项目。Vanilla JavaScript指的是不依赖任何JavaScript库或框架（如...
jquery form表单提交插件asp.net后台中文解码
12-08
在ASP.NET开发中，表单提交是常见的用户交互方式，jQuery的form表单提交插件则为前端提供了方便、灵活的处理手段。该插件允许开发者在不刷新整个页面的情况下，实现异步提交表单数据到服务器，提高用户体验。本文将...
js 提交表单的方式 （Using JavaScript Submit Form）
Code-lover's Learning Notes
01-23 1984
最近做项目遇到用Javascript提交表单的问题， 之前也做过几次， 但是不够全面， 这次总结出了几种用JavaScript提交表单的方式， 并且对此作出了比较， 选出了一种最适合此项目的方式。   我目前正在为Sun Communication Suite做一个创建用户的小型系统，大家都知道我们可以通过表单，Ajax 和链接来访问服务器， 最简单的方法就是使用连接， 例如：
JavaScript表单提交总结
腻害
04-29 413
（作者：邱锡纶 撰写时间：2020年4月29日星期三） HTML 表单验证可以通过 JavaScript 来完成。 提交表单可以通过元素的submit()方法提交一个表单， 例如，响应一个的click事件，在JavaScript代码中提交表单： 这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击时提交表单，或者用户在最后一个输入框按回车键。 以下实例代码用于判断表单字段(fna...
js submit提交表单问题
求生记
12-10 192
代码如下： [quote][/quote] 或者 [quote][/quote] 当提交按钮的name 或者 id为submit时候，用js 提交表单，表单名.submit()时候会报一个错误，提示对象不支持此属性或办法。 解决方法是修改提交按钮的 name 或者 id 不要与 submit同名即可。 那么，请问为什么 当提交按钮的 name 或者 id为submit或者 ...
Javascript 提交表单
03-27 359
  document.form1.method="get";        document.form1.action="Register_Success.aspx";        document.form1.submit(); 
write the code for login form using javascript
12-04
创建一个简单的登录表单（login form）使用JavaScript，我们将编写HTML结构和相关的客户端验证脚本。以下是一个基本示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Form</title> <style> .error { color: red; } </style> </head> <body> <form id="loginForm"> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <span id="usernameError" class="error"></span><br> <label for="password">Password:</label><br> <input type="password" id="password" name="password"><br> <span id="passwordError" class="error"></span><br> <button type="submit">Login</button> </form> <script> document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交 const username = document.getElementById('username'); const password = document.getElementById('password'); if (username.value === '' || password.value === '') { // 如果用户名或密码为空 if (username.value === '') { usernameError.textContent = 'Please enter your username'; } else { passwordError.textContent = 'Please enter your password'; } } else { // 这里只是一个基本示例，实际应用中你需要将密码加密并检查是否正确 // 此处可以添加数据库交互逻辑，验证用户名和密码 alert('Login successful!'); // 清除错误消息 usernameError.textContent = ''; passwordError.textContent = ''; } }); </script> </body> </html> ``` 这个代码创建了一个包含用户名和密码输入框的登录表单。当用户尝试提交时，JavaScript会阻止默认行为，并在输入不完整时显示错误提示。如果所有字段都已填写，它会显示一条成功的消息（这里仅作示例，实际上应连接到服务器验证）。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值