Question

早上好！

我首先要说的是我对Javascript世界相当新，并且对HTML和CSS有一些经验。在下面的代码中，我只是测试一个带有提交按钮的表单。但是，当用户点击“注册”按钮时，我希望输入到表单的信息显示在表单下方。

我可以将document.write()代码放在document.getElementById()代码所在的位置，它会写出结果，但是单击按钮后表单就会消失。

我已经查看了其他问题，但似乎没有人回答我所追求的内容，因为我不完全确定我错了哪一部分。

如果你能尽可能简单地解释答案，我将不胜感激。

<html>
<head>
    <title></title>
    <script>
        function click (){
            var add1 = document.getElementById("ad1").value;
            var add2 = document.getElementById("ad2").value;
            var add3 = document.getElementById("ad3").value;
            var postc = document.getElementById("pcode").value;
            var tel = document.getElementById("tno").value;
            var order = document.getElementById("ot").value;
            var deliv = document.getElementById("dt").value;
            var amount = document.getElementById("money").value;
            var email1 = document.getElementById("email").value;

            document.getElementById("addr1").innerHTML = add1;
            document.getElementById("addr2").innerHTML = add2;
            document.getElementById("addr3").innerHTML = add3;
            document.getElementById("pc").innerHTML = postc;
            document.getElementById("telephone").innerHTML = tel;
            document.getElementById("ordertype").innerHTML = order;
            document.getElementById("deliverytype").innerHTML = deliv;
            document.getElementById("currencyamount").innerHTML = amount;
            document.getElementById("emailer").innerHTML = email1;
    }
    </script>
</head>
<body>
    <form name="myForm" onsubmit="return validateForm();" method="post">
    <table>
        <tr><td>Address 1</td><td><input type="text" name="addressaddress" id="ad1"     placeholder="House Number"></input>
        </td></tr>
    <tr><td>Address 2</td><td><input type="text" name="ad2" id="ad2"></input>
        </td></tr>
    <tr><td>Address 3</td><td><input type="text" name="ad3" id="ad3"></input>
        </td></tr>
    <tr><td>Postcode</td><td><input type="text" name="pcode" id="pcode"></input>
        </td></tr>
    <tr><td>Telephone</td><td><input type="text" name="tno" id="tno"></input>
        </td></tr>
    <tr><td>Order Type</td><td><input type="text" name="ot" id="ot"></input>
        </td></tr>
    <tr><td>Delivery Type</td><td><input type="text" name="dt" id="dt"></input>
        </td></tr>
    <tr><td>How much do you want to spend?</td><td><input type="text" name="money" id="money"></input>
        </td></tr>
    <tr><td>Email</td><td><input type="text" name="email" id="email"></input>
        </td></tr>
    <tr><td><input type="submit" value="Sign Up" id="mybtn" onClick="Click();"></input>  </td></tr>     
    </table>
</form>

<p id="addr1"></p>
<p id="addr2"></p>
<p id="addr3"></p>
<p id="pc"></p>
<p id="telephone"></p>
<p id="ordertype"></p>
<p id="deliverytype"></p>
<p id="currencyamount"></p>
<p id="emailer"></p>

</body>

</html>

谢谢你们！：）

PS。我意识到我的命名惯例并不是最清楚的！

Answer 1

您正在呼叫Click();，但您定义了click()。 JavaScript 区分大小写。

此外，<input />是独立标记，而不是结束标记。没有必要</input>（事实上，它无效）。

<input type="submit" value="Sign Up" id="mybtn" onClick="click();" />

Answer 2

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function validateForm() {
            var add1 = document.getElementById("ad1").value;
            var add2 = document.getElementById("ad2").value;
            var add3 = document.getElementById("ad3").value;
            var postc = document.getElementById("pcode").value;
            var tel = document.getElementById("tno").value;
            var order = document.getElementById("ot").value;
            var deliv = document.getElementById("dt").value;
            var amount = document.getElementById("money").value;
            var email1 = document.getElementById("email").value;

            document.getElementById("addr1").innerHTML = add1;
            document.getElementById("addr2").innerHTML = add2;
            document.getElementById("addr3").innerHTML = add3;
            document.getElementById("pc").innerHTML = postc;
            document.getElementById("telephone").innerHTML = tel;
            document.getElementById("ordertype").innerHTML = order;
            document.getElementById("deliverytype").innerHTML = deliv;
            document.getElementById("currencyamount").innerHTML = amount;
            document.getElementById("emailer").innerHTML = email1;

            //document.myForm.submit();
            /*
            this will submit the form and will refresh the page so the content will disappear
            */


            return false;
            /*
            due to this content will be displayed and form will not be submitted until be uncomment the above form submission
            */
        }
    </script>
</head>
<body>

<form name="myForm" onsubmit="return validateForm();" method="post">
    <table>
        <tr><td>Address 1</td><td><input type="text" name="addressaddress" id="ad1"     placeholder="House Number" />
        </td></tr>
    <tr><td>Address 2</td><td><input type="text" name="ad2" id="ad2" />
        </td></tr>
    <tr><td>Address 3</td><td><input type="text" name="ad3" id="ad3" />
        </td></tr>
    <tr><td>Postcode</td><td><input type="text" name="pcode" id="pcode" />
        </td></tr>
    <tr><td>Telephone</td><td><input type="text" name="tno" id="tno" />
        </td></tr>
    <tr><td>Order Type</td><td><input type="text" name="ot" id="ot" />
        </td></tr>
    <tr><td>Delivery Type</td><td><input type="text" name="dt" id="dt" />
        </td></tr>
    <tr><td>How much do you want to spend?</td><td><input type="text" name="money" id="money" />
        </td></tr>
    <tr><td>Email</td><td><input type="text" name="email" id="email" />
        </td></tr>
    <tr><td><input type="submit" value="Sign Up" />  </td></tr>     
    </table>
</form>

<p id="addr1"></p>
<p id="addr2"></p>
<p id="addr3"></p>
<p id="pc"></p>
<p id="telephone"></p>
<p id="ordertype"></p>
<p id="deliverytype"></p>
<p id="currencyamount"></p>
<p id="emailer"></p>


</body>
</html>

Answer 3

第一反应是没有用的 - “为什么你会这样做？” - 请确保您没有创建一些用户敌对的bizarro UI。由于非安全性和足迹原因，非JS浏览器确实存在，因此通常也有一个非JavaScript回退通常是个好主意。

好的，不要...... :-)

正如其他人在我写这篇文章时指出的那样，你是从提交按钮的Click属性调用函数onClick，但是你正在声明一个函数{{1} }，这是一个不同的名称（小写'c'）。但是，将所有内容更改为click（小写）并且它将失败 - 在按钮的click或表单的onclick环境中执行脚本的上下文中，已经存在本机函数名为onsubmit的名称已定义，而是会运行。你自己的剧本不会。

这主要源于年龄。您尝试在浏览器和JavaScript中使用的功能越旧，它就越是笨拙且不那么一致，因为我们正在回到所谓的“DOM 0”无证版的Netscape与微软打架的日子，左边添加了非标准化的版块正确和中心。虽然您承认您的命名约定并不是最好的，但我建议您更好地使用它们 - 使用更长和更具描述性的名称以避免与浏览器内置的内容发生意外冲突，并且绝对避免使用类似的通用内容click以保持理智。

我知道很容易破解示例并快速将事情拼凑在一起，但这可能会导致混淆，尤其是您具有类似命名的输入和显示元素的方式，以及模糊/通用脚本名称。你需要在自己的头脑中清楚地了解事情：

哪些元素可以在任何名称出现的地方轻松识别
一个函数到底是什么（'点击'究竟是什么？'form_submit_click_handler'可能？）
确定事件执行的标准强制顺序;首先单击处理程序，首先单击表单提交，未定义？
确保您已经了解了这些函数的返回值应该是什么 - 它们重要且重要且不一致（见上文） - 需要非常小心

通常最好使用这些东西的更长版本，更高级别但更好定义的界面，即使它意味着更多的打字 - 不要偷懒！ click - 例如使用:-)将所有JavaScript事件侦听器附加到onload样式处理程序中，而不是像<element>.addEventListener那样黑客攻击DOM 0。

在样式方面，说实话，你的HTML非常糟糕 - 除了onclick和body标签的缺失关闭之外，你没有向html提供所需的属性并使用表格进行表格布局已经过时了。使用script作为“地址1”文本等等，然后使用<label>标记会更好，CSS提供宽度提示以获得所需的对齐方式。我个人经常回到基本表，因为CSS对于表格变得容易的一些基本事物来说可能是一个小猪，但在这种情况下，使用CSS和清理标记似乎很容易。这将有助于屏幕阅读器，维护并可能改善小屏幕设备上的渲染。

由Javascript覆盖的HTML

3 个答案: