- 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