Is it somehow possible to restore only a part of a form? For example I want to reset everyhting in fieldset #1 but keep all other values in fieldset #2:

<form>
    <fieldset id="1">…</fieldset>
    <fieldset id="2">…</fieldset>
</form>

I could of course use a JavaScript-/jQuery-solution like this (written by heart, not tested):

$('#1 :input').val('');

But this wouldn't restore previously set default values. Or I must store all default values beforehand and I have to check for textareas, inputs, checkboxes etc … Is there another way of doing this?

Is it somehow possible to restore only a part of a form? For example I want to reset everyhting in fieldset #1 but keep all other values in fieldset #2:

<form>
    <fieldset id="1">…</fieldset>
    <fieldset id="2">…</fieldset>
</form>

I could of course use a JavaScript-/jQuery-solution like this (written by heart, not tested):

$('#1 :input').val('');

But this wouldn't restore previously set default values. Or I must store all default values beforehand and I have to check for textareas, inputs, checkboxes etc … Is there another way of doing this?

• javascript
• jquery
• html
• forms

• 2 I'm afraid there's no other way of doing it but storing initial values and setting them later :/ – scumah Commented Sep 21, 2012 at 11:43

4 Answers 4

Not sure if this is what you meant, but this will filter all fieldsets which do not have an id of two and then reset the form elements within those fieldsets to their default values (please note that defaultValue will only work for input/textareas!):

$(document).ready(function() {

  $('#btn-reset').on('click', function(e) {
    e.preventDefault();

    $('form > fieldset').filter(function() {
      return $(this).prop('id') !== 'two';
    }).children(':input').each(function() {
      $(this).val(this.defaultValue);
    });

  });
});

example markup

<form>

    <fieldset id="one">
        <input type="text" value="this is a default value" />
        <textarea>this is another default value</textarea>
        <p>this paragraph doesn't get looped over</p>
    </fieldset>

    <fieldset id="two">
        <input type="text" value="text here.." />
        <textarea>hello world!</textarea>
    </fieldset>

    <button id="btn-reset">Reset</button>

</form>

Here's a fiddle

Change all of the values, then click reset, all of the values in the first fieldset will be reset to their default values, whilst the second set will remain untouched.

There is no way of doing this without JavaScript... The reset button will always reset the whole form element.

Hope this will solve your problem

http://www.electrictoolbox./jquery-clear-form/

You can do this using KnockoutJS. Create a view model with default values.