JQuery .each pętla prob

Question

Okay, oto pomysł:

Chcę utworzyć skrypt jQuery do obsługi wielu formularzy. Każda forma ma przycisk. Po kliknięciu tego przycisku skrypt powinien wysłać nazwę i wartość wszystkich pól wejściowych w zmiennej $ _POST do adresu działania formularza. Ale nie mogę tego zrobić.

Nie zapętli się przez moje .each na linii 3 w moim pliku jQuery.

jQuery:

$("input[type='button']").click(function(){ 
    var query = {}; 
    $(this).parent('form').children('input[type="text"]').each(function(){ 
     query[$(this).attr('name')] = $(this).val(); 
    }); 

    $.post($(this).parent('form').attr('action'), query, function(data) { 
     $("#dialog").html(data); 
     $("#ui-id-1").html('Activate account'); 
     $("#dialog").dialog("open"); 
    }, 'json'); 
}); 

HTML:

<form action="/action/activateacc.php"> 
<table> 
    <tr> 
     <td>E-mail:</td> 
     <td><input type="text" id="mail" name="mail" /></td> 
     <td><img class="tick" id="mailIMG" width="20px" /></td> 
    </tr> 
    <tr> 
     <td>Activation code:</td> 
     <td><input type="text" id="code" name="code" /></td> 
     <td><img class="tick" id="codeIMG" width="20px" /></td> 
    </tr> 
    <tr> 
     <td>Choose organization-name:</td> 
     <td><input type="text" id="name" name="name" /></td> 
     <td><img class="tick" id="nameIMG" width="20px" /></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td style="text-align:center"><input type="button" style="cursor:pointer" value="Activate account" /></td> 
    </tr> 
</table> 
</form> 

Answer 1

.parent() tylko idzie w górę jeden poziom DOM - spróbuj użyć .closest() i find() - tak

$(this).closets('form').find('input[type="text"]').each(function(){ 

Answer 2

Korzystając .find do znajdź dzieci i .parents, aby znaleźć formularz

$(this).parents('form').find('input[type="text"]').each(function(){ 
     query[$(this).attr('name')] = $(this).val(); 
    }); 

Answer 3

Najprostszym sposobem dla mnie, aby ją przeczytać, byłoby wykorzystanie .closest() (która idzie w górę przez całą drogę zamiast rodzica, który jest jeden poziom), a także find() (który uruchamia kwerendę przez obecnego obiektu jQuery):

$(this).closest('form').find('input[type="text"]').each(function(){ 
    query[$(this).attr('name')] = $(this).val(); 
}); 

jsFiddle Demo

Answer 4

parent() idzie tylko 1 poziom w drzewie DOM i children() tylko idzie w dół o 1 poziom w drzewie DOM.

Powinieneś spróbować użyć ich więcej, jeśli masz 100% pewności, że struktura się nie zmieni (niezalecane, nie jest tak czyste), lub użyj closest(), która pobierze najbliższą podaną nazwę tagu w DOM drzewo.

Answer 5

Wystarczy skorzystać z formularza .serialize() dostać Nazwa/wartości swojej WEJÂCIA też należy używać najbliżej od rodzic idzie w górę o jeden poziom tylko

$("input[type='button']").click(function(){ 
    var query = $(this).closest('form').serialize(); 
    $.post($(this).parent('form').attr('action'), query , function(data) { 
     $("#dialog").html(data); 
     $("#ui-id-1").html('Activate account'); 
     $("#dialog").dialog("open"); 
    }, 'json'); 
}); 

Answer 6

można oszczędzić sobie z głowy z szeregowania swoją form elementy do zapytania, po prostu za pomocą wbudowanego .

Metoda .serialize() tworzy ciąg tekstowy w standardowej notacji zakodowanej za pomocą adresu URL. Działa na obiekcie jQuery reprezentującym zbiór elementów formularza .

W twoim przypadku:

var query = $(this).closest('form').serialize();