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

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

javascript arrays forms

Javascript-如何阻止onClick擦除表单/刷新页面？,javascript,arrays,forms,onclick,Javascript,Arrays,Forms,Onclick,这并不能解决问题。谢谢大家! 浏览器的默认功能是在提交表单数据时发送表单数据并刷新页面。使用event.preventDefault（）停止刷新： HTML 阅读以下内容：使用“”而不是“”，因为您覆盖了HTML： function display1(event) { event.preventDefault(); // do rest of the stuff here } document.getElementsByTagName（'body'）[0].appendChild（“”

这并不能解决问题。谢谢大家!

浏览器的默认功能是在提交表单数据时发送表单数据并刷新页面。使用

event.preventDefault（）

停止刷新：

HTML

阅读以下内容：

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

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

document.getElementsByTagName（'body'）[0].appendChild（“”+array1[i]+””）；

您需要将列表追加到表单中，为表单提供一个id，然后使用jquery追加它

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


输入消息1:

输入消息2:

输入消息3:

您的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>

$（“#fo”）。追加（“”+array1[i]+””）

尝试放置

e.preventDefault（）在函数开头，而不是在标记中。或者您也可以执行返回false

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


var array1=新数组（）；
功能显示1（e）
{
e、 预防默认值（）；
var来宾_输入=阵列1；
var输入1；
var输入2；
var输入3；
input1=document.form1.msg1.value；
input2=document.form1.msg2.value；
input3=document.form1.msg3.value；
来宾_输入[0]=输入1；
来宾_输入[1]=输入2；
来宾_输入[2]=输入3；
对于（var i=0；iits for document.write，它覆盖了文档的所有内容，您可以通过查看页面源代码看到这一点
添加像div这样的容器元素并为其指定标记，请参见下面修改的代码
<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>


var array1=新数组（）；
函数display1（）{
var来宾_输入=阵列1；
var输入1；
var输入2；
var输入3；
input1=document.form1.msg1.value；
input2=document.form1.msg2.value；
input3=document.form1.msg3.value；
来宾_输入[0]=输入1；
来宾_输入[1]=输入2；
来宾_输入[2]=输入3；
var xx=“”；
对于（变量i=0；i”+array1[i]+“”；
}
document.getElementById（“listcontainer”）.innerHTML=xx；
返回false；
}
输入消息1:

输入消息2:

输入消息3:

您需要附加结果，而不是覆盖整个文档。请尝试appendChild，而不是document.write擦除页面。由于document.write覆盖了文档的所有内容，您可以通过查看页面源看到这一点。添加容器元素（如div）并为其分配标记，请参阅修改后的c下面的ode。return false
在这里是个坏主意。它会阻止其余代码的执行。你打算把return false放在哪里？哦，我明白你的意思。更新的帖子。return false不是我的答案；在不需要的时候弄乱返回值是草率的。不是我。我已经收回了我的。这不是jQuery问题N
<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>

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

<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>

 <!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>