2

method="POST"外部 URLを使用してフォームの詳細を送信し、フォームが正常に完了した後にユーザーを「ありがとうございました」ページにリダイレクトしようとしています。

サンプルの HTML/Javascript は次のとおりですが、ページが意図したとおりに Google.com にリダイレクトされません。これを修正するための助けがあれば大歓迎です!

HTML:

<form action="externalURLhere" method="post" name="theForm"    
id="theForm" style="margin-bottom:0px;padding:2px;background-color:#e0e0e0;" onSubmit="return 
MM_validateForm(); return redirect();">

JavaScript:

function MM_validateForm() {
    if ( !jQuery('#theForm #FirstName').val() ) {
        alert('Please input your first name.');
        jQuery('#theForm #FirstName').focus();
        return false;
    }
    if ( !jQuery('#theForm #LastName').val() ) {
        alert('Please input your last name.');
        jQuery('#theForm #LastName').focus();
        return false;
    }
    if ( !jQuery('#theForm #daytimephone').val() ) {
        alert('Please input your phone number.');
        jQuery('#theForm #daytimephone').focus();
        return false;
     }
    if ( !jQuery('#theForm #Email').val() ) {
        alert('Please input your email.');
        jQuery('#theForm #Email').focus();
        return false;
    }
    if ( !jQuery('#theForm #BID').val() ) {
        alert('Please select your preferred campus.');
        jQuery('#theForm #BID').focus();
    return false;
    }
    if ( !jQuery('#theForm #programs').val() ) {
        alert('Please select your preferred program.');
        jQuery('#theForm #programs').focus();
        return false;
    }
    if ( !jQuery('#theForm #How_Heard').val() ) {
        alert('Please select how you heard about us.');
        jQuery('#theForm #How_Heard').focus();
    return false;
    }
return true;
}
// ]]></script>

<script type="text/javascript">
function redirect() {
    window.location = "www.google.com";
    return false;
}
</script>
4

3 に答える 3

2

ユーザーが送信ボタンをクリックすると、onsubmit イベントが発生し、イベントにバインドされた関数の戻り値に応じて、フォームが送信される (true を返す) または送信されない (false を返す)。関数は、HTML を使用してイベントにバインドできます。

  • <form onSubmit="if(/*some validation here*/){return true;} else {return false;}"></form>

またはJavaScriptスクリプト自体で：

  • form1.onsubmit=function(){if(/*some validation here*/){return true;} else {return false;}}

一般に、それは問題ではありません。
ご存じのとおり、関数の本体は「戻り」が発生するまで実行されます。その後、すぐに停止し、戻り値が関数呼び出し元に渡されます。したがって、onSubmit="" HTML タグ属性に記述した内容は、次の JS コードに相当します。

form1.onsubmit=function(){
    testPassed=validate();
    return testPassed;

    someValueRedirectFunctionReturns=redirect();
    return someValueRedirectFunctionReturns;
}

そのため、フォーム データ テストに合格したかどうかに関係なく、validate() 関数の戻り値 (フォームが正常な場合は true、ユーザーが不正なデータを入力した場合は false) はすぐにイベント関数で返されるため、それがわかります。 . したがって、onsubmit イベント ハンドラ関数が停止され、値が返されるため、redirect() 関数は実行できません。

これを機能させるには、コードを変更する必要があります。

form1.onsubmit=function(){
    if(!validate())
        return false; //test failed, form is not passed, no need to redirect to "thank you page".
    else
        redirect();
}

そのため、フォーム検証テストに合格すると、リダイレクト関数が呼び出されます。ここで、別の問題に遭遇しました。
onsubmit イベント ハンドラー関数が定義されている場合、フォームを送信する唯一の方法はreturn true;、関数から戻ることです。これは、フォームを停止し、呼び出された場所から実行を続行することを意味します。関数内のページの window.location プロパティを変更すると、リダイレクトがすぐに発生するため、関数も変更しませんreturn;-- JavaScript の実行がすぐに中断され、新しいページの読み込みが開始されます -- もちろん、フォーム経由でデータを渡すことはできません提出;

だから、あなたがしなければならない

  1. フォームを送信 (データが有効な場合) --return true;
  2. フォームが送信されたページから何らかの方法でリダイレクトします (これは、別のページで JS コードを実行し続けることを意味します) 。

そして... それは不可能です。
次の理由により、フォームの送信後に JS コードの実行を続行できません。

  • イベント ハンドラ関数が返されました。止まっているということです。
  • フォームが送信され、別のページがロードされています。前のページの JS コードが失われ、実行できなくなります。
  • つまり、読み込みを開始したページから (同期モードで) 読み込み中のページの動作に影響を与えることはできません。また、新しいページを必要なページ (「ありがとう」ページ) にリダイレクトすることはできません。通常のフォーム送信は、追加のパラメーターを含む新しいページをロードするだけです。例）ページ上のリンクがたどっているページを変更することはできません。

とにかく、あなたが望むものを達成する方法はまだいくつかあります：

  • フォームが送信されるページを所有している場合は、フォームのデータを受信し、すぐにリダイレクト ヘッダーを送信できます。たとえば、サーバー側の PHP 経由。
  • ページがあなたのものではない場合 (サーバーもページもサーバー側の何も変更することもできません)、わずかに異なる方法でフォームを操作する必要があります。
    • フレームまたはフローティング フレームを使用して、javascript コード自体によってフレームにデータをロードするか、(フォーム ページが配置されている同じサーバーから) 別のページをロードして、変更する権限を持ち、変更します。それ。例:
      1. 1 つのフレームで、ユーザーが実際にデータを入力するフォームを作成します。
      2. 別のフレームで、最初のフィールドと同じフィールドを含むが非表示のフィールドを含む別のフォームを作成します。
      3. 最初のフォームを送信しないで、2 番目のフォームと 2 番目のフォームにデータを渡しsubmit()ます。
      4. 最初のフレーム (またはページ全体) を「ありがとうございました」ページにリダイレクトします。
      5. 最初のフレームは非表示にすることもできます (CSS: display:none) -- 機能には影響しません。
    • AJAXを使用します。これは、実際のページをリロードせずに JavaScript コードから HTTP リクエスト (フォームの送信!) を行う特別な技術です。あなたのものでない場合、externalURLHere ページにデータを送信しようとすると、問題が発生する可能性があります。その場合、サーバー上に「ルーター」ページを作成できます。このページは、フォームから送信されたデータを受け取り、それをターゲットの externalURLHere ページにルーティングします。その後、あなたも...
    • AJAX を使用しないでください。ルーターページを作成するだけです (「ページ」と言うときは、主にPHPscriptやその他の CGI テクノロジを意味します)。このページには、「ありがとうございました」HTML ドキュメントも表示されます。
    • 等々...

可能な限り完全な回答をしようとしましたが、お役に立てば幸いです。

PS私の英語でごめんなさい。
PPS スタック オーバーフローに関する私の最初の回答 - 申し訳ありませんが、何か間違ったことをしている可能性があります。

于 2013-07-17T21:53:36.257 に答える
0

プロトコルを追加してみる

window.location = "http://google.com";
于 2013-07-17T21:05:28.793 に答える