Как сбросить (очистить) форму через JavaScript?

124

Я пробовал, $("#client.frm").reset();но это не работает. Как сбросить форму через jQuery?

javascript jquery

— akuzma
источник

Возможный дубликат stackoverflow.com/questions/680241/blank-out-a-form-with-jquery

— svk

6

Примечание. Очистить и сбросить - это разные вещи. Reset ( .reset()) вернет значения к исходным значениям в HTML. Для этого см. Решение Ника Крейвера ниже. «Очистить» обычно означает вернуть значения пустым / не отмеченным / невыбранным; см. решение MahmoudS.

— Люк

258

form.reset() является методом элемента DOM (а не для объекта jQuery), поэтому вам необходимо:

$("#client.frm")[0].reset();
//faster version:
$("#client")[0].reset();

Или без jQuery:

document.getElementById("client").reset();

— Ник Крейвер
источник

4

Мой мозг только что расширился, спасибо: «Объект jQuery - это подобная массиву оболочка вокруг одного или нескольких элементов DOM. Чтобы получить ссылку на фактические элементы DOM (вместо объекта jQuery), у вас есть два варианта. Первый (и самый быстрый) метод - использовать нотацию массива: $ ("#foo") [0]; // Эквивалентно document.getElementById ("foo") Второй метод - использовать функцию .get (): $ ("#foo ") .get (0); // Как и выше, только медленнее." learn.jquery.com/using-jquery-core/faq/…

— Эндрю

Я получаю следующую ошибку: TypeError: document.getElementById (...). Reset не является функцией [Подробнее]. Я использую плагин FormValidate для формы. его resetForm тоже не сбрасывает форму = (Есть предложения?

— Евгений Коньков

Юджин, вот где, как и в случае с Индианой Джонсом и «Последний крестовый поход», вы должны совершить прыжок веры. Если вы вызовете document.getElementById ('myform'). Reset (), он фактически очистит форму, даже если этот метод, похоже, не существует. Типичная обфускация M $.

— Newclique

43

Вы можете просто сделать:

$("#client.frm").trigger('reset')

— user2057484
источник

1

a Triggerпереносит меня в новый мир

— gonatee

18

Решение на чистом JS выглядит следующим образом:

function clearForm(myFormElement) {

  var elements = myFormElement.elements;

  myFormElement.reset();

  for(i=0; i<elements.length; i++) {

  field_type = elements[i].type.toLowerCase();

  switch(field_type) {

    case "text":
    case "password":
    case "textarea":
          case "hidden":

      elements[i].value = "";
      break;

    case "radio":
    case "checkbox":
        if (elements[i].checked) {
          elements[i].checked = false;
      }
      break;

    case "select-one":
    case "select-multi":
                elements[i].selectedIndex = -1;
      break;

    default:
      break;
  }
    }
}

— Махмуд Салех
источник

1

Вот решение плагина jQuery, которое должно быть примерно эквивалентным. stackoverflow.com/a/24496012/1766230 (Я использовал ваш selectedIndex = -1трюк)

— Люк,

5

Это решение сейчас не работает (в 2016 году). Когда форма имеет значения по умолчанию для ввода текста, пароля и текстового поля, вы должны использовать elements [i] .defaultValue = "" вместо elements [i] .value = "".

— Эндрю Ф.

var field_type = elements[i].type.toLowerCase();

— Мартинас Янушкаускас

@ Андрей: Это зависит от того, чего вы хотите. Если вы просто хотите сбросить форму до defaultValues, вы можете просто вызвать reset()объект формы. Код здесь предназначен для очистки формы, а не для ее сброса.

— Protector one

4

, метод reset () не очищает значения по умолчанию и поле флажка, и есть еще много проблем.

Чтобы полностью сбросить настройки, проверьте ссылку ниже -

http://www.javascript-coder.com/javascript-form/javascript-reset-form.htm

— Alpesh
источник

4

Сбросить (очистить) форму через Javascript&jQuery :

Пример Javascript:

document.getElementById("client").reset();

Пример jQuery:

Вы можете попробовать использовать trigger() справочную ссылку

$('#client.frm').trigger("reset");

— Gaurang P
источник

4

Обратите внимание, функция form.reset()не будет работать, если какой-либо тег ввода в форме имеет атрибутname='reset'

— alexbobroff
источник

2

Попробуй это :

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}

— Hazem_M
источник

2

Очистите форму следующим образом

document.forms[0].reset();

Вы можете просто очистить элементы формы внутри группы. используя это forms[0].

— Нагараджу Вуппала
источник

1

Используйте функцию JavaScript reset():

document.forms["frm_id"].reset();

— Феликс Багур
источник

1

Вы можете использовать следующее:

$('[element]').trigger('reset')

— Только учусь
источник

0

Попробуйте этот код. Полное решение для вашего ответа.

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(":reset").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
  Name: <input type="text" name="user"><br>
  Password: <input type="password" name="password"><br>
  <button type="button">Useless Button</button>
  <input type="button" value="Another useless button"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit"><br>
</form>

</body>
</html>

— Джаффер Уилсон
источник

-1

Вы можете очистить всю форму с помощью функции onclick. Вот ее код.

 <button type="reset" value="reset" type="reset" class="btnreset" onclick="window.location.reload()">Reset</button>

Функция window.location.reload () обновит вашу страницу, и все данные будут удалены.

— Арджун
источник