Buscar este blog

sábado, 6 de junio de 2015

JQuery - Clear all form fields

This function clears all fields in a form, keeping in mind these points:
  • It does not touch disabled or readonly elements.
  • It does not touch hidden inputs
  • In select elements, it selects the first option
  • In checkbox, it unchecks them

Code:
<script type="text/javascript">     
 var limpiar = function (form) {
  form.find(':input').each(function(){    
   if (esUnInputBorrable($(this))) {
    if ($(this).attr('type') == 'checkbox') {
     $(this).prop('checked', false);
    }
    else {
     $(this).val('');
    }
   }
  }); 
     
  form.find('select').each(function(){
   if (esUnSelectBorrable($(this))) {
    $(this).prop('selectedIndex',0);
   }
  });
   
  form.find('textarea').each(function(){
   if (esUnTextAreaBorrable($(this))) {
    $(this).val('');
   }
  });   
 }
 
 var esUnInputBorrable = function (input){   
  if (estaDeshabilitado(input)) {
   return false;
  }
  var tipo = input.attr('type');   
  return tipo != 'hidden' && tipo != 'submit' && tipo != 'reset' && tipo != 'radio' && tipo != 'button';
 }
 
 var esUnSelectBorrable = function (select){   
  if (estaDeshabilitado(select)) {
   return false;
  }
  return true;
 }
 
 var esUnTextAreaBorrable = function (textarea){   
  if (estaDeshabilitado(textarea)) {
   return false;
  }
  return true;
 }
 
 var estaDeshabilitado = function (elemento) {  
  return elemento.attr('disabled') != null || elemento.attr('readonly') != null;   
 }
</script>

And here is a HTML snippet to test it:
<form id="miForm" action ="#" method = "POST">
 <input type="hidden" value="One secret"/>
 
 <div>
  <label>Marca coche</label>
  <select name="marcas">
    <option value="">seleccione...</option>
    <option value="tesla">tesla</option>
    <option value="otherPoisonCompany1">Saab</option>
    <option value="otherPoisonCompany2">Mercedes</option>
    <option value="otherPoisonCompany3">Audi</option>
  </select>
 </div>
 <br/> 
 
 <div>
  <label>Marca coche deshabilitada</label>
  <select name="marcas" disabled>
    <option value="">seleccione...</option>
    <option value="tesla" selected="selected">tesla</option>
    <option value="otherPoisonCompany1">Saab</option>
    <option value="otherPoisonCompany2">Mercedes</option>
    <option value="otherPoisonCompany3">Audi</option>
  </select>
 </div>
 <br/> 
 
 <div>
  <label>Un campo de texto</label>
  <input type="text" id="nombre" name="nombre">
 </div>
 <br/>
 
 <div>
  <label>Un campo de texto deshabilitado</label>
  <input type="text" id="nombre2" name="nombre2" disabled="disabled" value="oops, disabled">
 </div>
 <br/>
 
 <div>
  <label>Un campo de texto readonly</label>
  <input type="text" id="nombre3" name="nombre3" readonly="readonly" value="I am read only">
 </div>
 <br/>
 
 <div>
  <input type="submit" id="submit" name="unSubmit" value="Un submit">
  <input type="reset" id="reset" name="unReset" value ="Un reset">
  <input type="button" id="buttton" name="nombre" value="Un button">
 </div>
 <br/>
 
 <div>     
  <label style="display: block">Why Tesla is the best car in the world</label>    
  <input type="checkbox" name="option1" value="eco"    checked>does not poison the world<br>
  <input type="checkbox" name="option2" value="Butter" checked>it rocks<br>
  <input type="checkbox" name="option3" value="Cheese" checked>has a lot of IT<br>
  <br/>
 </div>
 <br/>
 
 <div>
  <textarea rows="4" cols="50">Tesla rocks</textarea>
  <br/>
  <textarea rows="4" cols="50" readonly="readonly">Some readonly text</textarea>
  <br/>
  <textarea rows="4" cols="50" disabled>Tesla rocks</textarea>
 </div>
 
 <br/> 
 
 <!-- This is the triger button -->
 <button type="button" name="accion" value="clean" onclick="limpiar($(this).closest('form'))">Clean</button>
</form>

No hay comentarios:

Publicar un comentario