Question

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?

Answer 1

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.