3

fillForm.html と AnswerForm.html の 2 つの html ファイルと、scripts.js という名前の JavaScript ファイルがあります。fillForm ページに名前と年齢を含むフォームを作成し、[送信] をクリックしたときにそれを確認したいすべてのフォームに入力して, 2 番目のページにデータを送信します. 画面に表示されます: "こんにちは "名前", あなたの年齢は "年齢" " get で URL からデータを取得しないでください。私はfillFormページにこれを持っています:

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="scripts.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.8.2.js" 
         type="text/javascript"></script>

    </head>

    <body>
        <form name="myForm" action="AnswerForm.html" onsubmit="return validateForm()" method="post">
            First name: <input type="text" name="fname"><br/>
            Age: <input type="text" name="age">
            <input type="submit" value="Submit">
        </form>
    </body>

</html>

scripts.js のスクリプトは次のとおりです。

function validateForm()
{
    var firstName=document.forms["myForm"]["fname"].value;
    var Age=document.forms["myForm"]["age"].value;
    if ((firstName==null || firstName=="") || (Age==null || Age==""))
    {
          alert("fillOut  all the form");
          return false;
    }
    else
    {

    }
}

データを取得してANSWERFORM.htmlに表示したいだけで、ここで助けが必要です. また、質問があります。フォームのチェックは適切ですか、それとももっと良いチェック方法がありますか? チェックするデータが2つではなく40個ある場合、このチェックは非常に長くなり、チェックは特定ではなく一般的なものになるためです）ありがとうございます！

4

4 に答える 4

3

通常、そのようなデータを処理するには、サーバー側のコード/プロセスが必要です。

ただし、javascript にとどまりたい場合は、 を使用しlocalStorageてデータを保存し、次のページで使用できます。ただしlocalStorage、すべてのブラウザで動作するわけではないので注意してください。

于 2012-12-19T12:48:27.567 に答える
0

これを行う通常の方法は、おそらくリクエストとともにデータをウェブサーバーに投稿し、サーバー側の言語を使用してそれを処理し、次のページでデータを適切にレンダリングすることですが、JavaScript で同様のことを行うことは可能です。私は推測する。

POST の代わりに HTTP GET を介してデータを投稿するように HTML フォームを変更するというアイデアがあります。AnswerForm.html を呼び出すと、フォーム データがクエリ文字列に追加されます。回答ページでは、このSO 回答で説明されている例のようなものでクエリ文字列を読み取り、ロード時にコンテンツを回答ページに簡単な DOM 操作で挿入できます。

注意:このソリューションは、JavaScript に完全に依存して動作します。それ以外の場合、ユーザーは回答ページにデータを表示しません。

アップデート：

上記の SO 投稿にある例を使用すると、次のようにすることができます。

<html>
   <head>
        <title>Foo</title>
        <script>
        function getParameterByName(name)
        {
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regexS = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexS);
            var results = regex.exec(window.location.search);
            if(results == null)
                return "";
            else
                return decodeURIComponent(results[1].replace(/\+/g, " "));
        }
        </script>
   </head>
   <body> 
      Hello <span id="fname"></span>
      <script>
         var fname = getParameterByName("fname");
         document.getElementById("fname").innerText = fname;
      </script>
   </body> 
</html>

簡単にするために、ID を含むスパン要素を追加し (javascript を使用して簡単に選択できるようにするため)、クエリ文字列の内容を読み取ってそのスパンに追加することができます。

于 2012-12-19T12:50:28.003 に答える
0

これは、プレーンなブラウザベースの JavaScript に最適な仕事ではありません。問題は、ブラウザベースの JS が特定のページに固有であることです。そのページが破棄されると (つまり、データが送信されると)、その JavaScript はそれを含むページと共に消えます。localStorage.key = value(またはを使用して) セッションまたはローカル ストレージを介して渡すこともできますがsessionStorage.key = value、これは回避策であり、データが送信された後でもエンド ユーザーがデータを編集できるようにします。

ソリューションを適切に実装するには、ある点で Web サーバーを通過する必要があります。Web サーバーはリクエストを管理し、最初のページからデータを受け取り、それを保持して 2 番目のページに渡します。これを行う方法は、Web サーバーで使用する言語に完全に依存します。すでに JavaScript に慣れている場合は、nodejs が適しているかもしれません: http://nodejs.org/

于 2012-12-19T12:50:41.487 に答える
0

以下のコードをelse部分で使用します

document.forms["myForm"].action="AnswerForm.html?fanme="+firstName+"&age="+Age;
return true;
于 2012-12-19T12:56:53.837 に答える