1
I was creating a button to clear form, and I came across the function of HTML type='reset'
but I was used to using Javascript for this to occur. Therefore wanted to ask for help to understand what the difference in efficiency from one to another.
Example of reset
in 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 -->
Example of reset
in 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>
Yeah, I’m thinking about it, too
– Victor