jquery pobiera wszystkie dane wejściowe z określonego formularza

84

Czy są jakieś sposoby na wypełnienie wszystkich danych wejściowych z określonego formularza? powiedzmy, coś takiego:

<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...

* uwaga: każdy formularz może mieć inną ilość danych wejściowych i typ, a także inną strukturę html

więc czy istnieje sposób na wypełnienie danych wejściowych z określonego identyfikatora formularza? np. jeśli kliknę przycisk wysyłania z określonego identyfikatora formularza, jquery wypełni za mnie wszystkie dane wejściowe w tym identyfikatorze formularza. obecnie robię tak:

$("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...
      }
    })
 }

to była praca, ale w takim przypadku otrzymuję tylko field.name i field.value, a właściwie to, czego chcę, to obiekt jquery dla każdego elementu wejściowego, aby móc uzyskać dostęp do ich css, id, name i nawet animować te elementy wejściowe

czy jest na to jakiś sposób?

daj mi znać i z góry dziękuję! I

I
źródło

Odpowiedzi:

180

Aby iterować przez wszystkie dane wejściowe w formularzu, możesz to zrobić:

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

Używa selektora jquery : input, aby uzyskać WSZYSTKIE typy danych wejściowych, jeśli potrzebujesz tylko tekstu, możesz to zrobić:

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

itp.

TJB
źródło
3
Myślę: wejście działa do tego, ale poza tym możesz to zrobić:$("form#formID input[type=text],form#formID select")
TJB
Zwróć uwagę na literówkę w swojej pierwszej odpowiedzi powyżej. $ („from powinno być $ (” formularz
Mitch
1
$("form#formID :input").eachWyjścia inputtyp, selectrodzaj, a nawet buttonwejść typu. Przynajmniej tak jest w moim kodzie.
TARKUS,
3
@TARKUS inputvs :input. $ (": input") wybiera wszystkie elementy formularza jQuery. $ ("input") wybiera tylko tagi wejściowe.
Johnathan Elmore
25

Poniższy kod pomaga uzyskać szczegóły elementów z konkretnego formularza o identyfikatorze formularza,

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

Poniższy kod pomaga uzyskać szczegóły elementów ze wszystkich formularzy, które znajdują się na stronie ładowania,

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

Poniższy kod pomaga uzyskać szczegółowe informacje o elementach, które są umieszczane na stronie ładowania, nawet jeśli element nie jest umieszczony wewnątrz tagu,

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

UWAGA: Dodajemy więcej nazw znaczników elementów, których potrzebujemy na liście obiektów, jak poniżej,

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());
    }
);
Srinivasan.S
źródło
1
Nie uzyskuję wartości tekstu za pomocą tego input.val () .. czy możesz mi w tym pomóc?
DhavalThakor
Mój błąd. Sory, szukałem niewłaściwego miejsca na wyjście.
DhavalThakor
3

Użyj atrybutu „elementy” formularza HTML :

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

Teraz nie trzeba podawać takich nazw, jak „wejście, obszar tekstu, zaznacz ...” itp.

Markoj
źródło
Dooh! - za dużo informacji. Wypróbuj szybszy sposób przeglądania informacji o formularzu $ ("form: input"). Each (function (index) {console.log (index, this.type, this.id, this.name, this.value, this.placeholder );});
Jules Bartow