how do i keep form data after submitting the form using javascript?

Question

When i submit this form, the values just disappears from the textboxes. I like them to stay printed in the textboxes. How do i do that?

<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

As soon as you submit the page, the data is sent to the server and a new page is loaded. In your case, this is the same page as before but that doesn't make a difference for the browser. To keep the values, you must fill in the values on the server while rendering the page.

Usually, you can simply copy the data from the HTML request parameters into the fields.