I have a table with input in it. There are input with default value and there are input without default value. I want to reset the input value into their default value on button click. I wont do the

$('#tableid').find('input[type=text]').val('');

Because as i said there are input with default value and i dont want to mess up the value of the input.

I also tried reset() like

$('#tableid').find('input[type=text]').reset();

but i get an error saying reset is not a function

Is there a way to reset the input inside the a table without form.

I have a table with input in it. There are input with default value and there are input without default value. I want to reset the input value into their default value on button click. I wont do the

$('#tableid').find('input[type=text]').val('');

Because as i said there are input with default value and i dont want to mess up the value of the input.

I also tried reset() like

$('#tableid').find('input[type=text]').reset();

but i get an error saying reset is not a function

Is there a way to reset the input inside the a table without form.

• javascript
• jquery

• 1 find should be .find – Magicprog.fr Commented Jul 2, 2015 at 11:42
• 1 Why are you escaping double quotes in a single quoted string? 'input[type="text"]' works fine. – Oka Commented Jul 2, 2015 at 11:43
• sorry typo error @Magicprog.fr – guradio Commented Jul 2, 2015 at 11:43
• 1 If you use the placeholder attribute, resetting the value to '' will work fine. – Rory McCrossan Commented Jul 2, 2015 at 11:44
• Check this it may help you – public FileResult Duser3230921 Commented Jul 2, 2015 at 11:46

3 Answers 3

Try this : store default value as data in the input box as shown below

<input type="text" data-default="your default value" value="your default value">

and run below code on button click

$('#tableid').find('input[type=text]').each(function(){
      var defaultVal = $(this).data('default');
      $(this).val(defaultVal);
});

Example

$(function(){
    $('#resetBtn').click(function(){
       $('#tableid').find('input[type=text]').each(function(){
      var defaultVal = $(this).data('default');
      $(this).val(defaultVal);
       });
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableid">
    <tr><td><input type="text" data-default="first Default" value="first Default"></td></tr>
    <tr><td><input type="text" data-default="Second Default" value="second Default"></td></tr>
    <tr><td><input type="text" data-default="third Default" value="third Default"></td></tr>
</table>
        
<input type="button" value=" RESET " id="resetBtn">

Use this to get the first HTML element by passing 0 to .get():

$('#tableid').find('input[type="text"]').get(0).reset();

Or (same but a bit shorter) :

$('#tableid').find('input[type="text"]')[0].reset();

HTML

<table id="test">
    <tr>
        <td><input type="text" data-default="test1" /></td>
        <td><input type="text" data-default="test2" /></td>
        <td><input type="text" data-default="test3" /></td>
    </tr>
</table>
<button id="clickme">Click me</button>

jQuery

$("#clickme").on("click",function(){
    $('#test').find('input[type=text]').each(function(){
        $(this).val($(this).attr("data-default"));
    });
});

JS Fiddle