js提交表单(js提交表单触发事件)

更新时间:2023-03-01 06:08:51 阅读: 评论:0

Js表单提交

表单提交是刚开始学js的朋友很迷惑的一个问题,怎么提交,怎么阻止默认提交,怎么提交表单不跳转等等问题,下面是一些示例

原始的表单提交有 button 按钮提交和 <input /> 类型的。它们又什么区别呢?

(1) 默认表单提交

(2)默认不会提交表单

(3) 如果在 form ,我们使用了 type=''submit 属性,但是不让表单默认提交,有什么办法呢?看下面

(4) 如果在 form ,我们使用了 type=''button 属性,但是还是需要提交表单,这是可以使用ajax来提交,好处是可以自己控制提交,并且页面不会跳转

(5)若是使用默认提交的方法,且提交之前验证表单,方法看下面

(6) 若是使用了 type='button' 属性,但是还是想实现默认提交的方式怎么办? 看下面

(7) 下面的提交会发生什么?

分析 : 点击提交按钮:
(1)当表单验证失败时,不会触发 form.submit() 函数,所以可以触发 <form> 的 onsubmit 句柄,又因为该句柄 return fal 所以表单不会从该句柄处默认提交,所以 会在控制台打印出 表单的onsubmit事件句柄在form.submit()调用时失效'
(2)当表单验证成功时,会触发 form.submit() 函数提交表单,又因为 form.submit()提交表单的方式与用户单击 Submit 按钮一样,但是表单的 onsubmit 事件句柄不会被调用,所以 控制台不会打印出 表单的onsubmit事件句柄在form.submit()调用时失效

现在表单默认提交的方式基本没人用了,都是ajax异步提交。但是了解一些还是好的。。。


js 提交表单数据: 附件+对象的的多集合

在我们前端进行表单提交的时候,有时候会出现这种情况:Failed to convert   java.lang.String    to java.util.List

等等。

例如:

  我后台定义一个对象:

       examPaper 包含  String urId,Float urScore, MultipartFile  examFile  用户id  ,试卷分数,试卷文件

对象外面   classPaper有: String classId  String className  List<examPaper>  examPaperList

这个时候,后台接收为  ClassPaper

如果按照平常的 form-data   提交  则应按以下方式提交:

let  fd  = new FormData();

fd.append("classId ",classId );

fd.append("className ",className );

examPaperList.forEach((item,index) ->{

     fd.append("examPaperList["+index+"].urId",item.urId);

     fd.append("examPaperList["+index+"].urScore",item.urScore);

     fd.append("examPaperList["+index+"].examFile ",item.examFile );

});

以这种方式就可以实现 多附件  一一 对应提交。以避免对象转换错误问题。

js表单提交和submit提交的区别是什么?

js提交和submit按钮提交的区别:x0dx0a x0dx0a1. js提交表单时不会带上 submit 按钮的值(因为没有被单击) 所有浏览器x0dx0a2. input 回车提交 w3c浏览器会带上submit按钮的值,ie6则不会带x0dx0a解决办法:x0dx0a增加一个hidden域,用这个来判断,无论用哪种方式提交都会有值x0dx0asubmit按钮上绑定提交事件:x0dx0a即:x0dx0a都会带上submit的值, 用js提交都检测不到onsubmit状态x0dx0aw3c: 提交一次x0dx0aie6: 分两次提交,先js在form提交x0dx0a解决办法:x0dx0a如果按钮为submit则 检测时用onsubmit事件检测x0dx0a如果按钮为button,则检测通过后在触发submit事件x0dx0a一定不要用js提交表单,然后又用onsubmit去检测x0dx0a单纯的用js提交表单, alert, ff下阻塞表单的提交,而其他浏览

2020-01-03 原生js中form表单提交的数据的格式

第一次写这种文章。

1.    原生js中,form表单在提交数据的时候默认的编码格式是application/x-www-form-urlencoded

2.    如果表单中有文件需要上传,那么必须在form元素中添加除了action和method(如果是get请求,可以不添加method属性。默认情况下,form表单以get方式提交表单数据)之外的第3个属性enctype,并且设置enctype="multipart/form-data"。

参考页面: HTML

javascript中怎么提交表单

H5edu教育html5开发为您解答:
办法1.同一个页面中建立两个表单 各自提交:
<form action="?" name="form1" id="form1">
<!-- 表单内容 -->
<input type="submit" />
</form>
<form action="?" name="form1" id="form1">
<!-- 表单内容 -->
<input type="submit" />
</form>
办法2:如果非要只有一个表单的话,通过js提交:
<script type="text/javascript" language="javascript">
function submitYouFrom(path){
$('form1').action=path;
$('form1').submit();
}
</script>
<form action="?" name="form1" id="form1">
<!-- 表单内容 -->
<input type="button" value="提交1" onclick="submitYouFrom('地址一')"/>
<input type="button" value="提交2" onclick="submitYouFrom('地址二')"/>
</form>

js表单提交和submit提交的区别

js表单提交和submit提交的区别如下:

js提交表单时不会会带上按钮的参数传递到服务端。

而submit按钮提交的时候会把button上的name和value一起作为请求参数传递到服务端。

举例说明:

<form id="myfrom">

<input type="submit" onclick="doMySubmit()" name="MyList" value="SEND" class="button actionbutton" />

</form>

这里提交的时候会把参数名Mylist和参数值Send传到目标地址

<form id="myfrom">

<input type="button" onclick="doMySubmit()" name="MyList" value="SEND" class="button actionbutton" />

</form>

提交的脚本:

function doMySubmit() {
var myform = document.getElementById('archFilterForm');
myform.myfield.value = "Hello World";
myform.submit();
}

这种情况下不会把button的参数带给服务端。


本文发布于:2023-02-28 19:34:00,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/zhishi/a/167762213163278.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:js提交表单(js提交表单触发事件).doc

本文 PDF 下载地址:js提交表单(js提交表单触发事件).pdf

上一篇:感慨的话
下一篇:返回列表
标签:表单   事件   js
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 实用文体写作网旗下知识大全大全栏目是一个全百科类宝库! 优秀范文|法律文书|专利查询|