Rusty Shackleford Rusty Shackleford - 2 months ago 7
Javascript Question

Display selected check box(es) in JavaScript

I'm practicing JavaScript in a book. It wants me to make a form, with text boxes, check boxes, and radios. When I click submit, it should show the results on another page, like...
Full Name:
Address:
Gender:
Hobbies:

It was easy getting everything else to display, but I cannot for the life of me get my selected check boxes to display, after I click submit.

Here is the part I'm having trouble with. I thought I could just use this, but it didn't work:

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


And here's the rest of my coding:

<!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>


Any help would be appreciated. Thanks.

Answer

I have debugged your code,you should make the code like this

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

When you use document.write ,the DOM structure has been changed,you should use getElementById before document.write

Comments