jQuery val() inside display: none

<a href开发者_如何学JAVA="#addFriend" rel="facebox" title="[+] add <?php echo $showU["full_name"]; ?> as friend">
    <div class="addFriend"></div></A>

<div id="addFriend" style="display:none; margin: auto;">
    <form action="javascript:DoFriendRequest()" method="post">
        <input name="commentFriend" type="text" id="commentFriend" value="" size="22"> 
        <input name="submit" type="submit" id="submit" value="Send">
    </form>
</div>

My form when it's inside this element which is a jquery lightbox, the field #commentFriend get empty value in DoFriendRequest

function DoFriendRequest() {
    var wrapperId = '#insert_svar';
    $.ajax({ 
        type: "POST",
        url: "misc/AddFriendRequest.php",
        data: {
            mode: 'ajax',
            comment : $('#commentFriend').val() 
        },
        success: function(msg) {
            $(wrapperId).prepend(msg);
            $('#commentFriend').val("");
        }
    });
}

Updated answer

But when I remove the display:none, it works. How can I solve this?

For fields with display:none, it seems that val() does not work.

I bypass this behavior with attr():

$('input').attr('value',myNewValue);

There are three ways you can go about this;

1. Make the element visible, update it, then hide it again.

2. detach() the element from the DOM, make it visible, update it, hide it, and then re-insert into the DOM.

3. clone() the element, make it visible, update it, hide it, insert it into the DOM and remove the original element.

Approach #2 and #3 are probably your best options, since these won't trigger a re-draw. All operations are done to the elements "outside" of the DOM (in memory, if you will). This way your UI wont jump/skitter/shift.


Approach #3:

$(function ()
{
    var e = $("...");
    var c = e.clone();

    c.show();
    c.html("...");
    c.hide();

    e.after(c);
    e.remove();        
});

A shoter version (not tested):

var e = $("...");

e.append(e.clone().show().html("...").hide()).remove();

Approach #2:

Note: you will need a container which you can re-insert the detached element into

$(function ()
{
    var e = $("...");
    var c = $("container");

    e.detach();
    e.show();
    e.html("...");
    e.hide();
    c.add(e);    
});

And just for good measure - not tested - the shorter version:

$("container").add($("...").detach().show().html("...").hide());

I had the same issue. None of the above solution worked for me. I finnaly I could get the value of my hidden input by using DOM element:

var el = document.getElementById("commentFriend");
var hiddenValue =  el.getAttribute("value");

Too late answer but maybe for someone is good. If you want have some elements with display:none and use functions of jQuery or JS you need hidden the elements with jQuery first and next all is good, you can do it with addClass and define your class or with .hide() and .show().

For example

$(document).ready(function() {
    $('element1').hide();
    $('element2').hide();

    var element1 = $('element1').val();
    console.log(element1);
});

Is the same with CSS you create for example class .hidden and do this.

CSS

.hidden {
    display:none;
}

jQuery:

$(document).ready(function() {
    $('element1').addClass('hidden');
    $('element2').addClass('hidden');

    var element1 = $('element1').val();
    console.log(element1);
});

Whit JavaScript do it adding CSS class to your element.