Задать значение скрытого поля в форме с помощью jQuery ".val ()" не работает - PullRequest
Новая
       36

Задать значение скрытого поля в форме с помощью jQuery ".val ()" не работает

180 голосов
/ 05 июня 2010

Я пытался установить значение скрытого поля в форме, используя jQuery, но безуспешно.

Вот пример кода, который объясняет проблему. Если я оставлю тип ввода «текст», он будет работать без проблем. Но изменение типа ввода на «скрытый» не работает! 

<html>

    <head>
        <script type="text/javascript" src="jquery.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("input:text#texens").val("tinkumaster");
                });
            });
        </script>
    </head>

    <body>
        <p>
            Name:
            <input type="hidden" id="texens" name="user" value="texens" />
        </p>
        <button>
            Change value for the text field
        </button>
    </body>

</html>

Я также попробовал следующий обходной путь, установив тип ввода «text», а затем используя стиль «display: none» для поля ввода. Но это также не удается! Кажется, у jQuery есть некоторые проблемы при настройке скрытых или невидимых полей ввода.

Есть идеи? Есть ли обходной путь для этого, который действительно работает?

Ответы [ 15 ]

288 голосов
/ 05 июня 2010

:text завершится ошибкой для входа со значением типа hidden. Также гораздо эффективнее просто использовать: 

$("#texens").val("tinkumaster");

Атрибуты идентификатора должны быть уникальными на веб-странице, убедитесь, что они принадлежат вам, поскольку это может способствовать возникновению любых проблем, с которыми вы столкнулись, а указание более сложного селектора просто замедляет работу и не выглядит аккуратно.

Пример на http://jsbin.com/elovo/edit, с использованием вашего примера кода на http://jsbin.com/elovo/2/edit

60 голосов
/ 10 ноября 2011

Если у вас возникают проблемы при установке значения скрытого поля, поскольку вы передаете ему идентификатор, вот решение:

Вместо $("#hidden_field_id").val(id) просто сделайте $("input[id=hidden_field_id]").val(id). Не уверен, в чем разница, но это работает.

25 голосов
/ 03 апреля 2014

Наконец-то я нашел решение, и оно простое: 

document.getElementById("texens").value = "tinkumaster";

Работает как шарм. Понятия не имею, почему jQuery не возвращается к этому.

18 голосов
/ 05 июля 2011

У меня была такая же проблема. как ни странно гугл хром и возможно другим (не уверен) не понравился 

$("#thing").val(0);

input type="hidden" id="thing" name="thing" value="1" />

(без изменений) 

$("#thing").val("0");

input type="hidden" id="thing" name="thing" value="1" />

(без изменений)

но это работает !!!! 

$("#thing").val("no");

input type="hidden" id="thing" name="thing" value="no" />

ИЗМЕНЕНИЙ !! 

$("#thing").val("yes");

input type="hidden" id="thing" name="thing" value="yes" />

ИЗМЕНЕНИЙ !!

должно быть "строчкой"

10 голосов
/ 20 августа 2014 
$('input[name=hidden_field_name]').val('newVal');

работал для меня, когда ни 

$('input[id=hidden_field_id]').val('newVal');

ни 

$('#hidden_field_id').val('newVal');

сделал.

9 голосов
/ 18 мая 2013

.val у меня не сработал, потому что я беру серверную часть атрибута значения и значение не всегда обновлялось. так что я использовал: 

var counter = 0;
$('a.myClickableLink').click(function(event){
   event.preventDefault();
   counter++;

   ...
   $('#myInput').attr('value', counter);
}

Надеюсь, это кому-нибудь поможет.

7 голосов
/ 11 сентября 2010

На самом деле, это постоянная проблема. В то время как Энди прав в отношении загруженного источника, .val (...) и .attr ('value', ...), похоже, фактически не изменяют html. Я думаю, что это проблема JavaScript, а не проблема jquery. Если бы вы использовали Firebug даже у вас был бы тот же вопрос. Хотя кажется, что если вы отправите форму с измененными значениями, она пройдет, HTML не изменится. Я столкнулся с этой проблемой, пытаясь создать предварительный просмотр измененной формы (делая [form] .html ()), он копирует все в порядке, включая все изменения , за исключением изменений значений . Таким образом, мой модальный предварительный просмотр печати несколько бесполезен ... Мой обходной путь, возможно, должен заключаться в том, чтобы «создать» скрытую форму, содержащую добавленные значения, или создать предварительный просмотр независимо и сделать каждую модификацию, которую делает пользователь, также изменить предварительный просмотр. И то, и другое неоптимально, но если кто-то не выяснит, почему поведение установки значений не меняет html (в DOM, я предполагаю), это должно будет сделать.

4 голосов
/ 17 октября 2013

У меня была такая же проблема, и я узнал, что случилось.HTML-код был определен как 

<form action="url" method="post">
    <input type="hidden" id="email" />
<form>
<script>
    function onsomeevent()
    {
       $("#email").val("a@a.com");
    }
</script>

. Чтение значений формы на сервере всегда приводило к тому, что электронная почта была пустой.Почесав голову (и многочисленные поиски), я понял, что ошибка не в правильном определении формы / ввода.При изменении ввода (как показано далее) он работал как шарм 

<input type="hidden" id="email" name="email" />

Добавление в эту ветку на случай, если у других возникнет та же проблема.

3 голосов
/ 18 сентября 2016

В моем случае я использовал не-строку (целое число) в качестве параметра val (), который не работает, трюк такой же простой, как и 

$("#price").val('' + price);
1 голос
/ 07 января 2016

Использование val() не работает для меня. Я должен был использовать .attr() везде. Также у меня были разные типы входов, и я должен был быть достаточно явным в случае флажков и выбора меню.

Обновление текстового поля 

$('#model_name').attr('value',nameVal);

Обновить изображение рядом с вводом файла 

$('#img-avatar').attr('src', avatarThumbUrl);

Обновление логического 

if (isActive) {
    $('#model_active').attr('checked',"checked");
} else {
    $('#model_active').attr('checked', null) ;
}

Обновление выбора (с номером или строкой) 

$('#model_framerate').children().each(function(i, el){
    var v = $(el).val();
    if (v === String(framerateVal)) { 
        $(el).attr('selected','selected');
    } else {
        $(el).attr('selected',null);
    }
}
Страница:
...