JQuery val() внутри дисплей: нет

<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>

Моя форма, когда внутри этого элемента, который является ярлыком jquery, поле #commentFriend получает пустое значение в 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("");
        }
    });
}

Обновленный ответ

Но когда я удаляю display:none, он работает. Как я могу это решить?

Ответ 1

Для полей с display:none кажется, что val() не работает.

Я обойду это поведение с помощью attr():

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

Ответ 2

Есть три способа сделать это:

Сделайте элемент видимым, обновите его, а затем снова скройте.
отсоединить() элемент из DOM, сделать его видимым, обновить, скрыть, а затем снова вставить в DOM.
clone() элемент, сделать его видимым, обновить, скрыть, вставить в DOM и удалить оригинальный элемент.

Подход №2 и №3 - это, вероятно, ваши лучшие варианты, так как они не будут запускать повторную ничью. Все операции выполняются с элементами "снаружи" DOM (в памяти, если хотите). Таким образом, ваш пользовательский интерфейс не будет прыгать/скипетр/смену.

Подход № 3:

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

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

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

Версия для дробилки (не проверена):

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

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

Подход № 2:

Примечание. Вам понадобится контейнер, в который вы можете вставить отдельный элемент в

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

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

И только для хорошей меры - не проверено - более короткая версия:

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

Ответ 3

У меня была такая же проблема. Ни одно из вышеперечисленных решений не работало для меня. Я финал, я мог бы получить значение моего скрытого ввода с помощью элемента DOM:

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

Ответ 4

Слишком поздно ответить, но, возможно, для кого-то это хорошо. Если вы хотите иметь некоторые элементы с отображением: none и использовать функции jQuery или JS, вам нужно скрыть элементы с jQuery в первую очередь, это хорошо, вы можете сделать это с помощью addClass и определить свой класс или с помощью .hide() и .show(),

Например

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

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

То же самое с CSS, который вы создаете, например class.hidden, и делаете это.

CSS

.hidden {
    display:none;
}

JQuery

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

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

Whit JavaScript добавляет класс CSS к вашему элементу.