JavaScript でフォームを送信するにはどのような方法がありますか?-jsチュートリアル-php.cn

JavaScript でフォームを送信するにはどのような方法がありますか?

清浅

リリース： 2019-02-28 16:10:58

オリジナル

8788 人が閲覧しました

JavaScript でフォームを送信するには 3 つの方法があります。送信ボタンを使用して直接フォーム送信を実装する方法、ボタンボタンを使用して onclick イベントをトリガーしてフォーム送信を実装する方法、送信ボタンを使用して onsubmit イベントをトリガーしてフォームを実装する方法です。

ページ内のフォーム送信は非常に一般的な方法です。この記事では、フォーム送信を実装するためのいくつかの方法を紹介します。## 参考にしてください。

JavaScript でフォームを送信するにはどのような方法がありますか?

#【おすすめコース: javascript チュートリアル #】

方法 1

送信ボタンを使用してフォーム送信効果を実現します

例:

<form action="demo.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=&#39;firstname&#39;]").val();
        var last = $("input[name=&#39;lastname&#39;]").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>

ログイン後にコピー

次のように上記のコードでは、送信ボタンをクリックすると、フォームデータがdemo.aspという名前のページに送信されます。送信ボタンによって実装されるフォーム送信は直接送信です。ただし、いくつかの方法を使用して、フォーム送信の必要性を確認したり、独自のカスタムニーズに従ってフォームを送信したりできます。

方法 2

ボタンボタンを使用できます。フォーム送信を実装するには、ボタンボタンがクリックされると onclick イベントがトリガーされ、JavaScript の関数が入力内容が空かどうかを判断し、空の場合は false が返され、この時点ではフォーム送信は行われません。。空でない場合、フォームはアクションで指定されたアドレスに送信されます。

<script type="text/javascript">
         function check(form) {
              if(form.userId.value==&#39;&#39;) {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==&#39;&#39;){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                  document.myform.submit();
            }
    </script>
<form action="demo.asp" name="myform" method="post">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=button name="submit1" value="登陆" onclick="check(this.form)">  
</form>

ログイン後にコピー

注: このメソッドでは、ボタンボタンには自動送信の機能がないため、JavaScript ステートメントによって送信が実装されます。

メソッド 3

合格送信ボタンを使用してフォームを送信します。送信ボタンをクリックすると、まず onsubmit イベントがトリガーされ、次に JavaScript の関数によって入力コンテンツが空かどうかが判断され、入力コンテンツが空の場合は false が返され、フォームは送信されません。入力内容が空でない場合は、action で指定されたアドレスに送信されます

<script type="text/javascript">
         function check(form) {
              if(form.userId.value==&#39;&#39;) {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==&#39;&#39;){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                return true;
         }
</script>
<form action="demo.asp act=login" method="post" onsubmit="return check(this)">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=submit name="submit1" value="登陆"> 
</form>

ログイン後にコピー

概要: 上記がこの記事の全内容です。この記事が、フォームを送信するいくつかの方法を誰もが学ぶのに役立つことを願っています。フォーム。

以上がJavaScript でフォームを送信するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。