Как очистить все поля ввода в конкретном div с помощью jQuery?

Я пытаюсь использовать jQuery для выполнения простой вещи: очищайте поля ввода группы поля ввода в пределах div при загрузке формы или если пользователь меняет список выбора; но у меня чертовски время, когда селектор работает.

Во-первых, здесь мои триггеры onclick и onload:

<form name="EditGenotype" action="process_GenotypeMaint.php" method="POST" onsubmit="return false" onload=clear_fetch() >

и на выборщиков:

<SELECT multiple size=6 NAME="marker" onchange=show_marker() onclick=clear_fetch() >

Далее, здесь мои элементы ввода HTML в div, которые я хочу очистить:

  <div class=fetch_results>
      <fieldset>
    <LEGEND><b>Edit Genotype, call 1</b></LEGEND>
      <boldlabel>Allele_1</boldlabel><input id=allele_1_1 name=allele_1_1 size=5 >
      <boldlabel>Allele_2</boldlabel><input id=allele_1_2 name=allele_1_2 size=5 >
      <boldlabel>Run date</boldlabel><input id=run_date1 name=run_date1 size=10 disabled=true>
      </fieldset>
      <fieldset>
    <LEGEND><b>Edit Genotype, call 2</b></LEGEND>
      <boldlabel>Allele_1</boldlabel><input id=allele_2_1 name=allele_2_1 size=5 >
      <boldlabel>Allele_2</boldlabel><input id=allele_2_2 name=allele_2_2 size=5 >
      <boldlabel>Run date</boldlabel><input id=run_date2 name=run_date2 size=10 disabled=true>
      </fieldset>
      <fieldset>
    <LEGEND><b>Edit Genotype, call 3</b></LEGEND>
      <boldlabel>Allele_1</boldlabel><input id=allele_3_1 name=allele_3_1 size=5 >
      <boldlabel>Allele_2</boldlabel><input id=allele_3_2 name=allele_3_2 size=5 >
      <boldlabel>Run date</boldlabel><input id=run_date3 name=run_date3 size=10 disabled=true>
      </fieldset>
    </div>

Наконец, здесь мой script:

 function clear_fetch() {    

    $('#fetch_results:input', $(this)).each(function(index) {
      this.value = "";
    })

  }

Однако ничего не происходит... поэтому, у меня не должно быть правильного выбора. Кто-нибудь видит, что я сделал неправильно?

Ответ 1

Fiddle: http://jsfiddle.net/simple/BdQvp/

Вы можете сделать это так:

Я добавил две кнопки в Fiddle, чтобы проиллюстрировать, как вы можете вставлять или очищать значения в этих полях ввода через кнопки. Вы просто захватываете событие onClick и вызываете функцию.

//Fires when the Document Loads, clears all input fields
$(document).ready(function() {
  $('.fetch_results').find('input:text').val('');    
});

//Custom Functions that you can call
function resetAllValues() {
  $('.fetch_results').find('input:text').val('');
}

function addSomeValues() {
  $('.fetch_results').find('input:text').val('Lala.');
}

Update:

Посмотрите этот отличный ответ ниже Beena, а также для более универсального подхода.

Ответ 2

Эта функция используется для очистки всех элементов формы, включая переключатель, флажок, выбор, множественный выбор, пароль, текст, текстовое поле, файл.

function clear_form_elements(class_name) {
  jQuery("."+class_name).find(':input').each(function() {
    switch(this.type) {
        case 'password':
        case 'text':
        case 'textarea':
        case 'file':
        case 'select-one':
        case 'select-multiple':
        case 'date':
        case 'number':
        case 'tel':
        case 'email':
            jQuery(this).val('');
            break;
        case 'checkbox':
        case 'radio':
            this.checked = false;
            break;
    }
  });
}

Ответ 3

вдохновлен fooobar.com/questions/155199/..., но я использую селектор вместо класса и предпочитаю, если переключатель:

function clearAllInputs(selector) {
  $(selector).find(':input').each(function() {
    if(this.type == 'submit'){
          //do nothing
      }
      else if(this.type == 'checkbox' || this.type == 'radio') {
        this.checked = false;
      }
      else if(this.type == 'file'){
        var control = $(this);
        control.replaceWith( control = control.clone( true ) );
      }else{
        $(this).val('');
      }
   });
}

это должно заботиться почти обо всех входах внутри любого селектора.

Ответ 4

Измените это:

 <div class=fetch_results>

К этому:

 <div id="fetch_results">

Затем должно работать следующее:

$("#fetch_results input").each(function() {
      this.value = "";
  })

http://jsfiddle.net/NVqeR/

Ответ 5

Пара проблем, которые я вижу. fetch_results - это класс, а не идентификатор, и каждая функция не выглядит правильно.

$('.fetch_results:input').each(function() {
      $(this).val('');
});

Просто помните, что если вы закончите с помощью радиостанций или кнопок проверки, вам придется очистить проверенный атрибут, а не значение.

Ответ 6

Если вы хотите остаться с селектором уровня, тогда вы можете сделать что-то подобное (используя тот же jfiddle от Mahn)

$("div.fetch_results input:text").each(function() {
  this.value = "testing";
})

Это будет выбирать только поля ввода текста в div с классом fetch_results.

Как и в любом jQuery, это единственный способ сделать это. Задайте 10 jQuery людям этот вопрос, и вы получите 12 ответов.

Ответ 7

$.each($('.fetch_results input'), function(idx, input){
  $(input).val('');
});

Ответ 8

Просто нужно было удалить все входы внутри div и использовать двоеточие перед входом, когда таргетинг получает почти все.

$('#divId').find(':input').val('');

Ответ 9

Для тех, кто хочет сбросить форму, можно также использовать type="reset" внутри любой формы.

<form action="/action_page.php">
Email: <input type="text" name="email"><br>
Pin: <input type="text" name="pin" maxlength="4"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>