使用javascript提交表单后如何保留表单数据？答案

【问题标题】：how do i keep form data after submitting the form using javascript?使用javascript提交表单后如何保留表单数据？
【发布时间】：2010-04-08 09:54:11
【问题描述】：

当我提交此表单时，这些值会从文本框中消失。我喜欢它们留在文本框中。我该怎么做？

<form id="myform" method="get" action="" onSubmit="hello();">

       <input id="hour" type="text" name="hour" style="width:30px; text-align:center;" /> :
       <input id="minute" type="text" name="minute" style="width:30px; text-align:center;" />
       <br/>
       <input type="submit" value="Validate!" />
    </form>

    <style type="text/css">
    .error {
        color: red;
        font: 10pt verdana;
        padding-left: 10px
    }
    </style>
<script type="text/javascript">
function hello(){

    var hour = $("#hour").html();
    alert(hour);
}
    $(function() {
        // validate contact form on keyup and submit
        $("#myform").validate({
            //set the rules for the fild names
            rules: {
                hour: {
                    required: true,
                    minlength: 1,
                    maxlength: 2,
                    range:[0,23]
                },
                minute: {
                    required: true,
                    minlength: 1,
                    maxlength: 2,
                    range:[0,60]
                },
            },
            //set messages to appear inline
            messages: {
                hour: "Please enter a valid hour",
                minute: "Please enter a valid minute"
            }
        });


    });
    </script>

【问题讨论】：

你想把这些数据保存在哪里？你想用这些数据做什么？请详细解释你的问题。
感谢 cmets，当我提交上述表格时，这些值会从文本框中消失，我希望它们保持打印在文本框中，我该怎么做？非常感谢

标签： javascript forms

【解决方案1】：

当您提交表单时，整个页面将替换为来自服务器的响应。如果您想留在页面上（而不是将其替换为响应），您可以考虑使用 jQuery.post 或 jQuery.ajax 将表单数据发送到服务器，而不是实际提交表单。

【讨论】：

这听起来很有趣，我会谷歌一下看看如何做 jquery.post 并给你一个反馈
@Lina：小心你看到的几篇“使用 jQuery 提交表单”的文章，你会看到很多这样的东西：var q = "?fname=" + $('#firstNameField').val() + "&lname=" + $('#lastNameField').val()";好东西。您真的，真的需要通过encodeURIComponent 对这些参数值进行编码，您不能像在该代码中那样只获取它们。（考虑一下如果你有一个“公司名称”字段并且有人输入值“Foo & Bar Limited”会发生什么——& 确实需要编码。）这并不复杂，但人们会错过它。享受吧！
这是一个很好的建议，我将永远感激 :)

【解决方案2】：

提交页面后，数据会立即发送到服务器并加载新页面。在您的情况下，这是与以前相同的页面，但这对浏览器没有影响。要保留这些值，您必须在渲染页面时填写服务器上的值。

通常，您可以简单地将 HTML 请求参数中的数据复制到字段中。

【讨论】：

通常，您不能简单地将 HTML 请求参数复制到字段中。您必须先对它们进行 HTML 转义，否则您的页面将对 XSS 攻击敞开大门。
嗯？当您阅读参数时，您的 HTML 框架应该已经为您解码了它们。当您将它们写出来时，您的输出编写器应该正确编码它们。我不明白你的意思。

【解决方案3】：

在表单标签中，包含onsubmit ="return false" 以避免表单重置。例如：

<form name = "inputNumbers" onsubmit ="return false">

【讨论】：

这不行...提交功能这样被禁用了
它满足我的情况。谢谢，我只使用表单进行必要的验证，请求我使用 Ajax 调用

【解决方案4】：

您可以使用 JavaScript 中的 cookie 来保存值。基本上您可以访问名为 document.cookie 的东西。

【讨论】：

【解决方案5】：

例如，在文本输入中保留数据：

<input type="text" name="inputText" id="inputText" placeholder="Enter the name of your all-time favorite Duckbilled Platypus" value="@Request["inputText"]" autofocus style="display: inline-block;" />

【讨论】：