Javascriptを使用して複数のフォーム提出を防止する

私はHTML/PHPベースのフォームを2つの送信ボタン(上部に1つ、下部に1つ)を備えています。私は人々が複数回Submitを押さないようにする必要があります(データベース内に複数のレコードを作成する)ので、ここをクリックすると、送信ボタンがクリックされたときに無効になり、ボタンのテキストも「送信」から「送信待ち...しばらくお待ちください」に変わります。

私は今、2つの問題があります:

  1. フォームの一番上のボタンだけが無効になり、テキストが変更されています。下部の[送信]ボタンは影響を受けません。送信時に両方のボタンが無効/変更されるようにするにはどうすればよいですか?
  2. マイページには、送信ボタンがクリックされたときに呼び出されるvalidateForm()関数があります。したがって、ユーザーが必要なフィールドに記入しなければ、メッセージボックスが表示され、彼はフォームに戻るよう指示されます。しかし、一番上の[送信]ボタンはまだ無効になっています(テキストも変更されています)。検証機能でエラーが検出された場合、ボタンを通常の「送信」状態に戻すにはどうすればよいですか?

関連するコードスニペットを次に示します。ボタンを無効/変更するコードを削除すると、フォームは正常に送信されます(もちろん、私が探している機能は得られません)。

フォームタグ:

<form name="MyInquiry" method="post" autocomplete="off" onsubmit="document.getElementById('submitButtonTop').disabled=true;document.getElementById('submitButtonTop').value='Submitting, please wait...';document.getElementById('submitButtonBottom').disabled=true;document.getElementById('submitButtonBottom').value='Submitting, please wait...';return validateInquiryForm();">

ボタンのタグ:

<input type="submit" name="submitinquiryform" id="submitButtonTop" value="Submit Form" />

<input type="submit" name="submitinquiryform" id="submitButtonBottom" value="Submit Form" />

検証機能:

    function validateInquiryForm() {



 var valid = true;
        var errorMessage = "";

        var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

... code to validate individual fields ...

    if (!valid)
                alert(errorMessage);

            return valid;
        }

ありがとう、 ジョン

0
@onatm:同じクラスかもしれないが、同じid =悪い。 IDはページ内で一意でなければなりません。
追加された 著者 Marc B,
適切なアドバイスを提供するために、コードの一部を見る必要があります。
追加された 著者 Vincent Ramdhanie,
あなたが両方のボタンに同じイド
追加された 著者 david,
両方のボタンに同じid/classを与えるのはどうですか?
追加された 著者 onatm,
@MarcBあなたの助言に感謝します。
追加された 著者 onatm,
@david acctually私は一意でなければならないthougthを持っているが、私はいつも一意にそれらを使用している。多分ここの唯一の皮肉はそれです:)
追加された 著者 onatm,

3 答え

onsubmit="
    document.getElementById('myButtonTOP').disabled=true;
    document.getElementById('myButtonTOP').value='Submitting, please wait...';
    document.getElementById('myButtonBOTTOM').disabled=true;
    document.getElementById('myButtonBOTTOM').value='Submitting, please wait...';
    return true;"

もちろん、 <script> </script> 領域で宣言されたjavascript関数を呼び出すほうがよいでしょう。

だから私は次のような関数を書くだろう...

var mySubmitted = false;

function MyCheckSubmit()
{
    if (mySubmitted)
        return false;//Already submitted!

    if (!validateInquiryForm())
        return false;//Validation failed!

   //disable submit buttons

    document.getElementById('myButtonTOP').disabled=true;
    document.getElementById('myButtonTOP').value='Submitting, please wait...';
    document.getElementById('myButtonBOTTOM').disabled=true;
    document.getElementById('myButtonBOTTOM').value='Submitting, please wait...';

   //Store in our global variable that we submitted this form.
    mySubmitted = true;

    return true;//Ok, we can submit!
}

当然の形で

onsubmit="return MyCheckSubmit();"

これは、フォームがすでに提出されているかどうかを内部変数で確認するため、入力テキストボックスに複数の「Enter」キーを押しても機能します。

可能であればheadセクションにフォームの前にスクリプトブロックを宣言してください。

1
追加された
変更、私は今編集したようなものを試してみてください。
追加された 著者 Salvatore Previti,
ありがとう、これは私がやっていることであり、ボタンを無効にしたり変更したりすることは問題ではないようです。しかし、実際にフォームを提出するわけではありません。私のデータベースにはレコードが作成されません。
追加された 著者 johnnyb10,
ありがとう。私はこの新しいバージョンを試しました、そして、それは部分的に動作するようでした。フォームが正しく送信されましたが、ボタンのラベルが更新されず、ボタンが無効になっていませんでした。それから私は間違ったボタン名を持っていることに気付きました。私はあなたの例で使用したボタン名をまだ変更していませんでした。だから私はボタンの名前を修正しましたが、今私は逆の問題があります:ボタンを無効にする/変更、フォームが提出されていません。何か案は?
追加された 著者 johnnyb10,

@onatm:同じIDを使用しても役に立ちません。タグの最初のインスタンスだけがJSによって処理され、それ以降のものは処理されません。

このようなことをすることができます.... jqueryを使用します。両方のボタンに「SUBMIT」と言うクラスを与えます。次に、次のコードを記述します。

var myForm = document.forms[0];
$(document).ready(function(){
    $(".SUBMIT").click(function(){
        if(validateInput()){
            $(".SUBMIT").attr("disabled", true).val("Submitting..");
            var url = "any URL you like";
            var data = {
                           field1: myForm.field1.value,
                           field2: myForm.field2.value,
                           .
                           .
                       };
            $.post(url, data,
                function(Result){
                    alert(Result);//Write whatever logic you want
                }
            )
            .complete(function(){
               $(".SUBMIT").attr("disabled", false).val("Submit");
            })
            .error(function(){
               alert("Some error");
               $(".SUBMIT").attr("disabled", false).val("Submit"); 
            });
        }
        else{
            alert("Enter the missing fields first");//Write whatever your logic
        }
    });
});

function validateInput(){
    if (all fields are entered)//Write you logic here
        return true;
    else
        return false
}

コードはあなたの最初の問題を解決するはずです。 2番目の問題は、関数 validateInput() の各フィールドの真偽をテストするためのコードを明示的に記述することです。

1
追加された
jqueryについてわからない場合は、 jquery.com から jquery.1.6.x.js のすべてのバージョンをダウンロードしてください。これを<script src = "yourpath/jquery.1.6.x.js" />のようにWebページの<head>タグに含めます。その後に投稿したコードを記述します。
追加された 著者 kush.impetus,
@ johnnyb10:それは大丈夫です。しかし、私はそれをあなたにプロジェクトではなく、ショットを与えることを提案します。当初、それは(ほぼ誰にとっても)難しいように見えましたが、あなたがそれに慣れ親しむようになると、どこでも使えるようになります。それは多くの時間と労力を節約します。実際には、それはjqueryの独白です...コードはありません。申し訳ありませんが、私はあなたにそれを使用するよう強制しません。
追加された 著者 kush.impetus,
ありがとう。可能であれば、jqueryの使用を避けたいと思います。これは仕事のためのもので、フォームに追加してもらいたいとは思っていません。 (私はjqueryについて知らないので、心配する必要はないかもしれませんが、解決策を可能な限り単純にしたいと思います。)
追加された 著者 johnnyb10,
少なくとも私はID /クラスを言った:)しかし、これを明確にするためにMarkBとあなたに感謝します。
追加された 著者 onatm,

you could place this in correct condition when the form validation conditions are met, thus only disabling on submit, you would need to return 'this' as reference in your onsubmit="return MyCheckSubmit(this);"

  var topButton = document.MyInquiry.submitinquiryform;//top
  var botomButton = document.otherMyInquiry.submitinquiryform;//bottom

 if(beingSubmitted.name == "MyInquiry"){ 

   topButton.value = "Please wait...";
   //beingSubmitted.action = "process.php"//action page
   beingSubmitted.submit();

  }else{
   //beingSubmitted.action = "process2.php"//action page
    botomButton.value = "Please wait...";
    beingSubmitted.submit();
}
//beingSubmitted.action = "process.php"//action page would handle for both form you could check which form is being submitted by sending a value in a hidden filed 
 topButton.disabled = true;
 botomButton.disabled = true; 

私は、あなたがフォーム上に何も行動を起こしていないことに気づいた

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript