2016-09-08 13 views
0

私は本でJavaScriptを実践しています。私は、テキストボックス、チェックボックス、ラジオでフォームを作って欲しいと思っています。 住所: 性別: 趣味:JavaScriptで選択されたチェックボックスを表示する

それは他のすべてが表示するようになって簡単でしたが、私は生活のためにできない私が提出]をクリックすると、それは...のように、 フルネームを別のページに結果が表示されるはずです提出をクリックすると、選択したチェックボックスが表示されます。

ここで私は問題を抱えている部分です。私はちょうどこれを使用することができると思ったが、それはうまくいきませんでした:

  var games = document.getElementById("Checkbox1").checked; 
      var music = document.getElementById("Checkbox2").checked; 
      if (games) document.write(" Games"); 
      if (music) document.write(" Music"); 

そして、ここでは私のコードの残りの部分です:

<!DOCTYPE html> 
<html> 
<head> 

    <style type="text/css"> 

    </style> 

</head> 

<body style="height: 264px; width: 818px; margin-left: 0px;"> 
    <form name="nameForm" method="post"> 
     <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" dir="auto" class="auto-style4"> 
      <tr> 
       <td class="auto-style5">Last Name: </td> 
       <td class="auto-style6"> 
        <input name="lastName" type="text" border="1" /></td> 
      </tr> 
      <tr> 
       <td class="auto-style5">First Name: </td> 
       <td class="auto-style6"> 
        <input name="firstName" type="text" border="1" /></td> 
      </tr> 
      <tr> 
       <td class="auto-style5">Address:</td> 
       <td class="auto-style6"> 
        <input name="address" type="text" border="1" id="address" /></td> 
      </tr> 
      <tr> 
       <td class="auto-style5">Telephone:</td> 
       <td class="auto-style6"> 
        <input name="telephone" type="text" border="1" id="telephone" /></td> 
      </tr> 
      <tr> 
       <td class="auto-style2">Sex:</td> 
       <td class="auto-style3"> 
        <input name="sex" type="radio" value="Male" />Male<br /> 
        <br /> 
        <input name="sex" type="radio" value="Female" />Female 
       </td> 
      </tr> 
      <tr> 
       <td class="auto-style1">Hobbies:</td> 
       <td> 
        <input id="Checkbox1" type="checkbox" value="Games" />Games<br /> 
        <br /> 
        <input id="Checkbox2" type="checkbox" value="Music" />Music<br /> 
        <br /> 
        <input id="Checkbox3" type="checkbox" value="Travel" />Travel<br /> 
        <br /> 
        <input id="Checkbox4" type="checkbox" value="Exercise" />Exercise<br /> 
        <br /> 
        <input id="Checkbox5" type="checkbox" value="Art" />Art<br /> 
       </td> 
      </tr> 
     </table> 
    </form> 

    <script type="text/javascript"> 

     function formResult() { 
      var lastName, firstName, fullName, address, telephone, sex; 
      lastName = document.nameForm.lastName.value; 
      firstName = document.nameForm.firstName.value; 
      address = document.nameForm.address.value; 
      telephone = document.nameForm.telephone.value; 
      sex = document.nameForm.sex.value; 

      fullName = firstName + " " + lastName; 
      document.write(); 
      document.write("Your name: "); 
      document.write(fullName); 
      document.write("<br>"); 
      document.write("<br>"); 
      document.write("Your address: " + address); 
      document.write("<br>"); 
      document.write("<br>"); 
      document.write("Your telephone: " + telephone); 
      document.write("<br>"); 
      document.write("<br>"); 
      document.write("Your gender: " + sex); 
      document.write("<br>"); 
      document.write("<br>"); 
      var games = document.getElementById("Checkbox1").checked; 
      var musis = document.getElementById("Checkbox2").checked; 
      if (games) document.write(" Games"); 
      if (music) document.write(" Music"); 

     } 

    </script> 
    <p> 
     <input name="btnSubmit" type="submit" value="submit" onclick="formResult()" /> 
    </p> 
</body> 
</html> 

任意の助けをいただければ幸いです。ありがとう。

+0

おっと!いいえそうではありません。それを指摘してくれてありがとう。 –

+0

「musis」と「music」は同じではありません – Li357

答えて

1

私はあなたのコードをデバッグしている、あなたがdocument.writeをを使用する場合は、DOM構造は、あなたが変更されました。この

var games = document.getElementById("Checkbox1").checked; 
 
     var music = document.getElementById("Checkbox2").checked; 
 

 

 
     var lastName, firstName, fullName, address, telephone, sex; 
 
     lastName = document.nameForm.lastName.value; 
 
     firstName = document.nameForm.firstName.value; 
 
     address = document.nameForm.address.value; 
 
     telephone = document.nameForm.telephone.value; 
 
     sex = document.nameForm.sex.value; 
 

 
     fullName = firstName + " " + lastName; 
 

 

 
     
 
     document.write(); 
 
     document.write("Your name: "); 
 
     document.write(fullName); 
 
     document.write("<br>"); 
 
     document.write("<br>"); 
 
     document.write("Your address: " + address); 
 
     document.write("<br>"); 
 
     document.write("<br>"); 
 
     document.write("Your telephone: " + telephone); 
 
     document.write("<br>"); 
 
     document.write("<br>"); 
 
     document.write("Your gender: " + sex); 
 
     document.write("<br>"); 
 
     document.write("<br>"); 
 

 
     if (games) document.write(" Games"); 
 
     if (music) document.write(" Music");

のようなコードを作成する必要がありますdocument.writeの前にgetElementByIdを使用する必要があります

+0

ありがとう!それは魅力のように働く。 –

0

あなたは他のすべての名前を使用しています。フォームが送信されると、次のページに送信する名前:値のペアがあります。チェックボックスの名前を指定すると、その名前が機能するはずです。

あなた自身で詳細を知りたい場合は、w3schoolsを強くお勧めします。入力の命名については、下のリンクを参照してください。

http://www.w3schools.com/tags/att_input_name.asp

+0

Gotcha。それは理にかなっている。私はまだ多くのことを学ぶ必要があります。 –

0

この関数はフォームの送信ボタンを使用せずにフォームを送信することができるので、フォームの外にあるランダムなボタンではなく、ハンドラを送信します。次に、機能を実行した後にフォームを送信するか否かを決定することができます:あなたは、フォームが送信したりしない場合はfalseをしたい場合は

<form onsubmit="return formResult()"> 

formResult機能で

あなたはtrueを返します。

また、チェックボックスの名前は、フォームが送信されるときに値がサーバーに送信されるようにする必要があります。

最後に、loadイベントが発生した後、あなたが(すなわち、ページがロードされる)のdocument.write を呼び出すとき、それは最初のドキュメントの全体内容をクリアします。また、一度にすべてのコンテンツを書き込む必要があります。そうしないと、完了後に気にする必要がなく、の後に有効なドキュメントを作成しようとしているブラウザが、を書き続けなければなりません。

divなどの要素のinnerHTMLとしてマークアップを挿入する方がずっと良いです。document.writeは非常に最後の世紀です。 ;-)

+0

ありがとう!私はそれを念頭に置いておきます。私のような男でさえ、非常に分かりやすい! –

関連する問題