- 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