Get value of multiple hidden form values, within a table

Question

I ve been trying to obtain the value of my form input elements, but I am just not having any luck with it.

I have the following form within a while loop in PHP, so there will be multiple forms.

<form method='POST' action=".$_SERVER['SCRIPT_NAME']." name='form_set_deadline' class='form_set_deadline'>
    <input type='hidden' value='".$data3['unique_name']."' name='file_id' class='file_id' />
    <input type='hidden' value='".$user_id."' name='client_id' class='client_id' />
    <table>
        <tr>
            <td align='left'><input type='button' name='set_file_options' value='Submit' class='set_file_options' /></td>
        </tr>
    </table>
</form>

Now, I am trying to get the value of the hidden fields of jquery, but just don't know how to access the hidden field values. Remember, there are multiple of these forms on the page. Here is the jquery form, contained within a function.

function setFileOptions(){
    $('.set_file_options').each(function(e){
        $(this).unbind("click").click(function(e){
            e.preventDefault();
            //set form variables
            var file_id = // DON'T KNOW HOW TO GET THE HIDDEN FIELD INPUT VALUE?

            alert(file_id); 
        }); //END THIS CLICK FUNCTION
    });
 } //END MAIN FUNCTION

Thanks for the help/tips!

So after all the input received from you all, I have decided to use the following to get all the form data:

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

Thanks again!

There are MUCH more elegant ways to do this! How about putting a simple button element (styled with jQuery UI) and passing the variables internally to the javascript rather than gumming up the UI with hidden form elements. Perhaps we could clean it up if given the full context. — bpeterson76, Jan 11 '12 at 22:06
Well, I have many other form elements, such as textareas, text inputs and such that I am trying to pass to javascript. — user482520, Jan 11 '12 at 22:15

Rob W · Answer 1 · 2012-01-11T22:01:42.577

3

var file_id = $(this).closest('form').find('.file_id').val();

Alternatively, a pure JS solution:

var file_id = this.form.elements['form_id'].value;

A selector to select all <input type="hidden"/> elements:

var hiddens = $(this).closest('form').find(':hidden');
//hiddens.eq(0) = file_id
//hiddens.eq(1) = client_id

If you do not have anything attached to your classnames, I recommend to drop these attributes, and use the name-attribute selector:

var file_id = $(this).closest('form').find('[name="file_id"]').val();

edited Jan 11 '12 at 22:01

answered Jan 11 '12 at 22:00

Rob W

341,306
83
791
678

Sweet! This works! I had tried $(this).parent('form').find('.file_id').val(); but this didn't work. Anyways, thanks a bunch! – user482520 Jan 11 '12 at 22:03
@user482520 You should have used `parents` to select any element from the parent. Since you want to select the closest parent, you should use `closest`. An alternative syntax, using `parents` is: `$(this).parents('form:first')` (which is slightly slower). – Rob W Jan 11 '12 at 22:05
^ Actually your solution should work too if you replace `.parent()` with `.parents()` the second one travels up the dom tree until it finds a matching element. While the first one only checks the immediate parent :) – bardiir Jan 11 '12 at 22:06
Just curious...why do you suggest dropping the class names and keeping only the name-attribute selectors? – user482520 Jan 11 '12 at 22:08
Just checked both, and yes, they do work, using both closest and parents, but I guess closest is better for faster access to that element, right? – user482520 Jan 11 '12 at 22:10
At **[this answer](http://stackoverflow.com/questions/8789362/parent-faster-alternative/8789398#8789398)**, I have posted a comparison in speed between both methods. `closest` is faster. @user482520 My suggested method works fine with names, without class names. Since you're currently duplicating `class` and `name`, it's better to merge them if you added the `class` attribute solely for this purpose. – Rob W Jan 11 '12 at 22:17
Thanks Rob! I ll take this into consideration. – user482520 Jan 11 '12 at 22:22

score 1 · Answer 2 · answered Jan 11 '12 at 22:00

Try this,

$(this).closest('form').find(':hidden'); //should get you the hidden fields inside the form

And there could be more than one fields so you may need iterate to get all the hidden fields,

var field_val = [];

$.each ($(this).closest('form').find(':hidden'), function (index) {
   field_val [$(this).attr('class')] = $(this).val();
});

score 0 · Answer 3 · answered Jan 11 '12 at 22:00

0

var file_id = $(this).closest('table').siblings('.file_id').val()

answered Jan 11 '12 at 22:00

gen_Eric

223,194
41
299
337

score 0 · Answer 4 · answered Jan 11 '12 at 22:01

0

Have you tried:

var file_id = $('input[name="file_id"]').val();

answered Jan 11 '12 at 22:01

Thierry Blais

2,848
22
41

score 0 · Answer 5 · answered Jan 11 '12 at 22:05

0

Try this:

var fileid = $(this).parents('form').find('.file_id').val();

answered Jan 11 '12 at 22:05

bardiir

14,556
9
41
66

Get value of multiple hidden form values, within a table

5 Answers5