adam78 adam78 - 2 months ago 15
Javascript Question

jQuery get value from form object?

I have the following 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>


I have the following function which passes the entire form when the add link is clicked:

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

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

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

}


How do I retrieve a particular input value from the form object. So for example in the above
getFormValues
function I want to grab the value of the bar input field but the above doesn't work. Normally I'd just do this:
$bar.val();
But how do I get the same from the form object?

Answer

What you're passing into your function isn't a form object, it's a jQuery object which is wrapped around an HTMLFormElement object. jQuery's API lets you easily find elements within that element via find (one of the tree traversal methods):1

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

Then you need to return that value from your function, so:

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

If the name isn't a valid CSS identifier (it is in your example, but...), use quotes around it:

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

1 It's pretty easy with the native DOM as well, but you're using jQuery, so...

Comments