CODEWITHSUNDEEP
javascript
Rusty Shackleford
Rusty Shackleford

Reputation: 49

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.

Upvotes: 0

Views: 60

Answers (3)

BSD
BSD

Reputation: 339

You're using names for everything else. When the form submits you have name:value pairs which transmit to the next page. If you give your checkboxes names, then it should work.

If you want to learn more on your own, I highly recommend w3schools. See the link below on the naming of inputs.

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

Upvotes: 0

RobG
RobG

Reputation: 147453

The function should be on the form's submit handler, not some random button outside the form since it's possible to submit the form without using the submit button. Then you can decide whether to submit the form or not after running the function:

<form onsubmit="return formResult()">

and in the formResult function you return true if you want the form to submit or false if not.

Also, the checkboxes should have names so that their values are sent to the server when the form is submitted.

Lastly, when you call document.write after the load event has occurred (i.e. the page is loaded), it first clears the entire content of the document. Also, you should write all the content in one go, otherwise the browser has to keep trying to create a valid document after each write instead of only having to worry about that when you're finished.

Far better to insert the markup as the innerHTML of a div or similar element, document.write is very last century. ;-)

Upvotes: 0

Chen.caijun
Chen.caijun

Reputation: 104

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

Upvotes: 1

Related Questions