Question

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

当按下按钮时，元素的值显示比页面重新加载时消失！有谁能告诉我如何解决这个问题？

Answer 1

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

更理想的解决方案是绑定到click事件：

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>";
});

表单提交错误

1 个答案: