Сброс поля ввода после отправки с Jquery
Делаем отправки значения поля ввода с помощью JQuery на страницу PHP, я могу предпринять действия, не давая "обновить" на главной странице, но не могу сделать поля ввода вновь не остаться "пустыми"?!? Как применить затем "reset", после представления?
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("");
}
});
});
});
5 answers
Сняв все поля формы:
$(':input','#form')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
, Сбросив начальные значения формы:
$('#form')[0].reset();
Теперь вам нужно просто выбрать одно из решений и добавить после того, как его $.post().
Пример в JSFiddle
Дополняя предыдущий ответ, чтобы оставить функции более общим, используя только javascript, ниже код, который работает для других типов ввода.
var elements = document.getElementsByTagName("input");
for (var i=0; i < elements.length; i++) {
if (elements[i].type == "text") {
elements[i].value = "";
}
else if (elements[i].type == "radio"){
elements[i].checked = false;
}
else if (elements[i].type == "checkbox"){
elements[i].checked = false;
}
else if (elements[i].type == "select") {
elements[i].selectedIndex = 0;
}
}
И Используйте следующим образом:
var elements = document.getElementsByTagName("input");
for (var i=0; i < elements.length; i++) {
if (elements[i].type == "text") {
elements[i].value = "";
}
}
Вы можете использовать встроенный метод JavaScript reset() для сброса всей формы в состояние по умолчанию.
Например:
$("#myForm')[0].reset();
Примечание: Это не может сбросить некоторые поля, такие как type = "hidden".
Такой же вещь может быть выполнена с использованием триггеров jQuery():
$("#myForm').trigger("reset");
Попробуйте выполнить поиск в stackoverflow, есть различные темы, охватывающие те же
, Используя JQuery -
$('#form').each(function () {
this.reset();
});