Estava criando um botão para limpar formulário, e me deparei com a função do HTML type='reset'
mas eu era acostumado a utilizar JavaScript para isto ocorrer. Portanto queria pedir auxílio para entender qual a diferença de eficiência de um para outro.
Exemplo de reset
em HTML
<form method="POST" action="">
<br>
<div class="col-lg-12">
<div class="col-lg-4"><!-- Inicio Input Código -->
<label for="ex1">Codigo: </label>
<input type="text" class="form-control" id="codigo" codigo="codigo" size="60"><br>
</div><!-- FimInput Código -->
</div>
<div class="col-lg-12">
<div class="col-lg-4"><!-- Inicio Input Usuário -->
<label for="ex1">Usuário: </label>
<input type="text" class="form-control" id="usuario" codigo="usuario" size="40"><br>
</div><!-- Fim Input Usuário -->
<div class="col-lg-8"><!-- Inicio Input Senha Antiga -->
<label for="ex1">Senha Aniga: </label>
<input type="text" class="form-control" id="senha" codigo="senha_antiga" size="40"><br>
</div><!-- Fim Input Senha Antiga -->
</div>
<input type="reset" value='Limpar Tela'>
</form><!-- Fim do formulario -->
Exemplo de reset
em JavaScript
$(function($) {
// Quando o formulário for enviado, essa função é chamada
$("#new_user").submit(function() {
// Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação
var name = $("#name").val();
var mail = $("#mail").val();
var password = $("#password").val();
// Exibe mensagem de carregamento
$("#status").html("<center><img src='core/img/loader.gif' alt='Enviado'/></center>");
// Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST
$.post('#', {name: name, mail: mail, password: password }, function(resposta) {
// Quando terminada a requisição
// Exibe a div status
$("#status").slideDown();
// Se a resposta é um erro
if (resposta != false) {
// Exibe o erro na div
$("#status").html(resposta);
}
// Se resposta for false, ou seja, não ocorreu nenhum erro
else {
// Exibe mensagem de sucesso
$("#status").html("<center>Cadastro realizado com sucesso!</center>");
// Limpando todos os campos
$("#name").val("");
$("#mail").val("");
$("#password").val("");
}
});
//limpar form
$(':input',this)
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
//this.reset();
});
});
#status{
position:absolute;
width: 150px;
height: 30px;
top: 150px;
left:10px;
border: 1px solid black;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id='status'></div>
<form id="new_user" method="post" action="javascript:;">
<input type='text' name='name' id='name'/>
<br />
<input type='text' name='mail' id='mail'/>
<br /><input type='password' name='password' id='password'/>
<br /><input type='submit' name='submit' id='submit' value='Limpar Tela'/>
<br />
</form>