jQuery + hidden input fields

Question

A simplified version of problem I am experiencing:

Here is my HTML form:

<form enctype="multipart/form-data" method="post" action="/controller/action">
<input type="text" name="title" id="title" value="" class="input-text" />
<input type="hidden" name="hidden_field" value="" id="hidden_field" />
<input type="submit" name="submit_form" id="submit_form" value="Save" class="input-submit" />
</form>

Here is the JavaScript:

$(document).ready(function() {    
    $('#submit_form').hover(function() {
        $('#hidden_field').attr('value') = 'abcd';
    });
});

And here is a really short version of the PHP backend:

if (isset($_POST)) {
    var_dump($_POST);
}

What I do is I hover the #submit_form button for a few seconds just to make sure that the jQuery code got executed, then I submit the form and:

the $_POST['hidden_field'] is empty!

Why is that? It should contain 'abcd' as I insert it into the hidden field with jQuery on the hover event.

meder omuraliev · Accepted Answer · 2009-08-29 21:14:18Z

4

Correct way to set the value:

 $('#hidden_field').val('abcd');

Reference: http://docs.jquery.com/Attributes/val

answered Aug 29, 2009 at 21:14

meder omuraliev

187k76 gold badges401 silver badges443 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Richard Knop Over a year ago

it's still empty even when I use $('#hidden_field').val('abcd'); :(

strager Over a year ago

@Knop, Are you sure your hover handler is being called?

strager · Accepted Answer · 2009-08-29 21:22:26Z

3

The statement

$('#hidden_field').attr('value') = 'abcd';

is incorrect. You should get an error there as you're assigning an rvalue (the jQuery object) to another rvalue (a string). (The assignment operator needs an lvalue (e.g. a variable) on the left.)

You probably want:

$('#hidden_field').val('abcd');

or:

$('#hidden_field').attr('value', 'abcd');

(The former is more jQuery-ish, but for this case both are equivilent.)

edited Aug 29, 2009 at 21:22

answered Aug 29, 2009 at 21:14

strager

90.3k27 gold badges139 silver badges181 bronze badges

Comments

amantur · Accepted Answer · 2009-08-29 21:15:58Z

1

it is:

$('#hidden_field').attr('value','abcd');

answered Aug 29, 2009 at 21:15

amantur

40.6k22 gold badges136 silver badges192 bronze badges

Comments

Fluffeh · Accepted Answer · 2012-09-28 09:24:53Z

0

Since these are hidden elements be sure to check these with something other that viewing the page source i.e. pressing F12, check with alert(), etc. The source of the original html page will not reflect changes made to it via javascript.

edited Sep 28, 2012 at 9:24

Fluffeh

33.6k16 gold badges69 silver badges80 bronze badges

answered Aug 7, 2012 at 22:19

tweirick

1715 bronze badges

Collectives™ on Stack Overflow

jQuery + hidden input fields

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related