form表单的提交方式有三

最新推荐文章于 2024-05-05 05:31:57 发布

置顶 yihuaiyan

最新推荐文章于 2024-05-05 05:31:57 发布

阅读量987

点赞数

分类专栏：前端

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本篇博客转载自博客园三高娘子:https://www.cnblogs.com/phermis/p/6993509.html.
如有侵权,请及时通知本人,本人会尽快删帖!

三种form表单的提交方式

1.使用submit按钮提交表单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>form表单提交方式</title>
</head>
<body>
<form action="demo_form.asp" method="post">
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="提交">
</form>

<script>
    /*这里是提交表单前的非空校验*/
    $("form").submit(function () {
        var first = $("input[name='firstname']").val();
        var last = $("input[name='lastname']").val();

        if (first == "" || first == null || first == undefined) {
            alert("first");
            return false;/*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last");
            return false;/*阻止表单提交*/
        } else {
            alert("提交");
            return true;
        }
    })
</script>
</body>
</html>

当您点击提交按钮，表单数据会被发送到名为demo_form.asp的页面。submit按钮提交表单，表单直接被提交了！当然提交表单前可能需要进行验证，可以根据自己的需求做表单提交【校验请看Jquery部分代码】

如果不喜欢用$(selector).submit(function) 提交方法，也可以使用 οnsubmit="return function()"方法进行提交验证
代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>form表单提交方式</title>
</head>
<body>
<form id="Form" action="" method="post" onsubmit="return checkForm();">
    <!--直接提交-->
    <input id="first" type="text" name="dingdanhao"><input id="chaxun" type="submit" value="查询"><br>
    First name:<br>
    <input id="last" type="text" name="firstname"><br>
    Last name:<br>
    <input type="text" name="lastname"><br><br>
    <input id="tj" type="submit" value="提交">
</form>
<script src="jquery.js"></script>
<script>
    /*这里是提交表单前的非空校验*/
    function checkForm () {
        var first = $("input[name='firstname']").val();
        var last = $("input[name='lastname']").val();

        if (first == "" || first == null || first == undefined) {
            alert("first不能为空");
            return false;/*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last不能为空");
            return false;
        } else {
            alert("提交")
            return true;
        }
    }
</script>
</body>
</html>

注释：
onsubmit直接写false表单还是会被提交。
表单的onsubmit事件句柄（比如：οnsubmit=“return false”）不会执行。不能保证由其一定会被HTML用户代理调用。
如果一个表单空间（比如一个submit类型的按钮）的name 或者id值为"submit"，则它将覆盖表单的submit方法。

2.也可以使用 οnsubmit="return function()"方法进行提交验证

2.使用button按钮提交表单
（1）可以直接将上述方法1中的直接换成
（2）方法差不多没啥区别可以直接贴代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>form表单提交方式</title>
</head>
<body>
<form id="Form" action="" method="post" >
    <!--直接提交-->
    <input type="text" name="dingdanhao"><input id="chaxun" type="submit" value="查询"><br>
    First name:<br>
    <input type="text" name="firstname"><br>
    Last name:<br>
    <input type="text" name="lastname"><br><br>
    <input id="tj" type="button" value="提交" onclick="checkForm();">
</form>
<script src="jquery.js"></script>
<script>
    /*这里是提交表单前的非空校验*/
    function checkForm () {
        var first = $("input[name='firstname']").val();
        var last = $("input[name='lastname']").val();

        if (first == "" || first == null || first == undefined) {
            alert("first");
            return false;/*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last");
            return false;
        } else {
            alert("提交")
            $("#Form").submit();
        }

    }
</script>
</body>
</html>

3.利用js进行表单提交

利用js进行表单提交
将form表单进行标记，将form表单中的某个元素设置点击事件，点击时调用js函数，再用js：如 $("#id").submit();等方法提交表单。

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title>form表单提交方式</title>
</head>
<body>
<form id="Form" action="" method="post" onsubmit="return checkForm();">
   <!--直接提交-->
   <input id="first" type="text" name="dingdanhao"><input id="chaxun" type="submit" value="查询"><br>
   First name:<br>
   <input id="last" type="text" name="firstname"><br>
   Last name:<br>
   <input type="text" name="lastname"><br><br>
   <button type="button" onclick="subForm();">js提交</button>
</form>
<script src="jquery.js"></script>
<script>
   /*这里是提交表单前的非空校验*/
   function checkForm () {
       var first = $("input[name='firstname']").val();
       var last = $("input[name='lastname']").val();

       if (first == "" || first == null || first == undefined) {
           alert("first不能为空");
           return false;/*阻止表单提交*/
       } else if (last == "" || last == null || last == undefined) {
           alert("last不能为空");
           return false;
       } else {
           alert("提交")
           return true;
       }

   }
   function subForm(){
       $("#Form").submit();
   }
</script>
</body>
</html>

4. 图片提交表单，将input的属性设置为image时，点击图片也可触发form表单的提交。


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>form表单提交方式</title>
</head>
<body>
<form id="Form" action="" method="post" onsubmit="return checkForm();">
    <!--直接提交-->
    <input id="first" type="text" name="dingdanhao"><input id="chaxun" type="submit" value="查询"><br>
    First name:<br>
    <input id="last" type="text" name="firstname"><br>
    Last name:<br>
    <input type="text" name="lastname"><br><br>
    <input type="image" src="btn.png" style="width: 50px;height: 50px">
</form>
<script src="jquery.js"></script>
<script>
    /*这里是提交表单前的非空校验*/
    function checkForm() {
        var first = $("input[name='firstname']").val();
        var last = $("input[name='lastname']").val();

        if (first == "" || first == null || first == undefined) {
            alert("first不能为空");
            return false;
            /*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last不能为空");
            return false;
        } else {
            alert("提交")
            return true;
        }
    }

</script>
</body>
</html>

yihuaiyan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
form表单的提交方式有三

三种form表单的提交方式1.使用submit按钮提交表单 1.使用submit按钮提交表单 <input type=“submit” value="提交/><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>for...
复制链接

扫一扫

专栏目录