web-dev-qa-db-ja.com

jQuery ".val（）"を使用したフォーム内の隠しフィールドの設定値が機能しない

私はjQueryを使ってフォームの中に隠しフィールドの値を設定しようとしましたが、成功しませんでした。

これが問題を説明するサンプルコードです。入力タイプを "text"にしておけば、問題なく動作します。しかし、入力タイプを "hidden"に変更してもうまくいきません。

<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が隠れた、または見えない入力フィールドを設定するのに問題があるようです。

何か案は？実際に動作するこの問題に対する回避策はありますか？

jquerysethidden-fields
178
texens

:textは、type値がhiddenの入力に対して失敗します。以下のものを使うほうがはるかに効率的です。

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

ID属性はWebページ上で一意である必要があります。これは問題が発生する可能性があるため、自分のものであることを確認してください。

http://jsbin.com/elovo/edit の例、 http：//の例のコードを使用jsbin.com/elovo/2/edit

285
Andy E

IDを渡しているために隠しフィールドの値を設定できない場合は、これが解決策です。

$("#hidden_field_id").val(id)の代わりに$("input[id=hidden_field_id]").val(id)を実行してください。違いが何であるかわからないが、それはうまくいきます。

60
Chuck Callebs

最後に、私は解決策を見つけました、そしてそれは簡単なものです：

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

魅力のように働きます。 jQueryがこれにフォールバックしない理由はわかりません。

25
zamber

私は同じ問題を抱えていました。奇妙なことにグーグルクロムとおそらく他の人（わからない）が好きではなかった

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

変更！

「文字列」でなければなりません

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

どちらも私のために働いた

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

また

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

した。

10
Dirk Seifert

値属性サーバー側を取得していて、値が常に更新されるとは限らないため、.valは私には機能しませんでした。だから私は使用しました：

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

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

誰かに役立つことを願っています。

9
Sophie

実際、これは継続的な問題です。 Andyはダウンロードされたソースについては正しいのですが、.val（...）と.attr（ 'value'、...）は実際にはHTMLを変更していないようです。私はこれがJavaScriptの問題であり、 そうではない jqueryの問題だと思います。あなたがfirebugを使ったことがあったとしても、あなたは同じ質問をしたでしょう。変更された値を使用してフォームを送信した場合、HTMLは変更されません。変更されたフォームの印刷プレビュー（[form] .html（）を実行）を作成しようとして、この問題に遭遇しました。それは、すべての変更 除く 値の変更を含め、すべて問題なくコピーします。したがって、私のモーダル印刷プレビューは無用です...私の回避策は、それらが追加した値を含む隠されたフォームを '構築'するか、独自にプレビューを生成し、ユーザーが行う各修正をプレビューも修正することです。どちらも最適ではありませんが、値設定の動作によってHTMLが変更されない理由を誰かが考えていない限り（DOMではこれを前提としています）、変更する必要があります。

7
user444777

私は同じ問題を抱えていました、そして、私は何が間違っていたかわかりました。 HTMLを次のように定義しました。

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

サーバー上でフォームの値を読み取ると、常にEメールが空となっていました。頭をかいて（そして何度も検索した後）、その間違いはフォーム/入力を正しく定義していないことに気づいた。 （次に示すように）入力を修正すると、それは魅力的に働きました

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

他の人が同じ問題を抱えている場合に備えて、このスレッドに追加する。

4
Jardalu

私の場合、val（）のパラメータとして文字列以外（整数）を使用していましたが、うまくいきません。トリックは同じくらい簡単です。

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

ここで別の問題が私の時間の一部を無駄にしたので、私は私が先端を通り過ぎると思いました。私は持っていたIDを与えた隠しフィールドを持っていました。 （struts2で使用するため）および[]という名前の括弧とセレクタ$("#model.thefield[0]")は私の隠しフィールドを見つけられませんでした。ピリオドと大括弧を使用しないようにIDの名前を変更すると、セレクターが機能し始めました。それで結局私は代わりにmodel_the_field_0のidで終わりました、そしてセレクタはうまくいきました。

1
user738048

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

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);
    }
}
1
Julian Mann

IDを使用する：

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

クラスを使う：

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

getとsetの下の構文を使うだけです

GET

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

ここで変数はhiddenfield（selectindex）の値を保持します

サーバー側

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

SET

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

Hamlを検索している場合、これは次のような隠しフィールドに値を設定する隠しフィールドの答えです

%input#forum_id.hidden

Jqueryで値を文字列に変換し、jqueryのattrプロパティを使用して追加します。これが他の言語でも機能することを願っています。

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