Показать выбранные флажки в 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

Я отлажена свой код, вы должны сделать код как этот

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, структура DOM была изменена, вы следует использовать getElementById до document.write

источник

2016-09-08 01:32:14

Спасибо! Отлично работает. –

Вы используете имена для всего остального. Когда форма отправляется, у вас есть имя: пары значений, которые передаются на следующую страницу. Если вы укажете свои имена, то он должен работать.

Если вы хотите узнать больше по своему усмотрению, я настоятельно рекомендую w3schools. См. Ссылку ниже о наименовании входов.

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

источник

2016-09-08 01:19:40 BSD

Gotcha. В этом есть смысл. Мне еще многое предстоит узнать. –

Функция должна быть на форме отправьте обработчик, а не какую-нибудь случайную кнопку вне формы, так как можно отправить форму без использования кнопки отправки. Затем вы можете решить, следует ли отправить форму или нет после запуска функции:

<form onsubmit="return formResult()">

и в formResult функции вы возвращаете истину, если вы хотите, чтобы форма представить или ложную, если нет.

Кроме того, флажки должны иметь имена, чтобы их значения отправлялись на сервер при отправке формы.

Наконец, когда вы звоните document.write после того, как событие загрузки произошло (т.е. страница загружена), он сначала очищает все содержания документа. Кроме того, вы должны написать весь контент за один раз, иначе браузер должен продолжать создавать правильный документ после каждого напишите вместо того, чтобы беспокоиться об этом, когда вы закончите.

Лучше всего добавить разметку в качестве внутреннегоHTML элемента div или аналогичного элемента, document.write - это очень последний век. ;-)

источник

2016-09-08 02:18:34 RobG

Спасибо! Я запомню это. Очень просто понять, даже для такого парня, как я! –

Показать выбранные флажки в JavaScript

ответ

Смежные вопросы