2

javascriptを使用してフォーム検証を使用してフォームを送信するためのHTMLボタンがあります-

<p class="textstyle1"><a href="javascript:document.contact.submit();"><span onClick="MM_validateForm('Name','','R','Email','','RisEmail','Message','','R');return document.MM_returnValue">Send</span></a></p>

フォームが送信されると、ユーザーにメールを送信し、フォーム データを MySQL データベースに挿入する php コードが実行されている間、ボタンのテキストを「送信」から「お待ちください...」に変更します。

私は多くの調査を行い、実際の [送信] ボタンのテキストを変更するコードを見つけましたが、代わりに HTML ハイパーリンク テキストを変更するコードの助けが必要です。

4

3 に答える 3

0

まず、ハイパーリンクを使用しないでください<a>。送信ボタンを使用し、ハイパーリンクのようにスタイルを設定します。

次に、フォームの送信イベントの JavaScript イベント ハンドラーを定義します。イベント ハンドラーは、XMLHttpRequest (AJAX) 呼び出しを使用して、フォームを送信し、ボタン テキストを更新し、フォーム データの送信をキャンセルする必要があります。このようなもの：

var myFormEl = document.getElementById("myForm");
myFormEl.onsubmit = function() {
    var submitButtonEl = myFormEl.childNodes[4];
    var message = myFormEl.childNodes[2].value;

    var xhReq = new XMLHttpRequest();
    xhReq.open("POST", "submit.php", true);
    xhReq.onreadystatechange = function() { // this request is async
        if (xhReq.readyState != 4)  { return; }
        // there should be some error-checking here
        submitButtonEl.textContent = "Send";
        alert("Your message has been submit");
    };

    var reqBody = "message="+encodeURIComponent(message);

    xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhReq.setRequestHeader("Content-length", reqBody.length);

    if(submitButtonEl.textContent) {
        submitButtonEl.textContent = "Please wait...";
    }
    else {
        submitButtonEl.innerText = "Please wait..."; // for different browsers
    }
    xhReq.send(reqBody);

    return false; // cancel the form submission
};

重要な点は、フォームの送信をキャンセルするボタンと JavaScript イベント ハンドラーを使用してこのように行うと、正常に機能が低下するということです。JavaScript が無効になっている場合、または JavaScript が何らかの理由で失敗した場合でも、従来のフォーム送信は引き続き機能します。

あなたは私のウェブサイトで実際にそれを見ることができます.

于 2012-10-05T17:14:43.817 に答える
0

皆さん、ご意見ありがとうございます。私はもう少し調査を行い、自分のニーズに合った非常にシンプルなソリューションを見つけることができました. CSS を使用して送信ボタンを他のリンクのようにスタイルし、ハイパーリンク タグと js 送信機能を削除して、実際の送信ボタンに置​​き換えました。フォームが送信されたときにテキスト値を「お待ちください」に変更するコードを追加したところ、うまく機能しました。

<input name="Submit" type="submit" value="Send" onClick="this.value = 'Please Wait';">

唯一の注意点は、フォームが正常に送信された後にユーザーがたまたまブラウザの戻るボタンをクリックした場合、送信ボタンには「しばらくお待ちください」と表示されますが、私はそれを受け入れることができます.

ところで、PHP 検証スクリプトを優先して、Macromedia フォーム検証を削除しました。JavaScriptやjqueryの検証のように「ライブ」ではありませんが、機能します。

于 2012-10-27T17:30:08.727 に答える
0

ただし、ここでは通常のポストバックを使用してフォームを送信しています。そのため、ユーザーが [送信] をクリックすると、ページがポストバックされ、サーバー側のコード、つまり電子メールの送信とデータベースの挿入が実行されます。AJAX ページの場合、ユーザーが送信リンクをクリックした後、リンクの innerHTML プロパティを「お待ちください」に変更し、サーバーからの応答を受信した後、「送信」に戻すことができます。

于 2012-10-05T15:53:32.130 に答える