Question

我正在做的事可能是愚蠢的。我想在提交时使用表单的值填充隐藏的DIV。

DIV确实打开了正确的数据，但在页面加载完成后重置。我究竟做错了什么？

这是我的测试：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content=
    "text/html; charset=us-ascii" />

    <title>Test</title>
    <script type="text/javascript">
        function test(){

            var usr = document.getElementById('user').value;
            var pwd = document.getElementById('passwd').value;

            document.getElementById('out').innerHTML = usr + " " + pwd;
            document.getElementById('out').style.display = "block";

            return true;
        }
    </script>
</head>

<body>
    <form action="" onsubmit="return test()">
        <input type="text" id="user" name="user" />
        <input id="passwd" type="text" name="passwd" /> 

        <p><input type="submit" value="Go" /></p>
    </form>

    <div id="out" style="display:none;">
    </div>
</body>

Answer 1

简短回答：

更改此

return true;

到这个

return false;

答案很长：

表单旨在在提交新页面时加载。但是，通过脚本编写，我们可以通过停止提交事件来防止此行为。这可以通过多种方式实现，但是对于您的示例，只需从处理程序返回“false”即可取消该事件，但仅如果 onsubmit 属性也返回声明（你已经拥有）。

Answer 2

onsubmit功能正在将表单提交回页面。您需要取消该事件以防止它提交数据并重新加载页面。执行此操作的简单方法是让test（）函数返回false。如果您仍希望表单提交并在div中显示数据，您需要通过AJAX或iFrame提交表单。

Answer 3

尝试替换“return true;”在函数结束时使用“return false;”。我的理由是，因为你指定了action属性但是值，它可能认为当前页面是值，因为你没有取消页面重新加载的事件。

Answer 4

您需要返回false

您会看到，onsubmit的返回值用于决定是否继续提交表单。因此，如果确实如此，页面将重新加载，并且值将丢失。如果它是假的，它就不会！

Answer 5

这一行可能是你的问题：

<form action="" onsubmit="return test()">

空白操作属性会导致页面在提交表单时弹回自身（重新加载）。您可以通过确保test（）返回false而不是true来防止这种情况，这将使表单完全不提交。

Answer 6

发布表单时，数据将丢失。你可以通过设置return true来返回false来停止发布表单，或者你可以添加一些逻辑来打印DIV id =“out”中的用户和passwd字段，如果user和passwd字段有一个，则将显示设置为block值。

Answer 7

作为替代方案，您可以使用无需提交表单即可完成工作的链接。

<a href="#" onClick="test()"> Do </a>

Answer 8

你的问题就行了你应该用页面名称或php代码填充动作来指向页面本身：我已经测试了。

在提交时显示包含表单数据的DIV

8 个答案: