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>

where do you want to keep that data?what you want to do with that data?pleas eexplain your question in detail. — Salil
– Salil, Commented Apr 8, 2010 at 9:56
thanks for the comments, when i submit the above form, the values just disappears from the textboxes, i like them to stay printed in the textboxes, how do i do that? many thanks — bombo
– bombo, Commented Apr 8, 2010 at 9:58

Aaron Digulla · Accepted Answer · 2010-04-08 10:05:15Z

12

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.

answered Apr 8, 2010 at 10:05

Aaron Digulla

330k111 gold badges626 silver badges840 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tomalak Over a year ago

Usually, you cannot simply copy the HTML request parameters into the fields. You must HTML-escape them first, or your page will be wide open to XSS attacks.

Aaron Digulla Over a year ago

Huh? When you read the parameters, your HTML framework should have decoded them for you. When you write them out, your output writer should encode them properly. I don't see your point.

T.J. Crowder · Accepted Answer · 2010-04-08 10:04:10Z

6

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.

answered Apr 8, 2010 at 10:04

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

3 Comments

bombo Over a year ago

This sounds really interesting, i'll google a bit to see how to do the jquery.post and give you a feedback

T.J. Crowder Over a year ago

@Lina: Be wary of several of the "submitting a form using jQuery" articles you see out there, you'll see a lot of things like this: var q = "?fname=" + $('#firstNameField').val() + "&lname=" + $('#lastNameField').val()"; presented as though they were a good thing. You really, really need to encode those parameter values via encodeURIComponent, you can't just grab them as in that code. (Consider what would happen if you had a "company name" field and someone put in the value "Foo & Bar Limited" -- that & really needs encoding.) It's not complicated, but people miss it out. Enjoy!

bombo Over a year ago

that is a great advice that i will always appreciate :)

Ashwath Padmashali · Accepted Answer · 2017-12-05 18:31:37Z

2

In the form tag, include onsubmit ="return false" to avoid form reset. For example:

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

answered Dec 5, 2017 at 18:31

Ashwath Padmashali

3233 silver badges7 bronze badges

2 Comments

Harvey Dent Over a year ago

This doesn't work... Submit function is disabled in this way

gobi Over a year ago

it satisfy my case. thank you ,where i use form only for required validation and for request i use Ajax call

user181548 · Accepted Answer · 2010-04-08 10:07:33Z

0

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

answered Apr 8, 2010 at 10:07

user181548

Comments

B. Clay Shannon-B. Crow Raven · Accepted Answer · 2013-05-23 03:50:42Z

0

As an example, to retain the data in a text input:

<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;" />

answered May 23, 2013 at 3:50

B. Clay Shannon-B. Crow Raven

10.8k158 gold badges508 silver badges909 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related