jQuery val() inside display: none
<pre><code>&lt;a href="#addFriend" rel="facebox" title="[+] add &lt;?php echo $showU["full_name"]; ?&gt; as friend"&gt;
    &lt;div class="addFriend"&gt;&lt;/div&gt;&lt;/A&gt;

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

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

<pre><code>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("");
        }
    });
}
</code></pre>

<p><strong>Updated answer</strong></p>

<p>But when I remove the <code>display:none</code>, it works. How can I solve this?</p>
