How to clear all input fields in a specific div with jQuery

Question

I am trying to use jQuery to do a simple thing  clear the input fields of a group of input field within a div whenever the form loads  or if the user changes a picklist  but I m having a devil of a time getting the selector to work    First  here s my onclick and onload triggers    lt form name  EditGenotype  action  process GenotypeMaint php  method  POST  onsubmit  return false  onload clear fetch    gt    and on the picklists    lt SELECT multiple size 6 NAME  marker  onchange show marker   onclick clear fetch    gt    Next  here s my HTML input elements in the div I want to clear      lt div class fetch results gt         lt fieldset gt       lt LEGEND gt  lt b gt Edit Genotype  call 1 lt  b gt  lt  LEGEND gt         lt boldlabel gt Allele 1 lt  boldlabel gt  lt input id allele 1 1 name allele 1 1 size 5  gt         lt boldlabel gt Allele 2 lt  boldlabel gt  lt input id allele 1 2 name allele 1 2 size 5  gt         lt boldlabel gt Run date lt  boldlabel gt  lt input id run date1 name run date1 size 10 disabled true gt         lt  fieldset gt         lt fieldset gt       lt LEGEND gt  lt b gt Edit Genotype  call 2 lt  b gt  lt  LEGEND gt         lt boldlabel gt Allele 1 lt  boldlabel gt  lt input id allele 2 1 name allele 2 1 size 5  gt         lt boldlabel gt Allele 2 lt  boldlabel gt  lt input id allele 2 2 name allele 2 2 size 5  gt         lt boldlabel gt Run date lt  boldlabel gt  lt input id run date2 name run date2 size 10 disabled true gt         lt  fieldset gt         lt fieldset gt       lt LEGEND gt  lt b gt Edit Genotype  call 3 lt  b gt  lt  LEGEND gt         lt boldlabel gt Allele 1 lt  boldlabel gt  lt input id allele 3 1 name allele 3 1 size 5  gt         lt boldlabel gt Allele 2 lt  boldlabel gt  lt input id allele 3 2 name allele 3 2 size 5  gt         lt boldlabel gt Run date lt  boldlabel gt  lt input id run date3 name run date3 size 10 disabled true gt         lt  fieldset gt       lt  div gt    Finally  here s my script    function clear fetch                  fetch results input     this   each function index          this value                     However  nothing happens   so  I must not have the selector correct  Does anybody see what I ve done wrong

User · Answer

Just had to delete all inputs within a div  amp  using the colon in front of the input when targeting gets most everything         divId   find   input   val

User · Answer

For some who wants to reset the form can also use type  reset  inside any form    lt form action   action page php  gt  Email   lt input type  text  name  email  gt  lt br gt  Pin   lt input type  text  name  pin  maxlength  4  gt  lt br gt   lt input type  reset  value  Reset  gt   lt input type  submit  value  Submit  gt   lt  form gt

User · Answer

Fiddle  http   jsfiddle net simple BdQvp   You can do it like so   I have added two buttons in the Fiddle to illustrate how you can insert or clear values in those input fields through buttons  You just capture the onClick event and call the function     Fires when the Document Loads  clears all input fields   document  ready function           fetch results   find  input text   val                 Custom Functions that you can call function resetAllValues           fetch results   find  input text   val         function addSomeValues           fetch results   find  input text   val  Lala         Update   Check out this great answer below by Beena as well for a more universal approach

User · Answer

Change this     lt div class fetch results gt    To this     lt div id  fetch results  gt    Then the following should work       fetch results input   each function           this value               http   jsfiddle net NVqeR

User · Answer

each     fetch results input    function idx  input       input  val

User · Answer

This function is used to clear all the elements in the form including radio button  check-box  select  multiple select  password  text  textarea  file   function clear form elements class name      jQuery     class name  find   input   each function         switch this type            case  password           case  text           case  textarea           case  file           case  select-one           case  select-multiple           case  date           case  number           case  tel           case  email               jQuery this  val                  break          case  checkbox           case  radio               this checked   false              break

User · Answer

If you wanted to stay with a class level selector then you could do something like this  using the same jfiddle from Mahn      div fetch results input text   each function       this value    testing         This will select only the text input boxes within the div with a fetch results class   As with any jQuery this is just one way to do it   Ask 10 jQuery people this question and you will get 12 answers

User · Answer

Couple issues that I see   fetch results is a class  not an Id and the each function doesn t look right       fetch results input   each function             this  val            Just be sure to remember that if you end up with radios or check buttons  you will have to clear the checked attribute  not the value

User · Answer

inspired from https   stackoverflow com a 10892768 2087666 but I use the selector instead of a class and prefer if over switch   function clearAllInputs selector        selector  find   input   each function         if this type     submit                do nothing               else if this type     checkbox     this type     radio             this checked   false                else if this type     file            var control     this           control replaceWith  control   control clone  true             else            this  val                         this should take care of almost all input inside any selector

User · Answer

Here is Beena s answer in ES6 Sans the JQuery dependency   Thank s Beena  let resetFormObject    elementID   gt            document getElementById elementID  getElementsByTagName  input   forEach  input   gt               switch input type                    case  password                   case  text                   case  textarea                   case  file                   case  select-one                   case  select-multiple                   case  date                   case  number                   case  tel                   case  email                       input value                           break                  case  checkbox                   case  radio                       input checked   false                      break

[jquery] How to clear all input fields in a specific div with jQuery?

Examples related to jquery