0

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.

Peter Westerlund
  • 741
  • 1
  • 10
  • 36
  • Not according to OP, he can't use the form `id`, and he only wants to clear a specific part of the form markup. – Ibrahim AshShohail Aug 30 '11 at 08:50
  • An example of a possible page markup could prove helpful. – Ibrahim AshShohail Aug 30 '11 at 08:51
  • @Shef Before I created this question, I read http://stackoverflow.com/questions/680241/blank-out-a-form-with-jquery. But it does not answer my question. That answer shows a method in which the form's ID is required. My question is about a string variable without
    tags. So I would be grateful if you read the question properly before you close it. Now I have to create a new one.
     – Peter Westerlund Aug 30 '11 at 15:09

4 Answers4

0

Use plain old javascript:

document.forms['my_form_name'].reset()
Clement Herreman
  • 10,274
  • 4
  • 35
  • 57
0

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?

Community
  • 1
  • 1
Karel-Jan Misseghers
  • 797
  • 8
  • 31
  • look on @powers1 answer in this link – Haim Evgi Aug 30 '11 at 08:27
  • need to fix // 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'); – Haim Evgi Aug 30 '11 at 08:28
  • @Haim Evgi I can't use the form ID. I don't want all the fields in the form to be reset. It's just all the fields within a specific list element. – Peter Westerlund Aug 30 '11 at 08:39
  • give all your list items the same class and then, through jquery, give that class the value .val(''); ? – Karel-Jan Misseghers Aug 30 '11 at 08:51
0

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.

Dhaivat Pandya
  • 6,499
  • 4
  • 29
  • 43
0

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/

Community
  • 1
  • 1
ipr101
  • 24,096
  • 8
  • 59
  • 61
  • This is the only answer that feels like the right way to go. But is not quite there yet. I tried the method, but it cleared all the fields in the form. I want the fields only in the text sting that will be added to be cleared. – Peter Westerlund Aug 30 '11 at 09:01
  • So it didn't just clear the form fields in the 'content' string - but all the form fields on the page as well? – ipr101 Aug 30 '11 at 09:06
  • What's in the 'content' string - this is moving away from the original answer, but could you just use a regex find replace to replace 'value="something"' with 'value=""'? – ipr101 Aug 30 '11 at 09:40
  • I'm not so good at regex. And there is just at snippet of HTML code in the content string. No
    tags. But there is input and select tags.
     – Peter Westerlund Aug 30 '11 at 09:48
  • No, I have not solved the problem yet. And now the question is closed. – Peter Westerlund Aug 30 '11 at 15:10
  • I could still edit my answer. Where do you need to append the 'content' string to - is it a div? – ipr101 Aug 30 '11 at 15:23
  • No, it's a list element.
  • content
    • – Peter Westerlund Aug 30 '11 at 15:26
  • Shame :( Did you replace "#moveto" with the id of your li? – ipr101 Aug 30 '11 at 16:14
  • I did like this:`$(content).each(function () { if (this.nodeName == 'INPUT') $(this).val(''); if (this.nodeName == 'SELECT') $(this).children('option').prop('selected',''); }); $(this).prev('.listset').find('ol.multiple:last').append(content);` – Peter Westerlund Aug 30 '11 at 16:16
  • That's not quite right, you need to add the elements into the 'li' within the loop that is looping round the elements within the 'content' string. So this line `$(this).prev('.listset').find('ol.multiple:last').append(content)` needs to be inside the loop not outside. You'll need to alter the '$(this)' part though. – ipr101 Aug 30 '11 at 17:21
  • But then the $(this) part means another thing inside? – Peter Westerlund Aug 30 '11 at 17:24
  • Yes it does, you'll need to save a reference to `$(this)` before you enter the loop then use that inside the loop. – ipr101 Aug 30 '11 at 17:27
  • Well, it wont work anyway.. :( Does jQuery's `:reset` has to be used only with the
    element?
     – Peter Westerlund Aug 30 '11 at 18:00
  • You should be able to do it without the '.reset', the form gets reset without that in the jsfiddle I posted. Sorry I couldn't help you get it working. – ipr101 Aug 30 '11 at 18:11