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 should be $ (" форма
Мітч

1
$("form#formID :input").eachвиводи inputтип, 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));
    });

Тепер не потрібно вводити такі імена, як «введення, текстове поле, виділення ...» тощо.


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