Установить значение скрытого поля в форме с использованием jquery's. .Val () »не работает

StackOverflow https://stackoverflow.com/questions/2979772

  •  24-10-2019
  •  | 
  •  

Вопрос

Я пытался установить значение скрытого поля в форме с использованием 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>

Я также попробовал следующий обходной путь, установив тип ввода на «Текст», а затем используя стиль «Display: None» для блока ввода. Но это также терпит неудачу! Похоже, что у jQuery есть некоторые проблемы с установкой скрытых или невидимых полей ввода.

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

Это было полезно?

Решение

:text не удастся для ввода со значением типа hidden. Анкет Это также гораздо эффективнее использовать:

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

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

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

Другие советы

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

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

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

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

Работает как шарм. Не подскажите, почему jQuery не отступает к этому.

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

$("#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" />

ИЗМЕНЕНИЯ!!

Должен быть «строка»

$('input[name=hidden_field_name]').val('newVal');

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

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

ни

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

делал.

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

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

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

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

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

У меня была такая же проблема, и я узнал, что случилось. У меня был 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" />

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

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

$("#price").val('' + price);

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

Обновление Textfield

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

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

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

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

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

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

$('#model_framerate').children().each(function(i, el){
    var v = $(el).val();
    if (v === String(framerateVal)) { 
        $(el).attr('selected','selected');
    } else {
        $(el).attr('selected',null);
    }
}

Еще одна Gotcha здесь потратила впустую некоторое время, поэтому я подумал, что пройду по кончику. У меня было скрытое поле, которое я дал идентификатор, который имел. а также [] кронштейны в имени (из -за использования со Struts2) и селектора $("#model.thefield[0]") Не найдет мое скрытое поле. Переименование идентификатора, чтобы не использовать периоды и кронштейны, привели к началу работы селектора. Итак, в конце концов я закончил с идентификатором model_the_field_0 Вместо этого селектор работал нормально.

Использование ID:

$('input:hidden#texens').val('tinkumaster');

Использование класса:

$('input:hidden.many_texens').val('tinkumaster');

Просто используйте синтаксис ниже Get and Set

ПОЛУЧИТЬ

//Script 
var a = $("#selectIndex").val();

Здесь переменная содержит значение Hiddenfield (SelectIndex)

Серверная сторона

<asp:HiddenField ID="selectIndex" runat="server" Value="0" />

УСТАНОВЛЕН

var a =10;
$("#selectIndex").val(a);

Если вы ищете HAML, то это ответ для скрытого поля, чтобы установить значение в скрытое поле, как 

%input#forum_id.hidden

В вашем jQuery просто преобразование значения в строку, а затем добавьте его с помощью свойства ATTR в jQuery. Надеюсь, это также работает на других языках.

$('#forum_id').attr('val',forum_id.toString());

<javascript>


slots=''; hidden=''; basket = 0;

    cost_per_slot = $("#cost_per_slot").val();
    //cost_per_slot = parseFloat(cost_per_slot).toFixed(2)

    for (i=0; i< check_array.length; i++) {
        slots += check_array[i] + '\r\n';
        hidden += check_array[i].substring(0, 8) + '|';
        basket = (basket + parseFloat(cost_per_slot));
    }

    // Populate the Selected Slots section
    $("#selected_slots").html(slots);

    // Update hidden slots_booked form element with booked slots
    $("#slots_booked").val(hidden);     

    // Update basket total box
    basket = basket.toFixed(2);
    $("#total").html(basket);

Любой другой, кто борется с этим, есть очень простой «встроенный» способ сделать это с jQuery:

<input type="search" placeholder="Search" value="" maxlength="256" id="q" name="q" style="width: 300px;" onChange="$('#ADSearch').attr('value', $('#q').attr('value'))"><input type="hidden" name="ADSearch" id="ADSearch" value="">

Это устанавливает значение скрытого поля, поскольку текст вводится в видимый ввод, используя событие OnChange. Полезно (например, в моем случае), когда вы хотите передать значение поля в форму «расширенный поиск» и не заставлять пользователя повторно использовать свой поисковый запрос.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top