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

Question

当我提交此表单时,值只会从文本框中消失.我喜欢他们留在文本框中打印.我怎么做？

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

Answer 1

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

通常,您只需将HTML请求参数中的数据复制到字段中即可.

Answer 2

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