Accessing a jQuery Object in another object

Question

I´m trying to access a form element in the success callback of ajaxForm. The form element is passed as 4th element (see: http://malsup.com/jquery/form/#options-object -> success).

So if I test it via console.log(form), it works. I get a jQuery Object and can access the form via form[0].

But the console.log shows me, that under [0] there are more elements, the inputs of the form. I can access them via form[0][0] or form[0][1] and so on.

But how can I get all child objects at once?

My situation is, that I don´t know the amount of inputs, so I need to access all inputs of the element through something like a foreach. But with form[0] I´m just getting the DOM-Element of the form.

It´s a bit complex, but I hope you understand my issue.

Edit: This is what I get from console.log(form):

[form#doku_newrowJsonForm.doku_newrowJsonForm, context: form#doku_newrowJsonForm.doku_newrowJsonForm, jquery: "1.9.1", constructor: function, init: function, selector: ""…]
0: form#doku_newrowJsonForm.doku_newrowJsonForm
 0: input
 1: input#AdrowAdtableId
 2: input#AdrowCustomerId
 3: input#AdrowContent19.input-small
 4: input#AdrowContent20.input-small
 5: input#AdrowContent21.input-small
 6: input#AdrowContent22.input-small
 7: input#AdrowContent23.input-small
 8: input#AdrowContent24.input-small

form[0] just gives me the DOM-Element and form[0].find(':input') gives me Uncaught TypeError: Object # has no method 'find' ...

Edit2 To be clear: I want to get for example input#AdrowAdtableId. I can access this via form[0][1]. But I don´t know the lenght of inputs I have in the form. It´s dynamically. So it would be great, to do something like form[0].each(). But form[0] gives me the DOM Element and not the jQuery Object...

Answer 1

Just use find(). If you want all inputs inside the form (and the form itself can be accesses as form[0]) just do:

$(form[0]).find(":input")

If form if already a jQuery object the following is slightly better:

form.eq(0).find(":input")

Note that I used the :input pseudo-class to get all input-like elements, not just <input> ones.

Answer 2

If you're using jQuery form and you're interested in the posted values, you could do the following:

var form = $('form');
form.ajaxForm({
    beforeSubmit: function(arr, $form, options) {
        form.data('form-values', arr);
    },
    success: function() {
        console.log(form.data('form-values')); // logs the submitted values
    }
});

Answer 3

You can access all the inputs on a form with the .each()

$(form[0]).find(':input').each(function{){
    var myInputValue = $(this).val();
});

If you need to know the specific type of input see this: How to get input type using jquery?