jQuery val() inside display: none

user_267304 0
Viewed 19456
<a href="#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?

jquery
4 Answers

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.

user_90120140
Related