利用js提交form表单的方式

第一种方式：表单提交，在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>

利用js提交form表单的方式相关推荐

js 提交form表单,js更改form表单的action属性
2019独角兽企业重金招聘Python工程师标准>>> js 提交form表单 <s:form id="formID1" action="favo ...
用ajax提交表单给数据库,如何利用ajax提交form表单到数据库
如何利用ajax提交form表单到数据库发布时间:2021-06-17 14:52:49 来源:亿速云阅读:75 作者:小新这篇文章主要介绍如何利用ajax提交form表单到数据库,文中介绍的非 ...
html得到上传文件类型后缀,js获取上传文件后缀名（附js提交form表单）
js获取上传文件后缀名(附js提交form表单) 代码如下: function check_file() { var strFileName=form1.FileName.value; if (str ...
js提交form表单
[背景] 前段时间将边用边学javascript.pdf书看完了,其中之前最不熟悉的也是这次印象最深刻的就是提交form表单,所以在这里总结一下js提交form表单,以及表单中对应的一些扩展知 ...
利用ajax提交form表单数据
利用thymeleaf引擎创建的html中,使用了adminLTE模板,ajax提交form表单数据,本以为很容易实现,却遇到了很多问题,这里进行总结. 1.get方式提交通过serialize() ...
使用js提交form表单的两种方法
提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...
html表单调用js方法,使用js提交form表单的两种方法
提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...
js提交form表单，并传递参数
js如何提交form表单,并传递参数呢? 参考:https://www.itdaan.com/blog/2013/04/18/d26f13da9de5e2bbd607464da6ad1f8e.html
Js 提交 form 表单
本文主要讲如何使用Js提交表单,在使用ajax进行异步验证的多数情况下,需要使用Js提交表单,以下简单说几种提交表单的方式: 1.document.getElementById("formI ...

利用js提交form表单的方式

利用js提交form表单的方式相关推荐

最新文章

热门文章