Question

我在书中练习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>

任何帮助将不胜感激。感谢。

Answer 1

我已经调试了你的代码，你应该像这样编写代码

＆＃13;

$('a#more').trigger("click");

＆＃13;

当你使用document.write时，DOM结构已被更改，你应该在document.write之前使用getElementById

Answer 2

你正在使用其他所有名称。当表单提交你有名称：值对，传输到下一页。如果你给复选框命名，那么它应该可以工作。

如果你想自己学习更多，我强烈推荐w3schools。请参阅下面关于输入命名的链接。

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

Answer 3

该函数应该在表单的提交处理程序上，而不是表单外的一些随机按钮，因为可以在不使用提交按钮的情况下提交表单。然后您可以在运行函数后决定是否提交表单：

<form onsubmit="return formResult()">

并且在 formResult 函数中，如果您希望表单提交，则返回true;否则返回false。

此外，复选框应具有名称，以便在提交表单时将其值发送到服务器。

最后，当您在加载事件发生后（即加载页面）调用 document.write 时，它首先清除文档的整个内容。此外，您应该一次性编写所有内容，否则浏览器必须在每次写入之后继续尝试创建有效文档，而不必在完成后不必担心。

将标记作为div或类似元素的innerHTML插入更好， document.write 是上个世纪。 ; - ）

在JavaScript中显示选中的复选框

3 个答案: