如何通过浏览器刷新来防止重复表单提交

时间:2013-07-20 07:23:25

标签: html html-form

我使用invision电源板我为管理控制面板添加了一个小插件。在这个插件中用于更改DB i添加表单中的某些值。当我提交表格时,所有确定,但当我用F5重新加载所有页面时,表格再次提交。

有我的代码

<form method="post" id='xp_form' name='xp_form' enctype="multipart/form-data" action="" style='margin: 5px;'>
                    <label style='font-weight: bold;'>New value</label>
                    <p style='margin-top: 3px;'>
                        <input size="5" maxlength="7" name="xpValue" value="" tabindex="1" style='width: 98%; border-radius: 7px;'>
                    </p>
                    <fieldset style='text-align: center;border-top: 1px solid #ccc;margin-top:5px;'>
                        <input value='Cancel' name='xn_value' onclick='closeEdit()' type='button' style='padding: 4px;cursor: pointer;-webkit-border-radius: 4px; border-radius: 4px;border-color: #2b2b2b;'> &nbsp;
                        <input value=' Save ' type='button' onclick='return testPost()' style='padding: 4px;cursor: pointer;-webkit-border-radius: 4px; border-radius: 4px;border-color: #2b2b2b;'>
                        </fieldset>
                </form>

和表单提交的JavaScript代码

document.forms["xp_form"].submit(); //first submit
                        document.forms["xp_form"].reset(); //and then reset the form values

我无法重定向到另一个页面或禁用提交按钮。让我解释。我用cms。对于仪表板,我添加了插件 - &gt; image。当管理员选择行并单击按钮时,铅笔图标显示弹出窗口。在此窗口中,管理员可以编辑值,然后保存值,然后编辑其他记录

4 个答案:

答案 0 :(得分:0)

重定向到未提交的网页是最简单的方法之一。

答案 1 :(得分:0)

如果您仍在使用JavaScript,则可以禁用“提交”按钮并向服务器发送AJAX帖子。如果请求失败,您可以再次启用按钮,如果成功,您可以在不启用按钮的情况下重定向用户。

secend选项是编写服务器代码,以便在发布数据时处理表单并将重定向发送给用户另一个不支持发布的页面(如“谢谢”页面)。

答案 2 :(得分:0)

如果您有权访问处理POSted值的代码,则可以允许重新提交但是只有在数据库值与之前发布的值不同时才更新数据库值。

要做到这一点,你需要记住以前的值,可能是通过使用会话或cookie,或者每次存储POSTed值(或者使用md5(value))的隐藏输入。在处理过程中,您可以将接收到的值与之前记住的值进行比较,如果这些值不同,则只调用数据库更新代码。

答案 3 :(得分:-1)

这就是我的方式,它完美无缺。我将数据提交给服务器端处理程序,比如temp.php(更改为处理程序)。 Handler在会话中存储$ _POST或$ _GET变量。我相信每个服务器端技术都有一些会话处理。然后立即重定向到您希望用户在页面提交后的页面(在php中,这是使用header()调用完成的)。这通过刷新解决了多个提交。

如果您不希望将用户重定向到其他页面,请在提交后使用带有禁用/启用提交按钮的ajax并清除表单字段。