I have a popup form with 4 textboxes, all of which have default values when the page loads.

Here's the scenario... The user has filled in the form with their details but decides not to submit the form and closes the popup. I want the values of the textboxes to revert to their default values when the user close the popup.

Here's my code so far.

$(".close").click( function() {
    $(".popup").find("input").val("Default value of textbox");
});

Rather than inserting "Default value of textbox" as the value, I want it to be the actual default value.

I have a popup form with 4 textboxes, all of which have default values when the page loads.

Here's the scenario... The user has filled in the form with their details but decides not to submit the form and closes the popup. I want the values of the textboxes to revert to their default values when the user close the popup.

Here's my code so far.

$(".close").click( function() {
    $(".popup").find("input").val("Default value of textbox");
});

Rather than inserting "Default value of textbox" as the value, I want it to be the actual default value.

• javascript
• jquery
• textbox
• default-value

Share Improve this question Follow asked Nov 4, 2011 at 12:54 TomTom 13k5050 gold badges153153 silver badges247247 bronze badges 2

• 2 isn't this what <input type='reset' /> is for? – kͩeͣmͮpͥ ͩ Commented Nov 4, 2011 at 12:59
• you could use the form inputs "defaultValue" property ? appnovation./blog/… – cyberjar09 Commented Feb 27, 2015 at 2:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You could put the default values in a 'data attribute' on the elements themselves...I'll create a fiddle to show this... As seen in this jsFiddle

I should also note that you can put the data attribute on the elements from the server...I'm just showing how you could do it all from the client...

                // First store all the default values
                var def_vals = [];

                jQuery('#popup input[type="text"]').each(

                    function () {

                        def_vals[jQuery(this).attr('name')] = jQuery(this).val();

                    }
                );

                alert(def_vals['test']);

            // Restore defaults on close



            jQuery('#popup .closeButton').click( function () {

                jQuery('#popup input[type=text]').each(

                    function() {

                        jQuery(this).val(def_vals[jQuery(this).attr('name')]);

                    }

                );

            });

By way of closure

// add to the place that opens the popup
$(".popup input").one(function(){
   var value = $(this).val();
   var that = this;
   $(".close").one(function(){
      $(that).val(value);
   });
});