Javascript - 如何阻止 onClick 清除表单/刷新页面？答案

【问题标题】：Javascript - how to stop onClick from wiping out the form/refreshing page?Javascript - 如何阻止 onClick 清除表单/刷新页面？
【发布时间】：2015-01-19 06:56:04
【问题描述】：

<!DOCTYPE html>
<html>
<HEAD>
    <meta charset="utf-8" />
<script language= "javascript">
    var array1 = new Array();
        function display1()
            {
            var guest_input = array1;
            var input1;
            var input2;
            var input3;
            input1 = document.form1.msg1.value;
            input2 = document.form1.msg2.value;
            input3 = document.form1.msg3.value;
            guest_input[0]=input1;
            guest_input[1]=input2;
            guest_input[2]=input3;
            for (var i=0; i<array1.length; i++) 
                {
                document.write("<ul><li>" +array1[i]+ "</li></ul>");
                }
            }
    </script>
</HEAD>
<BODY>
<form name="form1">
    Type in msg 1 : <input type="text" name="msg1"><br>
    Type in msg 2 : <input type="text" name="msg2"><br>
    Type in msg 3 : <input type="text" name="msg3"><br>
</form>
<input type="button" value="Go!" name="button1" onclick="display1()">
</BODY>

这是非常简单、非常基本的代码。我只想在我做更多工作之前让这件作品工作。

我只是希望在单击按钮后无序列表出现在表单下方，但是为什么当我单击按钮时页面会刷新/清除表单？将其更改为

  onclick="display1(); return false;"

不能解决问题。谢谢！

【问题讨论】：

您需要附加结果而不是覆盖整个文档。试试 appendChild
页面被 document.write 擦除。阅读更多w3schools.com/jsref/met_doc_write.asp
是因为document.write，它覆盖了文档的所有内容，通过查看页面源码可以看到。添加 div 之类的容器元素并将标记分配给它，请参见下面的修改代码。

标签： javascript arrays forms onclick

【解决方案1】：

因为document.write，它覆盖了文档的所有内容，你可以通过查看页面源码看到。

添加 div 之类的容器元素并将标记分配给它，请参阅下面的修改代码。

 <!DOCTYPE html>
    <html>
    <HEAD>
        <meta charset="utf-8" />
    <script type="text/javascript" language= "javascript">
        var array1 = new Array();
        function display1() {
            var guest_input = array1;
            var input1;
            var input2;
            var input3;
            input1 = document.form1.msg1.value;
            input2 = document.form1.msg2.value;
            input3 = document.form1.msg3.value;
            guest_input[0] = input1;
            guest_input[1] = input2;
            guest_input[2] = input3;
            var xx="";
            for (var i = 0; i < array1.length; i++) {
                xx = xx + "<ul><li>" + array1[i] + "</li></ul>";
            }
            document.getElementById("listcontainer").innerHTML=xx;
            return false;
        }
        </script>
    </HEAD>
    <BODY>
    <form name="form1">
        Type in msg 1 : <input type="text" name="msg1"><br>
        Type in msg 2 : <input type="text" name="msg2"><br>
        Type in msg 3 : <input type="text" name="msg3"><br>
        <input type="button" value="Go!" name="button1" onclick="return display1();">
    </form>
        <div id="listcontainer"></div>
    </BODY>
     </html>

【讨论】：

【解决方案2】：

尝试将 e.preventDefault(); 放在函数的开头，而不是标记中。或者你也可以return false。

<script language= "javascript">
    var array1 = new Array();
        function display1(e)
            {
            e.preventDefault();
            var guest_input = array1;
            var input1;
            var input2;
            var input3;
            input1 = document.form1.msg1.value;
            input2 = document.form1.msg2.value;
            input3 = document.form1.msg3.value;
            guest_input[0]=input1;
            guest_input[1]=input2;
            guest_input[2]=input3;
            for (var i=0; i<array1.length; i++) 
                {
                document.write("<ul><li>" +array1[i]+ "</li></ul>");
                }
               // you could also **return false;** here
            }

    </script>

【讨论】：

return false 在这里是个坏主意。它将停止执行其余代码。
你打算把return false具体放在哪里？
哦，我明白你的意思了。更新帖子。 return false 不是我的答案；在不需要的时候弄乱返回值是草率的。
不是我。我把我的拿回来了。

【解决方案3】：

您需要将列表附加到表单，给您的表单一个 id 并使用 jquery 附加它

<form name="form1" id="fo">
    Type in msg 1 : <input type="text" name="msg1"><br>
    Type in msg 2 : <input type="text" name="msg2"><br>
    Type in msg 3 : <input type="text" name="msg3"><br>
</form>

你的 jquery

$('#fo').append("<ul><li>" +array1[i]+ "</li></ul>")

【讨论】：

这不是一个 jQuery 问题。

【解决方案4】：

使用“appendChild”而不是“write”，因为您覆盖了 HTML：

document.getElementsByTagName('body')[0].appendChild("<ul><li>" +array1[i]+ "</li></ul>");

【讨论】：

【解决方案5】：

浏览器的默认功能是在提交表单数据时发送表单数据并刷新页面。使用event.preventDefault() 阻止刷新发生：

HTML

<input type="button" value="Go!" name="button1" onclick="display1(event)">

JS

function display1(event)
{
  event.preventDefault();
  // do rest of the stuff here
}

阅读：event.preventDefault | MDN

【讨论】：