Javascript - 如何阻止 onClick 擦除表单/刷新页面

Javascript - how to stop onClick from wiping out the form/refreshing page?

本文关键字：刷新 表单 擦除 何阻止 onClick Javascript      更新时间：2023-09-26
<!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;"

不能解决问题。谢谢！

你需要将列表附加到表单中，给你的表单一个 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>")

浏览器的默认功能是在提交表单数据时发送表单数据并刷新页面。使用 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 |多核

使用"appendChild"而不是"write"，因为您可以覆盖 HTML：

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

尝试将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>

因为它的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>
相关文章：