表单提交错误答案

【问题标题】：form submit error表单提交错误
【发布时间】：2013-02-17 18:46:48
【问题描述】：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="login-box.css" rel="stylesheet" type="text/css" />
</head>
<body>

        <center>
            <table>
                <tr>
                    <td height="50px"></td>
                </tr>
            </table>
            <fieldset id="searchFS" class="legend" style="display: block">
                <legend>Search for Contact:</legend>
                <table>
                    <tr>
                        <td width="55%"></td>
                        <td><input id="contactName" name="contactName" type="text"
                            width="20px" value=""></input></td>
                        <td><input type="submit" name="Submit" value="Search"
                            class="button" onclick="getcontact()" />
                        </td>

                    </tr>
                </table>
            </fieldset>
        </center>


    <p id="para"></p>

</body>

<script>

function getcontact(){



    document.getElementById('para').innerHTML ="<table><tr><td>kkkkkkk</td></tr></table>";

}

</script>


</html>

当我按下按钮时，元素的值出现而不是在页面重新加载时消失！谁能告诉我如何解决这个问题？

【问题讨论】：

抱歉，有什么问题？

标签： javascript html forms post reload

【解决方案1】：

将"getContact()" 更改为"getContact(); return false" 以防止表单提交。

更理想的解决方案是绑定点击事件：

document.querySelector('[name="Submit"]').addEventListener('click', function (e){
    //prevent default behavior -- stop form from submitting
    e.preventDefault();

 document.getElementById('para').innerHTML ="<table><tr><td>k</td></tr></table>";
});

【讨论】：