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?

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?

• javascript
• jquery

Share Improve this question Follow asked Oct 3, 2016 at 17:33 adam78adam78 10.1k2424 gold badges107107 silver badges222222 bronze badges 2

• Why can't you just do $('id').val()? – BoeNoe Commented Oct 3, 2016 at 17:36
• Using jquery method like .find() is better but you need to change $form.bar.val() to $form[0].bar.val() and add return at the end of function. – Mohammad Commented Oct 3, 2016 at 17:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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):¹

$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();

---

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