Як скинути (очистити) форму через JavaScript?

123

Я спробував, $("#client.frm").reset();але він не працює. Отже, як скинути форму через jQuery?

javascript jquery

Можливий дублікат stackoverflow.com/questions/680241/blank-out-a-form-with-jquery

— svk

6

Примітка: Очистити та скинути - це дві різні речі. Скидання ( .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 (...). Скидання не є функцією [Дізнайтеся більше]. Я використовую плагін FormValidate для форми. його resetForm також не скидає форму = (Будь-які пропозиції?

— Євген Конков

Ойген, ось де, подібно Індіані Джонс та Останній хрестовий похід, ви повинні зробити стрибок віри. Якщо ви зателефонуєте document.getElementById ('myform'). Reset (), він фактично очистить форму, навіть незважаючи на те, що цього методу не існує. Типова M $ затухання.

— Ньюклік

43

Ви можете просто зробити:

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

— user2057484
джерело

1

a Triggerприводить мене в новий світ

— гнате

17

Чисте рішення 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 році). Якщо форма має значення за замовчуванням для вводу тексту, пароля та textarea, слід використовувати елементи [i] .defaultValue = "" замість елементів [i] .value = "".

— Ендрю Ф.

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

— Martynas Januškauskas

@Andrew: Це залежить від того, що ти хочеш. Якщо ви просто хочете скинути форму до defaultValues, ви можете просто зателефонувати reset()на об’єкт форми. Код тут - це очистити форму, а не скинути її.

— Захисник один

4

, метод reset () не знімає значення за замовчуванням і поле прапорця, і існує багато інших проблем.

Для повного скидання перевірте нижченаведене посилання -

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

— Альпеш
джерело

4

Скинути (очистити) форму за допомогою Javascript&jQuery :

Приклад Javascript:

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

Приклад jQuery:

Ви можете спробувати скористатися trigger() посиланням

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

— Гауранг П
джерело

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 () оновить вашу сторінку, і всі дані очистяться.

— Арджун
джерело