form表單的提交方式

時間 2019-11-30

標籤 form 表單提交方式欄目 HTML 简体版

原文原文鏈接

開發中表單提交是很常見的，表單的提交方式也多種方式。html

1.使用submit按鈕提交表單 <input type="submit"/>jquery

<!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部分代碼】ide

若是不喜歡用$(selector).submit(function) 提交方法，也能夠使用 onsubmit="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>

View Code

註釋：post

onsubmit直接寫false表單仍是會被提交。spa

表單的onsubmit事件句柄（好比：onsubmit="return false"）不會執行。不能保證由其必定會被HTML用戶代理調用。.net

若是一個表單空間（好比一個submit類型的按鈕）的name 或者id值爲"submit"，則它將覆蓋表單的submit方法。3d

2.使用button按鈕提交表單 <input type="button"/>代理

（1）能夠直接將上述方法1中的<input type="submit" value="提交">直接換成<input type="button" value="提交"> code

（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進行表單提交，將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 type="image" src=""> 圖片提交表單，將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>