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, Apr 08 '10 at 09: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, Apr 08 '10 at 09:58

score 12 · Answer 1 · answered Apr 08 '10 at 10:05

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 08 '10 at 10:05

Aaron Digulla

321,842
108
597
820

1

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. – Tomalak Apr 08 '10 at 10:10
2

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. – Aaron Digulla Apr 08 '10 at 12:16

score 6 · Accepted Answer · answered Apr 08 '10 at 10:04

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 08 '10 at 10:04

T.J. Crowder

1,031,962
187
1,923
1,875

This sounds really interesting, i'll google a bit to see how to do the jquery.post and give you a feedback – bombo Apr 08 '10 at 11:01
2

@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! – T.J. Crowder Apr 08 '10 at 11:59
that is a great advice that i will always appreciate :) – bombo Apr 09 '10 at 13:09

score 1 · Answer 3 · answered Dec 05 '17 at 18:31

1

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

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

answered Dec 05 '17 at 18:31

Ashwath Padmashali

173
2
6

1

This doesn't work... Submit function is disabled in this way – Harvey Dent Feb 28 '18 at 00:36
it satisfy my case. thank you ,where i use form only for required validation and for request i use Ajax call – gobi Sep 10 '18 at 14:18

score 0 · Answer 4 · answered May 23 '13 at 03:50

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 '13 at 03:50

B. Clay Shannon-B. Crow Raven

8,547
144
472
862

score 0 · Answer 5 · answered Apr 08 '10 at 10:07

0

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

answered Apr 08 '10 at 10:07

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

5 Answers5

Linked

Related