利用JS提交表单的几种方法和验证

最新推荐文章于 2024-01-02 09:52:18 发布

lovedboy2012

最新推荐文章于 2024-01-02 09:52:18 发布

阅读量1.2k

点赞数 3

分类专栏： jsp学习笔记

jsp学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

工作中发现表单提交方便的问题，很多时候IE下提交好好的，打了火狐下就出现了问题，利用提交按钮就不成功了，于是利用JS的方式就成功了，也不知道为什么。在导师的催促下就总结出以下的几种常用表单提交的方法。

第一种方式：表单提交，在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="http://www.baidu.com" οnsubmit="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="http://www.baidu.com" id="myForm">
   
       <input type="text"/>
       <input type="button" value="submitBtn" οnclick="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="http://www.baidu.com">
   
       <input type="text"/>
       <input type="submit" value="submit" οnsubmit="return validate()"/>
   
    </form>
  </body>

第四种方式：为submit按钮添加上onclick事件，其中该事件用于表单提交的验证，功能类似于在form标签中增加了onsubmit事件一样

  <script type="text/javascript">
     function validate() {
        if (confirm("提交表单?")) {
           return true;
        } else {
           return false;
        }
     }
  </script>
  <body>
   <form action="http://www.baidu.com">
   
       <input type="text"/>
       <input type="submit" value="submit" οnclick="return validate()"/>
   
    </form>
  </body>

第五种方式：

  <body>
    <form action="http://www.baidu.com" id="myForm">
    <input type="text"/>
    <input type="button" value="submitBtn" id="myBtn"/>
    </form>
  </body>
 
    <script type="text/javascript">
     function validate() {
           if (confirm("提交表单?")) {
                return true;
           } else {
                return false;
           }
     }

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

 function submitForm() {
           if (validate()) {
                document.getElementByIdx_x("myForm").submit();
           }
     }    
     document.getElementByIdx_x("myBtn").onclick = submitForm;
  </script>

lovedboy2012

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
利用JS提交表单的几种方法和验证

工作中发现表单提交方便的问题，很多时候IE下提交好好的，打了火狐下就出现了问题，利用提交按钮就不成功了，于是利用JS的方式就成功了，也不知道为什么。在导师的催促下就总结出以下的几种常用表单提交的方法。第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功 function validate(obj) { if (c
复制链接

扫一扫