JQuery .each loop prob

Question

Ok, ecco l'idea:

Voglio creare uno script jQuery per gestire più moduli. Ogni forma ha un pulsante. Quando si fa clic su questo pulsante, lo script deve inviare il nome e il valore di tutti i campi di input in $ _POST all'URL dell'azione del modulo. Ma non posso farlo funzionare.

Non passerà in loop attraverso il mio .each sulla riga 3 nel mio file 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() va solo un singolo livello di DOM - provare a utilizzare .closest() e find() - così

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

Answer 2

Usa .find a trova i bambini e .parents per trovare il modulo

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

Answer 3

modo più semplice per me leggere esso, sarebbe quella di utilizzare .closest() (che va su tutta la strada, invece di madre che è di un livello) e anche find() (che esegue una query attraverso il vostro oggetto jQuery corrente):

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

jsFiddle Demo

Answer 4

parent() arriva solo fino 1 livello nella struttura DOM e children() va solo verso il basso 1 livello nella struttura DOM.

Dovresti provare ad usarne di più se sei sicuro al 100% che la struttura non cambierà (non consigliato, non è pulito), o usare closest(), che recupererà il nome del tag dato più vicino nel DOM albero.

Answer 5

Basta usare .serialize() con il modulo per ottenere il nome/valori della vostra Inputs- anche si dovrebbe utilizzare più vicino in quanto genitore va solo di un livello

$("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

È possibile risparmiarsi dal mal di testa di serializzazione tuo form elementi in una query semplicemente utilizzando il built-in .

Il metodo .serialize() crea una stringa di testo in versione standard con codifica URL notazione. Funziona su un oggetto jQuery che rappresenta un insieme di elementi .

Nel tuo caso:

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