Q

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

2010-06-05 5 views 156 likes

156

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

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

<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 есть некоторые проблемы с установкой скрытых или невидимых полей ввода.

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

источник

2010-06-05 texens

A

ответ

249

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

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

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

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

источник

2010-06-05 09:12:11

+0

Энди, спасибо за быстрые ответ. Я на самом деле пробовал сначала «#texens», а затем «#input: hidden # texens», и ни один из них не работал. Когда я изменил тип ввода в форме от «hidden» до «text» и «#input: hidden: texens» до «#input: text: texens», он работал без особых проблем. «#input: text # texens» был опечатан выше, и должен был быть «#input: hidden # texens» или просто «#texens», как вы только что упоминали. Итак, кажется, что значения скрытого поля не изменяются. – texens

+1

@texens: Я подозреваю, что проблема кроется в другом месте. Как видно из примера, с которым я связан, 'val()' отлично работает на скрытом входе, изменяя значение с "not changed" на "changed". Я пересмотрел пример, чтобы включить код, который вы вставили выше, с предупреждением для подтверждения изменения значения: http://jsbin.com/elovo/2/edit –

+0

Энди, Большое спасибо за пример. Я запустил код, упомянутый выше, и он работает точно так, как предполагается. И предупреждение действительно подтверждает, что значение было изменено. Я открыл источник страницы, используя функцию «Просмотр страницы источника» Firefox. И в источнике страницы он по-прежнему показывает старое значение, а не новое значение (даже для кода в пастебине, упомянутом выше). Но поле предупреждения подтверждает измененное значение. Итак, я предполагаю, что это проблема Firefox (или я слишком глуп и не замечаю что-то важное?). Еще раз спасибо за ваше время :) – texens

7

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

источник

2010-09-10 21:40:59

+0

+1 от меня! Вы правы. Значение и .val() возникли при обновлении с помощью jQuery. Вы нашли что-нибудь вокруг? – NullPointer

15

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

CHANGES !!

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

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

CHANGES !!

должен быть «строка вещь»

источник

2011-07-05 07:27:15

+2

Это исправило это и для меня. закончил с использованием '.val ('0')', который корректно проанализирован 'parseInt' в Javascript, а также' int() 'в Python, мой сервер. – rattray

57

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

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

источник

2011-11-09 23:23:22

+3

Опасайтесь, это может быть очень медленным в старых браузерах (http://learn.jquery.com/using-jquery-core/selecting-elements/) –

+0

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

1

Еще одна уловка здесь потеряла часть моего времени, поэтому я подумал, что пройду по кончику. У меня было скрытое поле, в котором я дал идентификатор. и [] скобки в имени (из-за использования с struts2) и селектор $("#model.thefield[0]") не найдут мое скрытое поле. Переименование идентификатора, чтобы не использовать периоды и скобки, заставило селектор начать работу. Таким образом, в итоге у меня появился идентификатор model_the_field_0, и селектор работал нормально.

источник

2012-10-24 18:03:14 user738048

+0

Это потому, что ваш селектор '$ («# model.thefield [0]») 'интерпретируется как: элемент с' id', равный 'model', css' class' 'thefield' и некоторый' атрибут', называемый '0' ... Если вы хотите использовать эти символы в своем «id», используя подход, предложенный Чаком Кальлебом в [его ответе] (http://stackoverflow.com/a/8073145/177710). В HTML5 «id» может быть любой строкой, которая не является пустой и не содержит пробельных символов ([ссылка] (http://www.w3.org/TR/html-markup/global-attributes.html#common. attrs.id)). – Oliver

9

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

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

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

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

источник

2013-05-17 20:03:54 Sophie

+0

Это ответ, который мне нравится. Использование функции attr позволяет избежать всех описанных выше искажений и делает правильные действия. – gmcgath

4

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

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

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

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

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

источник

2013-10-17 16:54:39 Jardalu

20

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

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

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

источник

2014-04-03 16:29:46 zamber

8

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

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

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

ни

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

сделал.

источник

2014-08-20 10:40:51

0

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

источник

2015-11-09 20:55:03 carolina

1

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

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

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

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

источник

2015-11-17 03:10:48

2

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

Обновление TextField

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

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

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

Update булево

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

Update Selec т (с числом или строкой)

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

источник

2016-01-07 17:14:43

0

Просто используйте синтаксис ниже получить и установить

GET

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

здесь переменная будет содержать значение скрытое (selectindex)

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

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

SET

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

источник

2016-08-07 12:50:28 mzonerz

0

Любой другой, кто борется с этим, есть очень простой "встроенный" способ сделать это с помощью 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. Полезно (например, в моем случае), где вы хотите передать значение поля форме «Расширенный поиск», а не заставлять пользователя повторно вводить свой поисковый запрос.

источник

2016-08-19 17:59:39 Joyrex

1

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

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

источник

2016-09-18 06:40:29 Shawn