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

When you submit a form, the entire page is replaced with the response from the server. If you want to stay on the page (rather than having it replaced by the response), you might look at using jQuery.post or jQuery.ajax to send the form data to the server rather than actually submitting the form.

Answer 2

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.

Answer 3

You can use cookies from JavaScript to keep values in. Basically you access something called document.cookie.