jquery submitボタン 判定

jQueryでsubmitボタンを押したかどうかを判定する方法

jQueryでsubmitボタンを押したかどうかを判定する方法

jQueryを使ってフォーム送信時に、どのボタンが押されたのかを判定する方法について解説します。複数種類のsubmitボタンがある場合や、ajaxでフォームを送信する場合などに役立ちます。

複数のsubmitボタンを判定する

表单中有多个submit按钮时，如何使用jQuery的`click`事件和`this`关键字识别哪个按钮被点击。


    <form id="myForm">
        <input type="submit" value="保存" id="saveBtn">
        <input type="submit" value="削除" id="deleteBtn">
    </form>

    <script>
        $(document).ready(function(){
            $("#saveBtn").click(function(event){
                event.preventDefault(); 
                // submitのデフォルト動作をキャンセル
                console.log("保存ボタンがクリックされました");
                // 保存処理
            });

            $("#deleteBtn").click(function(event){
                event.preventDefault(); 
                // submitのデフォルト動作をキャンセル
                console.log("削除ボタンがクリックされました");
                // 削除処理
            });
        });
    </script>

ajaxでsubmitボタンを判定する

使用Ajax提交表单时，如何通过`event.preventDefault()`阻止默认提交行为。如何获取被点击按钮的信息，并将其包含在Ajax请求中。


    <form id="myForm">
        <input type="submit" value="更新" id="updateBtn">
    </form>

    <script>
    $(document).ready(function(){
        $("#updateBtn").click(function(event){
            event.preventDefault(); // submitのデフォルト動作をキャンセル

            var formData = $("#myForm").serialize(); 
            // フォームデータを取得

            $.ajax({
                url: "update.php",
                type: "POST",
                data: formData,
                success: function(response){
                    console.log("更新が完了しました");
                },
                error: function(){
                    console.log("エラーが発生しました");
                }
            });
        });
    });
    </script>

submitボタンの無効化

介绍如何使用jQuery禁用和启用submit按钮，防止重复提交。


    <form id="myForm">
        <input type="submit" value="送信" id="submitBtn">
    </form>

    <script>
    $(document).ready(function(){
        $("#myForm").submit(function(event){
            $("#submitBtn").prop("disabled", true); 
            // ボタンを無効化
            // ... Ajaxリクエスト処理 ...
            // ... リクエスト完了後 ...
            $("#submitBtn").prop("disabled", false); 
            // ボタンを有効化
        });
    });
    </script>

まとめ

この記事では、jQueryを使ってsubmitボタンのクリックを判定する方法について解説しました。`click`イベントと`this`キーワードを使うことで、複数のsubmitボタンを区別することができます。また、`event.preventDefault()`を使うことで、フォームのデフォルトの送信動作を無効化し、Ajaxを使ってフォームを送信することができます。さらに、submitボタンを無効化することで、2重送信を防ぐ方法も紹介しました。

参考資料

  • <a href="https://api.jquery.com/">jQuery API Documentation</a>

QA

質問 回答
複数のsubmitボタンがある場合、どのように処理を分ければ良いですか？ 各submitボタンに異なるIDを割り当て、jQueryのセレクタで特定のボタンをクリックした時の処理を記述します。
submitボタンを押した時にページ遷移せずに処理を実行するにはどうすれば良いですか？ `event.preventDefault()`を使ってフォームのデフォルトの送信動作を無効化し、Ajaxを使って処理を実行します。
submitボタンを無効化するにはどうすれば良いですか？ `prop("disabled", true)`を使ってsubmitボタンを無効化します。

その他の参考記事:jquery submit