jquery получает все данные из определенной формы


84

Есть ли способы заполнить все данные из определенной формы? скажем так:

<form id="unique00">
  <input type="text" name="whatever" id="whatever" value="whatever" />
  <div>
    <input type="checkbox" name="whatever" id="whatever" value="whatever" />
  </div>
  <table><tr><td>
    <input type="hidden" name="whatever" id="whatever" value="whatever" />
    <input type="submit" value="qweqsac" />
  </td></tr></table>
</form>
<form id="unique01">
  <div>
    <input type="text" name="whatever" id="whatever" value="whatever" />
    <input type="checkbox" name="whatever" id="whatever" value="whatever" />
  </div>
  <table><tr><td>
    <input type="hidden" name="whatever" id="whatever" value="whatever" />
  </td></tr></table>
  <select>blah...</select>
  <input type="submit" value="qweqsac" />
</form>
etc forms... forms...

* примечание: каждая форма может иметь разное количество входных данных и тип, а также разную структуру HTML.

так есть ли способ заполнить ввод с определенного идентификатора формы? например, если я нажму кнопку отправки из определенного идентификатора формы, тогда jquery заполнит для меня все входные данные в этом идентификаторе формы. в настоящее время я делаю вот так:

$("form").submit(function(){ return validateForm($(this)) });
function validateForm(form){
var retVal = true;
var re;
$.each(form.serializeArray(), function(i, field) {
  var input = $('input[name='+field.name+']');
  field.value = $.trim(field.value);
  switch(field.name){
    case "name" :
        and another cases...
      }
    })
 }

это была работа, но в этом случае я получаю только field.name и field.value, и на самом деле то, что я хочу, - это объект jquery для каждого элемента ввода, поэтому я могу получить доступ к их css, id, name и даже анимировать этот элемент ввода

есть ли способ для этого?

пожалуйста, дайте мне знать и заранее спасибо! И

Ответы:


180

Чтобы перебрать все входные данные в форме, вы можете сделать это:

$("form#formID :input").each(function(){
 var input = $(this); // This is the jquery object of the input, do what you will
});

Здесь используется селектор ввода jquery : для получения ВСЕХ типов входных данных, если вам просто нужен текст, который вы можете сделать:

$("form#formID input[type=text]")//...

и т.п.


3
Я думаю: ввод работает для этого, но в противном случае вы могли бы сделать:$("form#formID input[type=text],form#formID select")
TJB

Обратите внимание на опечатку в первом ответе выше. Форма $ ("from должно быть $ ("
Митч

1
$("form#formID :input").eachinputтип выходов , selectтип и даже buttonтип входов. По крайней мере, в моем коде.
TARKUS

3
@TARKUS inputпротив :input. $ (": input") выбирает все элементы формы jQuery. $ ("input") выбирает только теги ввода.
Джонатан Элмор

25

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

$('#formId input, #formId select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

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

$('form input, form select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

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

$('input, select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

ПРИМЕЧАНИЕ. Мы добавляем нужное нам имя тега элемента в список объектов, как показано ниже:

Example: to get name of attribute "textarea",

$('input, select, textarea').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

1
Я не получаю значение текста с помощью этого input.val (). Вы можете мне в этом помочь?
DhavalThakor

Виноват. Извините, я искал не в том месте для вывода.
DhavalThakor

3

Использовать атрибут "элементы" HTML- формы:

$.each($("form").elements, function(){ 
    console.log($(this));
    });

Теперь необязательно указывать такие имена, как «input, textarea, select ...» и т. Д.


Дух! - слишком много информации. Попробуйте более быстрый способ просмотра информации формы $ ("form: input"). Each (function (index) {console.log (index, this.type, this.id, this.name, this.value, this.placeholder );});
Жюль Бартоу
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.