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 success even with the simplest method for just text fields:
var content = $(this).prev('.listset').find('ol.multiple > li:last').html();
$(content).find('input[type=text]').val('');
I do not have a form id available.
Use plain old javascript:
document.forms['my_form_name'].reset()
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?
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.
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/