How to restore Textbox Data

Question

I have a small requirement,

We have restore the textbox data that was cleared previously.
Below is my HTMl code

<table>
   <tr><td><input type="textbox"></td></tr>
   <tr><td><input type="checkbox"></td></tr>
</table>

Here is my JQuery Code

       $('TABLE TR TD').find(':checkbox').change(function()
        {
            if($(this).prop('checked'))
            {
               $(this).parents('TR').siblings('TR').find('input').val("")
            }
            if(!$(this).prop('checked'))
            {
               $(this).parents('TR').siblings('TR').find('input').val(?)
            }
        });

My Requirement is to clear the textbox content if checkbox is checked. And if i deselect it the textbox should be restored with previous data.

Please someone help me.

Where's the 'previous data' supposed to come from; is it a value the user enters, or from a `value` attribute? — David Thomas, Jul 05 '11 at 11:34
`type="textbox"` is not valid for [``](http://www.w3.org/TR/html4/interact/forms.html#h-17.4). It should just be `type="text"` — andyb, Jul 05 '11 at 11:57
I've updated my demo based on your other question http://stackoverflow.com/questions/6595321/keydown-event-is-not-working-properly — andyb, Jul 06 '11 at 11:15

score 2 · Accepted Answer · answered Jul 05 '11 at 11:33

2

Use a global variable to store the previous data -

var prevData;

then modify your code this way -

$('TABLE TR TD').find(':checkbox').change(function()
{
    if($(this).prop('checked'))
    {
        var $element = $(this).parents('TR').siblings('TR').find('input')
        prevData = $element.val();
        $element.val("");
    }
    else
    {
        $(this).parents('TR').siblings('TR').find('input').val(prevData);
    }
});

answered Jul 05 '11 at 11:33

MD Sayem Ahmed

28,628
27
111
178

btw. the 'onChange' event should be never associated to a radio or checkbox field. Some browsers will go into trouble. Use 'onClick' instead. – Reporter Jul 05 '11 at 11:36
@reporter: jQuery fixes those sorts of browser issues. – user113716 Jul 05 '11 at 11:39
@patrick And yet you can make it for jquery easier if you write 'correct code' first. ;-) – Reporter Jul 05 '11 at 11:42
@reporter, any chance you could cite a source for that comment? It's not something I've come across before (please note that I'm not disagreeing with you, but I'd be interested to learn more about it, particularly since my own posted answer relies on the `change()` method too). – David Thomas Jul 05 '11 at 11:44
@David 1st That's my own experience 2nd I know it from other users they went into trouble with this event. 3rd Unfortunatly I have only a german/french source. On this page the author(s) has written that the InternetExplorer has got a bug that he fires this too earlie so the state change won't be transfer to the DOM tree. – Reporter Jul 05 '11 at 12:39
@reporter: thank you for heads-up! I'll try and keep an eye out for an English-language discussion on the subject =) – David Thomas Jul 05 '11 at 12:42

score 1 · Answer 2 · edited May 23 '17 at 12:19

When the checkbox is being checked, before clearing the value, store it using the jQuery .data() API.

<table>
   <tr><td><input type="text"></td></tr>
   <tr><td><input type="checkbox"></td></tr>
</table>

$('input:checkbox').change(function() {
    var input = $(this).closest('table').find('input[type="text"]');

    if ($(this).prop('checked')) {
        input.data('text', input.val());
        input.val('');
    } else {
        input.val(input.data('text'));
    }
});

A demo which works if there were multiple pairs, so long as they exist in separate <table> parents. You could change the finder to get the previous sibling if that were not the case. This uses no global variables which are not really best practice - How to avoid global variables in JavaScript?.

Edit: Updated demo based on your other question Keydown event is not working properly but this will only for key events and not if someone pastes text into the <input>.

David Thomas · Answer 3 · 2011-11-09T22:18:05.573

I'd suggest something a little less reliant on the mark-up remaining the same (though it does require that the checkbox follows the text input):

var prevData, textInputIndex;
$('input:checkbox').change(
    function(){
        thisIndex = ($(this).index('table input') - 1);
        textInput = $('table input').eq(thisIndex);
        if ($(this).is(':checked')) {
            prevData = $(textInput).eq(thisIndex).val();
            $(textInput).eq(thisIndex).val('');
        }
        else {
            $(textInput).eq(thisIndex).val(prevData);
        }
    });

JS Fiddle demo.

Edited to remove the problem of having only one variable to store the text-input value:

var $textInputs = $('table input:text');
var prevData, textInputIndex, affectedTextInputIndex, textInputValues = [];

$('input:checkbox').change(
    function(){
        affectedTextInputIndex = $(this).index('table input') - 1;
        textInputIndex = $('table input').eq(affectedTextInputIndex).index('table input:text');

        if ($(this).is(':checked')) {
            textInputValues[textInputIndex] = $textInputs.eq(textInputIndex).val();
            $textInputs.eq(textInputIndex).val('');
        }
        else {
            $textInputs.eq(textInputIndex).val(textInputValues[textInputIndex]);
        }
    });

JS Fiddle demo.

Edited to remove the explicit requirement that the input elements be contained in a table:

var $textInputs = $('input:text');
var prevData, textInputIndex, affectedTextInputIndex, textInputValues = [];

$('input:checkbox').change(
    function(){
        affectedTextInputIndex = $(this).index('input') - 1;
        textInputIndex = $('ul input').eq(affectedTextInputIndex).index('input:text');

        if ($(this).is(':checked')) {
            textInputValues[textInputIndex] = $textInputs.eq(textInputIndex).val();
            $textInputs.eq(textInputIndex).val('');
        }
        else {
            $textInputs.eq(textInputIndex).val(textInputValues[textInputIndex]);
        }
    });

JS Fiddle demo.

References:

How to restore Textbox Data

3 Answers3

Linked