jQueryの「.val（）」を使用してフォームの非表示フィールドの値を設定しても機能しない

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>

入力タイプを「テキスト」に設定し、入力ボックスに「display：none」スタイルを使用することで、次の回避策も試しました。しかし、これも失敗します！jQueryが非表示または非表示の入力フィールドの設定に問題があるようです。

何か案は？実際に機能する回避策はありますか？

jquery  set  hidden-fields 
— テクセン
ソース

回答:

316

:textタイプ値がの入力では失敗しますhidden。使用するだけでもはるかに効率的です。

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

ID属性はWebページで一意である必要があります。これは、発生している問題の原因となる可能性があることを確認してください。より複雑なセレクターを指定すると、動作が遅くなり、見栄えがよくありません。

例http://jsbin.com/elovo/editであなたのサンプルコードを使用して、http://jsbin.com/elovo/2/edit

— アンディE
ソース
アンディ、迅速な対応に感謝します。私は実際には最初に "#texens"を試し、次に "#input：hidden＃texens"を試しましたが、どちらも機能していないようです。フォームの入力タイプを「hidden」から「text」に、「＃input：hidden：texens」を「#input：text：texens」に変更したところ、問題なく動作しました。「#input：text＃texens」は上記のタイプミスであり、「＃input：hidden＃texens」または単に「#texens」である必要があります。したがって、非表示フィールドの値は変更されていないようです。
— texens
1
@texens：問題は他の場所にあると思います。私がリンクした例からわかるようval()に、非表示の入力で問題なく機能し、値を「変更なし」から「変更済み」に変更します。上で貼り付けたコードと値の変更を確認するアラートを含むように例を修正しました：jsbin.com/elovo/2/edit
— Andy E
アンディ、例をありがとう。上記のコードを実行しましたが、想定どおりに機能します。そしてアラートは実際に値が変更されたことを確認します。私はFirefoxの「ページソースの表示」機能を使用してページソースを開いていました。また、ページソースでは、古い値が表示され、新しい値は表示されません（上記のペーストビンのコードの場合でも）。ただし、アラートボックスは変更された値を確認します。それで、私はこれがFirefoxの問題であると想定しています（または私は愚かすぎて何か重要なものを見落としているのでしょうか？）。もう一度、お時間をいただきありがとう
— ござい
2
@texens：問題ありません。ソースを表示する代わりに、Firefoxを使用している場合は、適切なデバッグツールFirebugを使用することをお勧めします。「ソースの表示」の動作はすべてのブラウザーでほぼ同じであり、ダウンロードされたページの変更されていないソースコードが表示されます。
— Andy E
2
変更されたHTMLがどのようにレンダリングされ、表示されるかと同じくらい、Firefoxまたは特定のツールに問題があるとは思いません。OPと同じ状況ですが、jQueryがかなり多く含まれています。私の場合、この例のように、コードは正しく機能します-クリックイベントは「非表示」タイプの入力を正しく更新しますが、Firebugは非表示フィールドの更新された値を表示しません。 、および可視フィールドの更新された値がFirebugに正しく表示されていても
— Dave DuPlantis
62

IDを渡すために非表示フィールドの値を設定するのに問題がある場合は、これが解決策です。

$("#hidden_field_id").val(id)ただする代わりに$("input[id=hidden_field_id]").val(id)。違いはわかりませんが、機能します。

— チャック・カレブス
ソース
3
注意してください、これは古いブラウザ（learn.jquery.com/using-jquery-core/selecting-elements）では非常に遅くなる可能性があります
— Alex Klaus
動作しません、ブラウザ
— -Chrome48。
26

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

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

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

— ザンバー
ソース
技術的にはこれはjQueryではなくDOMを使用しますが、それは単純で機能します（フォーム送信時に値を変更する場合について、ここでほぼすべての答えを試しましたが、機能しませんでした）。
— hlongmore
それが私がこの回答を投稿した理由です;）。それが助けてくれてうれしい。jQueryに関しては、ここでgithub.com/jquery/jquery/blob/…の潜在的な修正がありますが、それだけですtype="radio"。特に4年前にこの問題を解決したので、私は問題を報告するのが面倒です。また、jQueryで修正する必要がある場合は引き裂かれます-おそらく、jQueryキディを自分自身から保護するためにその方法で実装されていますか？誰が知っているのか...
— zamber
1
jQueryソリューションも私にとってはうまくいきませんでした。バニラJSと一緒に行かなければならなかった。
— Varun Sharma
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" />

変更!!

「ひも状」でなければならない

— ザガ氏
ソース
2
これで修正されました。私は、JavaScriptとPythonのバックエンドで.val(' 0')正しく解析されるを使用してしまいました。parseIntint()
— ラットトレイ14
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

実際、これは継続的な問題です。Andyはダウンロードしたソースについては正しいですが、.val（...）と.attr（ 'value'、...）は実際にはhtmlを変更していないようです。これはJavaScriptの問題であり、ではないと思い、jqueryの問題で。もしあなたがファイアバグを使っていたら、同じ質問があったでしょう。変更された値を使用してフォームを送信すると、フォームは通過するようですが、htmlは変更されません。私はすべての変更を含む、大丈夫、それをコピーするすべてのもの（[フォーム]の.htmlを（）やって）変更されたフォームの印刷プレビューを作成しようとし、この問題に遭遇した除き、値が変化します。したがって、私のモーダル印刷プレビューは少し役に立たない...私の回避策は、追加した値を含む非表示のフォームを「構築」するか、プレビューを個別に生成して、ユーザーが行う各変更を加えてプレビューを変更する必要がある場合があります。どちらも最適ではありませんが、値を設定する動作によってhtml（私が想定しているDOM内）が変更されない理由を誰かが理解しない限り、変更する必要があります。

私からの+1！あなたが正しい。valueと.val（）は、jQueryを使用して更新中に問題が発生しました。周りに何か見つけましたか？
— NullPointer 2013
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

ここでもう1つの落とし穴が私の時間の一部を無駄にしたので、チップを渡すと思いました。私が持っていたIDを与えた隠しフィールドがありました。そして[]、ブラケット（Struts2のと使用のために）名前にし、セレクタは$("#model.thefield[0]")私の隠されたフィールドを見つけられないでしょう。ピリオドとブラケットを使用しないようにIDの名前を変更すると、セレクターが機能し始めました。したがって、最終的に私はmodel_the_field_0代わりにidで終わり、セレクターは正常に機能しました。

— user738048
ソース
あなたのセレクタはそれのため$("#model.thefield[0]")と要素：として解釈されているidに等しいmodel、CSS classのthefieldといくつかのattributeと呼ばれる0、あなたにこれらの文字を使用したい場合は... id使用中のチャックCallebsによって提案されたアプローチ彼の答えを。HTML5では、id空ではなく、スペース文字を含まない任意の文字列を使用できます（参照）。
— オリバー
1

IDを使用：

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

クラスを使用：

$('input:hidden.many_texens').val('tinkumaster');
— アルマンH
ソース
0

あなたがhamlを検索している場合、これは値を非表示フィールドに設定するための非表示フィールドの答えです 

%input#forum_id.hidden

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

$('#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およびsetの下の構文を使用するだけ

取得する

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

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

サーバ側

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

セットする

var a =10;
$("#selectIndex").val(a);
— mzonerz
ソース
OPはなぜあなたのようなコードが彼のために機能しないのかを尋ねているので、これはこの質問には役に立ちません。
— ProfK
-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イベントを使用してテキストが可視入力に入力されると、非表示フィールドの値が設定されます。（私の場合のように）フィールド値を「詳細検索」フォームに渡し、ユーザーに検索クエリの再入力を強制しない場合に役立ちます。

— ジョイレックス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.