100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 利用js提交form表单的方式

利用js提交form表单的方式

时间:2021-02-27 14:15:12

相关推荐

利用js提交form表单的方式

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

<script type="text/javascript">functionvalidate(obj) {if(confirm("提交表单?")) {alert(obj.value);returntrue;}else{alert(obj.value);returnfalse;}}</script><body><form action="//"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">functionvalidate() {if(confirm("提交表单?")) {returntrue;}else{returnfalse;}}functionsubmitForm() {if(validate()) {document.getElementByIdx_x("myForm").submit();}}</script><body><form action="//"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">functionvalidate() {if(confirm("提交表单?")) {returntrue;}else{returnfalse;}}</script><body><form action="//"><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">functionvalidate() {if(confirm("提交表单?")) {returntrue;}else{returnfalse;}}</script><body><form action="//"><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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。