How do I clear all the fields in a variable html content? (preferably with jQuery)

Question

I need to reset all the form fields in an HTML content I saved in a variable. I searched the internet and here too. But none of what I\'ve found has worked yet. It won\'t su

Answer 1

If you're using all textboxes:

for(c in document.getElementById('id_of_form').childNodes) {
    c.innerHTML = "";
}

If you're using multiple things, replace childNodes with getElementByTagName("name of tag") and filter with type.

Answer 2

Use plain old javascript:

document.forms['my_form_name'].reset()

Answer 3

I found this:

This should do the trick if the ID of your form is myform:

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

It is using the :input selector which will match all input, textarea, select and button elements. Since we are passing #myform as the second argument, it will only find inputs inside this form element. Then it filters out all buttons, submits, resets and hidden inputs using not(). Then it is using val() to set the value of the remaining fields to an empty string, and then it uses removeAttr to remove the checked and selected attribute of the fields in case you have any radio/checkbox/select inputs. Tada.

here: Resetting a multi-stage form with jQuery

EDIT: from same url: if you have default value's on your checkboxes as well use this one:

 // Use a whitelist of fields to minimize unintended side effects.
    $(':text, :password, :file, SELECT', '#myFormId').val('');  
    // De-select any checkboxes, radios and drop-down menus
    $(':input', '#myFormId').removeAttr('checked').removeAttr('selected');

is this what you were looking for?

Answer 4

This is a bit of a guess as I don't know what your mark-up looks like but jQuery 'find' may not work depending on how the html string is structured - have a look at this question -

Using jQuery to search a string of HTML

You could try looping through the 'content' string, then update each form element individually and add them to relevant container, something like -

$(content).each(function () {
   if (this.nodeName == 'INPUT') $(this).val('');
   if (this.nodeName == 'SELECT') $(this).children('option').prop('selected','');
   $("#moveto").append(this);
});

Working demo - http://jsfiddle.net/vFMWD/5/