jQuery Wert von Formularobjekt erhalten?

Question

Ich habe die folgende Form:

<form> 
    <input type="radio" name="foo" value="1" checked="checked" /> 
    <input type="radio" name="foo" value="0" /> 
    <input name="this" value="xxx" /> 
    <select name="bar"> 
    <option value="hi" selected="selected">Hi</option> 
    <option value="ho">Ho</option> 
    </select> 
    <a class="js-add" href="#" >Add</a> 
</form> 

Ich habe die folgende Funktion, die das gesamte Formular übergibt, wenn das Add Link geklickt wird:

$(".js-add").click(function (e) { 
    e.preventDefault(); 

    values = getFormValues($("form")); 
}); 

getFormValues = function($form) { 
    var bar = $form.bar.val(); 

} 

Wie rufe ich einen bestimmten Eingangswert aus dem Formular Objekt. So zum Beispiel in der oben genannten getFormValues Funktion möchte ich den Wert des Bar Eingabefeldes greifen, aber das obige funktioniert nicht. Normalerweise würde ich das tun: $bar.val(); Aber wie bekomme ich das gleiche aus dem Formularobjekt?

Answer 1

Was Sie in Ihre Funktion übergeben, ist kein Formularobjekt, sondern ein jQuery-Objekt, das um ein HTMLFormElement-Objekt gewickelt ist. jQuery-API können Sie ganz einfach Elemente finden in diesem Element über find (einer der tree traversal methods):

$form.find("[name=bar]").val() 

Dann müssen Sie Rückkehr, die von Ihrer Funktion schätzen, so:

return $form.find("[name=bar]").val(); 

Wenn der Name keine gültige CSS Kennung ist (es ist in Ihrem Beispiel, aber ...), verwenden Sie Anführungszeichen um es:

return $form.find("[name='bar']").val(); 

---

Es ist ziemlich einfach, mit der nativen DOM als gut, aber Sie verwenden jQuery, so ...