Встановити значення прихованого поля у формі за допомогою ".val ()" jQuery не працює

188

Я намагався встановити значення прихованого поля у формі за допомогою 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>

Я також спробував таке вирішення, встановивши тип введення "текст", а потім використовуючи стиль "відображення: немає" для поля введення. Але це теж не вдається! Здається, jQuery має деякі проблеми з налаштуванням прихованих або невидимих полів введення.

Будь-які ідеї? Чи існує рішення для цього, що насправді працює?

jquery set hidden-fields

— текстиль
джерело

316

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

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

Атрибути ідентифікатора повинні бути унікальними на веб-сторінці, переконайтеся, що це ваше, оскільки це може сприяти виникненню будь-яких проблем, а вказання більш складного селектора просто уповільнює і не виглядає так акуратно.

Приклад на http://jsbin.com/elovo/edit , використовуючи код прикладу на веб-сайті http://jsbin.com/elovo/2/edit

— Енді Е
джерело

Енді, дякую за швидку відповідь. Я фактично спробував спочатку "#texens", а потім із "#input: hidden # texens", і жоден з них, здавалося, не працює. Коли я змінив тип введення у формі з "прихований" на "текст", а "#input: hidden: texens" на "#input: text: texens", він працював без проблем. "#Input: text # texens" був помилковим помилкою вище, і він повинен був бути "#input: hidden # texens" або просто "#texens", як ви недавно згадували. Отже, схоже, що значення прихованого поля не змінюються.

— texens

1

@texens: Я б підозрював, що проблема полягає в іншому місці. Як видно з прикладу, до якого я посилаюся, val()на прихованому вході працює чудово, змінюючи значення з "не змінено" на "змінилося". Я переглянув приклад, щоб включити код, який ви вставили вище, з попередженням про підтвердження зміни значення: jsbin.com/elovo/2/edit

— Енді Е

Енді, велике спасибі за приклад. Я запустив згаданий вище код, і він працює точно так, як і належить. І попередження справді підтверджує, що значення було змінено. Я відкривав джерело сторінки за допомогою функції "Переглянути джерело сторінки" Firefox. А в джерелі сторінки все ще відображається старе значення, а не нове значення (навіть для коду в пастібі, згаданому вище). Але, вікно попередження підтверджує змінене значення. Отже, я припускаю, що це проблема Firefox (чи я занадто дурний і не помічаю щось важливе?). Ще раз, дякую за ваш час :)

— texens

2

@texens: немає проблем. Я б запропонував використовувати належний інструмент налагодження, Firebug, якщо ви використовуєте Firefox, а не переглядати джерело. Поведінка "джерела перегляду" є більш-менш однаковою для всіх браузерів і відображатиме завантажений, немодифікований вихідний код сторінки.

— Енді Е

2

Я не думаю, що проблема пов’язана з Firefox або певним інструментом стільки, скільки з способом відображення та відображення модифікованого HTML. У мене така ж ситуація, що і в ОП, за винятком того, що в роботі jQuery є дещо більше. У моєму випадку, як і в цьому, код працює правильно - подія клацання правильно оновлює введення типу "прихований" - але Firebug не відображає оновлені значення для прихованих полів, навіть якщо вони були оновлені і jQuery може отримати доступ до них , і навіть якщо оновлені значення для видимих полів відображаються у Firebug правильно.

— Dave DuPlantis

62

Якщо у вас виникли проблеми з налаштуванням значення прихованого поля, оскільки ви передаєте йому ідентифікатор, це рішення:

Замість $("#hidden_field_id").val(id)просто робити $("input[id=hidden_field_id]").val(id). Не впевнений, у чому різниця, але це працює.

— Чак Каллебс
джерело

3

Остерігайтеся, це може бути дуже повільним у старих браузерах ( learn.jquery.com/using-jquery-core/selecting-elements )

— Alex Klaus

Не працює для мене, браузер - Chrome 48. Не знаю, чому

— Gurpreet Singh

26

Нарешті, я знайшов рішення, і це просте:

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

Працює як шарм. Немає поняття, чому jQuery не повертається до цього.

— замбер
джерело

Технічно це використовує DOM не jQuery, але це просто і працює (я намагався майже кожну відповідь тут для мого випадку зміни значення під час подання форми, і вони не працювали).

— hlongmore

Тому я опублікував цю відповідь;). Радий, що це допомогло. Що стосується jQuery, вони мають потенційне виправлення тут github.com/jquery/jquery/blob/…, але це лише для type="radio". Мені лінь повідомити про проблему, особливо якщо я вирішив цю проблему 4 роки тому. Я також розірваний, якщо це слід виправити в jQuery - можливо, він реалізований таким чином, щоб захистити jQuery малюків від себе? Хто знає ...

— zamber

1

Рішення jQuery також не працювало для мене. Довелося поїхати з Vanilla JS.

— Варун Шарма

17

У мене була така ж проблема. як не дивно 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" />

ЗМІНИ !!

повинна бути "струнною річчю"

— mr.zaga
джерело

2

Це виправило і для мене. Я в кінцевому підсумку використовував .val(' 0'), що правильно аналізується parseIntв Javascript, а також int()в Python, мій бекенд.

— rattray

10

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

працював на мене, коли ні те

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

ні

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

зробив.

— Дірк Сейферт
джерело

9

.val не працював для мене, тому що я захоплюю сторону сервера атрибутів значення, і значення не завжди оновлювалося. тому я використав:

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

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

Сподіваюся, це комусь допоможе.

— Софі
джерело

Ось така відповідь мені подобається. Використання функції attr дозволяє уникнути всіх згаданих вище викривлень і робить все правильно.

7

Власне, це тривала проблема. Хоча Енді має рацію щодо завантаженого джерела, .val (...) і .attr ("значення", ...), схоже, насправді не змінюють html. Я думаю, що це проблема javascript, а не проблема jquery. Якби ви навіть використовували firebug, у вас виникло б те саме питання. Хоча здається, що якщо ви подасте форму із зміненими значеннями, вона буде проходити, html не зміниться. Я зіткнувся з цією проблемою, намагаючись створити попередній перегляд друку модифікованої форми (виконуючи [form] .html ()), вона копіює все в порядку, включаючи всі зміни, крімзначення змін. Таким чином, моє попереднє попереднє перегляд друку дещо марно ... моєму вирішенню може бути «побудувати» приховану форму, що містить додані їм значення, або генерувати попередній перегляд незалежно та зробити кожну модифікацію, яку користувач вносить, також змінити попередній перегляд. Обидва є неоптимальними, але якщо хтось не з'ясує, чому поведінка встановлення значення не змінює html (у припущенні DOM), це доведеться робити.

+1 від мене! Ти маєш рацію. value і .val () має проблеми під час оновлення за допомогою jQuery. Ви щось знайшли навколо?

— NullPointer

4

У мене виникло те саме питання, і я з’ясував, що не так. У мене 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

У моєму випадку я використовував не рядок (ціле число) як параметр val (), який не працює, трюк такий же простий, як

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

— Шон
джерело

2

Використання 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);
    }
}

— Джуліан Манн
джерело

1

Інша готча тут витрачала частину мого часу, тож я думала, що пройду по кінчику. У мене було приховане поле, я дав ідентифікатор, який мав. і []дужки в імені (через використання struts2), і селектор $("#model.thefield[0]")не знайде моє приховане поле. Перейменування ідентифікатора, щоб не використовувати періоди та дужки, призвело до того, що селектор почав працювати. Тож врешті-решт я model_the_field_0замість цього отримав ідентифікатор, і селектор працював чудово.

— user738048
джерело

Це тому , що ваш селектор $("#model.thefield[0]")інтерпретується , як: елемент з idрівним model, КАС classз thefieldі деякі attributeназивають 0... Якщо ви хочете використовувати ці символи в idвикористанні підхід , запропонований Чак Callebs в своїй відповіді . У HTML5 idможе бути будь-який рядок, який не порожній і не містить символів пробілу ( посилання ).

— Олівер

1

Використання ідентифікатора:

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

Використання класу:

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

— Арман Н
джерело

0

Якщо ви шукаєте haml, це відповідь на приховане поле, щоб встановити значення прихованого поля типу

%input#forum_id.hidden

У вашому jquery просто перетворіть значення у рядок, а потім додайте його, використовуючи attr властивість у jquery. сподіваюся, що це працює і на інших мовах.

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

— Яррабхумі
джерело

-1

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

— каролін
джерело

-1

Просто використовуйте синтаксис нижче get and set

ЗАРАЗ

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

тут змінна буде містити значення прихованого поля (selectindex)

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

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

НАСТРОЙКА

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

— mzonerz
джерело

ОП запитує, чому такий код, як ваш, не працює для нього, тому це марно для цього питання.

— ПрофК

-1

У всіх, хто бореться з цим, існує дуже простий "вбудований" спосіб зробити це за допомогою 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. Корисно (як у моєму випадку), коли ви хочете передати значення поля у форму "Розширений пошук", а не змушувати користувача повторно вводити пошуковий запит.

— Joyrex
джерело