利用js提交form表单的方式

最新推荐文章于 2024-05-06 11:40:47 发布
最新推荐文章于 2024-05-06 11:40:47 发布
阅读量4w 收藏 23
点赞数 4


第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功

<script type= "text/javascript" >
    function validate(obj) {
     if (confirm( "提交表单?" )) {
       alert(obj.value);
       return true ;
     } else {
       alert(obj.value);
       return false ;
     }
    }
  </script>
  <body>
   <form action= "//www.jb51.net" onsubmit= "return validate(document.getElementByIdx_x('myText'));" >    
     <input type= "text" id= "myText" />
     <input type= "submit" value= "submit" />    
   </form>
</body>

第二种方式：通过button按钮来触发表单提交事件οnclick="submitForm();"，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证。

<script type= "text/javascript" >
    function validate() {
     if (confirm( "提交表单?" )) {
       return true ;
     } else {
       return false ;
     }
    }     
    function submitForm() {
     if (validate()) {
       document.getElementByIdx_x( "myForm" ).submit();
     }
    }
  </script>
  <body>
   <form action= "//www.jb51.net" id= "myForm" >    
     <input type= "text" />
     <input type= "button" value= "submitBtn" onclick= "submitForm();" />
 <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->    
   </form>
</body>

第三种方式：将onsubmit事件放在submit标签中，而不是form标签中，此时表单验证失效，点击提交按钮表单直接提交

<script type= "text/javascript" >
    function validate() {
     if (confirm( "提交表单?" )) {
       return true ;
     } else {
       return false ;
     }
    }
  </script>
  <body>
   <form action= "//www.jb51.net" >    
     <input type= "text" />
     <input type= "submit" value= "submit" onsubmit= "return validate()" />    
   </form>
</body>

第四种方式：为submit按钮添加上onclick事件，其中该事件用于表单提交的验证，功能类似于在form标签中增加了onsubmit事件一样nclick="submitForm();"，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证

<script type= "text/javascript" >
    function validate() {
     if (confirm( "提交表单?" )) {
       return true ;
     } else {
       return false ;
     }
    }
  </script>
  <body>
   <form action= "//www.jb51.net" >    
     <input type= "text" />
     <input type= "submit" value= "submit" onclick= "return validate()" />    
   </form>
</body>

==================================================================

小结：

提交表单最简单的凡是是在html语句中直接提交，但是在需要验证，修改提交内容的情况下，提交表单就只能通过js对数据处理后进行提交。

我们可以通过onsubmit事件，onclick事件将表单内容发送到js进行处理。

最正规的方式是：在js中通过a标签和class标签,id标签对form内容进行处理后提交

<form action="/anon/newPerfectInfo"  id="investorsOpen_form" method="post">
<a href="javascript:;" class="fn-g-btn"><button type="submit">注册</button></a>

若兰轻忆
关注
  • 4
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript在form表单中使用button按钮实现submit提交方法
01-19
submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了，submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上。 在javaScript中关于submit和button的区别介绍  在form表单提交中，使用button来间接完成submit的提交更为灵活。下面是实现方法： 使用button按钮实现submit提交，需要在button标签中的使用onclick方法，然后在JavaScript中实现具体，代码如下： <head> [removed] functio
js 通用表单提交2-submit的控制和ajax提交
leiting084的专栏
03-02 1432
通过上次的尝试我们发现表单中可以通过onsubmit来一定程度的控制form的submit动作。但是很快我们就发现这种情况下无法控制submit的后续动作，也就是页面跳转。那么怎么解决这个问题呢，我们进一步可以观察发现大多数时候我们是通过一个type=submit的按钮来实现表单提交的。也就是在form的onsubmit之前，我们实际上会有一个点击按钮的操作，那么我们就可以通过阻止按钮的默认动作来阻止form的submit。 然后由此引申我们可以创造一个另外的按钮用来提交form，举个小例子：
JavaScript表单：事件和方法提交
爱蹦跶的全栈大A阿
02-07 988
​表单提交是 web 开发中常见的功能，用于将用户输入的数据发送到服务器。本文介绍了表单提交的流程、两种方式、使用form元素和 JavaScript 提交表单、阻止表单提交以及获取表单数据等主题，并提供了一些代码示例。希望本文对你有所帮助！阅读 HTML 和 JavaScript 文档，以了解更多关于表单提交的信息。练习使用不同的方式提交表单。在实际项目中使用表单提交功能。祝你学习愉快！​。
js浏览器请求，post请求中的参数形式和form-data提交数据时数据格式问题（2024-05-06）
最新发布
hap1994的博客
05-06 1789
application/x-www-form-urlencoded方式也是post请求最早支持的一种数据传输方式，这种也是key和value形式，将我们的参数类似于GET方式那样拼接成一个字符串，例如：key1=value1&key2=value2，这种形式，然后将这个参数字符串进行urlencode编码，放到Body里进行发送请求数据。text/html的意思是将文件的content-type设置为text/html的形式，浏览器在获取到这种文件时会自动调用html的解析器对文件进行相应的处理。
js提交form表单方法
winkexin的博客
06-14 3185
form表格的写法，需要写id。
写在js文件里的变量如何通过FORM表单提交到action
qq_32265203的博客
04-03 1389
使用form表单提交数据，需要将数据写到表单元素内（如文本框、隐藏域等）。因此，将js文件里的变量通过FORM表单提交到action的思路如下： 1、在form表单中准备隐藏域用以存放需要提交的数据 <form action="目标url"> <!-- 其他表单元素 --> <input type="hidden" id="test" name...
使用js提交form表单的两种方法
weixin_33862993的博客
08-23 721
提交form表单的时候瑶族一些简单的验证，验证完后才能提交，避免无效提交。 1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在前端页面写；有两种方法，一种是用submit提交。一种是用button提交。方法一： 在jsp的前端页面的头部插入一个js方法： function checkUser(){ var result = document.getE...
js实现form的submit请求
日常笔记/总结/系列知识梳理
05-23 5085
代码 /** * 登录 * created by lius on 2020-05-23 * */ loginCA(){ // 创建表单 var dlform = document.createElement('form'); dlform.style = "display:none;"; dlform.method = 'get'; dlform.action = this.$api.paths.ssopath + '/v1/weblogin/check/user/redirect';
利用JS如何获取form表单数据
10-15
本文将详细介绍如何利用JS获取`<form>`表单数据，包括各种类型的表单元素，如输入框、下拉框、单选按钮、复选框等。 首先，表单元素通常需要设置`name`属性，因为`name`属性是后端接收数据时识别字段的关键。例如：...
JavaScript阻止表单提交方法（附代码）
10-19
JavaScript阻止表单提交是网页开发中常见的需求，主要用于在用户提交数据前进行验证或处理，以确保数据的有效性和安全性。本文将详细介绍两种阻止表单提交的方法，并解释`onSubmit`和`check()`的区别。 ### 第一种...
利用ajax提交form表单到数据库详解(无刷新)
12-12
传统的HTML表单提交方式是通过`<form>`元素的`action`属性指定处理表单数据的服务器端脚本，如PHP，然后通过`method`属性指定请求类型（GET或POST）。然而，这种方式会导致页面的刷新和跳转，破坏了用户的浏览流程。...
form表单的六种提交方式
日落东山的基地
08-09 2807
1、无刷新页面提交表单 表单可实现无刷新页面提交，无需页面跳转，如下，通过一个隐藏的iframe实现，form表单的target设置为iframe的name名称， form提交目标位当前页面iframe则不会刷新页面 2、通过type=submit提交 一般表单提交通过type=submit实现，input type="submit",浏览器显示为butt
form表单提交方式
我的博客
03-29 520
表单可实现无刷新页面提交，无需页面跳转，如下，通过一个隐藏的iframe实现，form表单的target设置为iframe的name名称，form提交目标位当前页面iframe则不会刷新页面
JavaScript笔记-点击button提交form表单
IT1995的博客
03-10 5516
功能如下： 点击购买后，点击确定。 确定调用了一个js函数，提交form表达给后端 代码如下： <div class="modal-footer"> <button type="button" class="btn text-white border bg-dark" data-bs-dismiss="modal">取消</button> <button type="button" class="btn text-white border bg
js提交form表单
热门推荐
一直在奋起，一直在路上
08-27 4万+
前段时间将边用边学javascript.pdf书看完了,其中之前最不熟悉的也是这次印象最深刻的就是提交form表单,所以在这里总结一下js提交form表单,以及表单中对应的一些扩展知识O(∩_∩)O~
js中实现form表单动态提交
灰海
03-10 1442
js中实现form表单动态提交。
js控制form提交
weixin_33770878的博客
08-02 835
form表单提交，之前有个下载的项目接口，需要上url上边传超级多东西，但是 url是限制长度的 每个浏览器限制的url长度还不一样，所以就想到用form表单的action提交表单。 form标签 定义和用法 详细了解请点击 标签用于为用户输入创建 HTML 表单。 表单能够包含input 元素，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含menus、textarea、f...
Js 提交 form 表单
weixin_34138255的博客
11-18 317
　　本文主要讲如何使用Js提交表单，在使用ajax进行异步验证的多数情况下，需要使用Js提交表单，以下简单说几种提交表单的方式： 　　1、document.getElementById("formId").submit();　　　　　　　 需要form表单id. 　　2、document.getElementsByName("formName")[0].submit();　 需要for...
js form 表单自动提交
09-02
JS 中的表单自动提交通常是利用表单元素的 `submit()` 方法来实现的。下面我来详细说明一下： 首先，在 HTML 中，我们需要创建一个表单，并为其指定一个 ID，以方便在 JavaScript 中访问和操作。例如： ```html <form id="myForm" action="submit.php" method="POST"> <input type="text" name="username"> <input type="password" name="password"> <input type="submit" value="提交"> </form> ``` 然后，在 JavaScript 中，我们可以使用 `document.getElementById()` 方法来获取表单元素，并调用 `submit()` 方法来实现表单自动提交。例如： ```javascript window.onload = function() { var form = document.getElementById("myForm"); form.submit(); // 自动提交表单 }; ``` 当页面加载完成后，上述 JavaScript 代码会自动获取表单元素，并调用 `submit()` 方法来提交表单，从而实现自动提交的效果。 需要注意的是，由于表单的提交通常会触发页面刷新或跳转，为了避免页面刷新，在提交表单之前，可以使用 `preventDefault()` 方法来阻止默认的表单提交行为。例如： ```javascript window.onload = function() { var form = document.getElementById("myForm"); form.addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单默认提交行为 form.submit(); // 自动提交表单 }); }; ``` 以上就是利用 JavaScript 实现表单自动提交的方法。当页面加载完成后，表单会自动提交而不需要用户手动点击提交按钮。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值