JavaScript에서 선택된 확인란을 표시합니다.

저는 책에서 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>

. 감사.

출처

2016-09-08 Rusty Shackleford

웁스! 전혀 그렇지 않다. 그 점을 지적 해 주셔서 감사합니다. –

'musis'와'music'은 동일하지 않습니다 – Li357

, 당신은

당신이 document.write를를 사용하는이

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");

같은 코드를해야한다, DOM 구조는,에게 변경되었습니다 document.write 전에 getElementById를 사용해야합니다.

출처

2016-09-08 01:32:14

감사합니다! 그것은 매력처럼 작동합니다. –

당신은 다른 모든 것에 이름을 사용하고 있습니다. 양식이 제출되면 다음 페이지로 전송되는 이름 : 값 쌍이 있습니다. 확인란 이름을 지정하면 작동합니다.

독자적으로 더 배우고 싶다면 w3schools를 적극 권장합니다. 입력 이름에 대해서는 아래 링크를 참조하십시오. 난 당신의 코드를 디버깅 한

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

출처

2016-09-08 01:19:40 BSD

Gotcha. 그건 의미가 있습니다. 나는 아직도 배울 것이 많다. –

이 함수는 양식에 있어야합니다. 제출 버튼을 사용하지 않고 양식을 제출할 수 있으므로 양식 외부의 임의의 버튼이 아닌 처리기를 제출하십시오. 그런 다음 기능을 실행 한 후 양식을 제출할지 여부를 결정할 수 있습니다 : 당신이 양식을 제출하거나하지 경우는 false하려면

<form onsubmit="return formResult()">

과 formResult 기능에

는 true를 돌려줍니다.

또한 확인란이 이름이 있어야 양식이 제출 될 때 해당 값이 서버로 전송됩니다. (페이지가로드 즉) 부하 이벤트가 발생한 후 document.write를 전화

마지막으로, 먼저 문서의 전체 내용을 지 웁니다. 또한 모든 내용을 한 번에 작성해야합니다. 그렇지 않으면 브라우저가 완료 될 때마다 쓰기 후을 작성한 후에 올바른 문서를 만들려고 계속 노력해야합니다.

div 또는 유사한 요소의 innerHTML으로 마크 업을 삽입하는 것이 훨씬 좋습니다. document.write은 지난 세기입니다. ;-)

출처

2016-09-08 02:18:34 RobG

감사합니다! 나는 그것을 명심 할 것이다. 나 같은 사람을 위해서조차도 이해하기가 쉽습니다! –

JavaScript에서 선택된 확인란을 표시합니다.

답변

관련 문제