Fazendo o envio dos valores dos campos input através de JQuery para uma página PHP consigo efetuar a ação sem dar "refresh" na página principal porém, não consigo fazer com que os campos input voltem a ficar "vazios"?!? Como aplicar então o "reset" após a submissão?
HTML:
<div id='status'></div>
<form id="new_user" method="post" action="javascript:func()">
<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='enviar'/>
<br />
</form>
CSS:
#status{
position:absolute;
width: 150px;
height: 30px;
top: 150px;
left:10px;
border: 1px solid black;
color: red;
}
JQuery:
$(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='Enviando'/></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("");
}
});
});
});