Is there a reason this doesn't work?

Question

A simple HTML form:

<form enctype="application/x-www-form-urlencoded" method="post" action="/view/album/id/4"><ol>
<li class="no-padding"><div class="element">

<input type="hidden" name="media" value="" id="media" /></div></li>
<li class="no-padding"><div class="button">
<input type="submit" name="add_to_favorites" id="add_to_favorites" value="Add To Favorites" /></div></li></ol></form>

JQuery:

$('#add_to_favorites').hover(function() {
    var id = 10;
    // alert(id);
    $('#media').val(id);
});

Which basically means that when you hover over the submit button of the form, the jQuery will set 10 as value of the #media hidden field.

When I click on the submit button though, the hidden field returns NULL:

var_dump($_POST);
// this will return:
// array(2) { ["media"]=>  NULL ["add_to_favorites"]=>  NULL }

EDIT:

I tested both value of "var id" and the hidden field value with alert() and they are properly set.

EDIT2:

There is one click() event triggered on the page, too, here's the full code:

$(document).ready(function() {
    $('.box-content2 a').click(function() {
        var path = $(this).attr('href');
        var title = $('img', this).attr('alt');
        var id = $(this).attr('id');
        $('#media-photo img').attr('src', path);
        $('#media-photo img').attr('alt', title);
        $('#media-photo img').attr('id', id);
        return false;
    });

    $('#add_to_favorites').hover(function() {
        var id = 10;
        $('#media').val(id);
    });
});

Answer 1

You should have two functions defined for your hover event. One for mouseover and one for mouseout. So your hover event will look like:

$('#add_to_favorites').hover(function() {
    var id = 10;
    // alert(id);
    $('#media').val(id);
}, function() {
    // Probably do nothing here.
});

Perhaps you'd be better off binding to the mouseover event?

Answer 2

The reason is Val() only gets the input value of the first matched element so you can't use it to set a single property to a value, to set a property on a matched element use the attr function like this attr( key, value )

more details check this and this