Setel nilai bidang tersembunyi dalam formulir menggunakan ".val ()" jQuery tidak berfungsi

188

Saya sudah mencoba mengatur nilai bidang tersembunyi dalam bentuk menggunakan jQuery, tetapi tidak berhasil.

Berikut adalah contoh kode yang menjelaskan masalahnya. Jika saya menyimpan tipe input ke "teks", ia bekerja tanpa masalah. Tetapi, mengubah tipe input menjadi "tersembunyi", tidak berfungsi!

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

Saya juga mencoba solusi berikut, dengan mengatur tipe input ke "teks" dan kemudian menggunakan gaya "display: none" untuk kotak input. Tapi, ini juga gagal! Tampaknya jQuery memiliki beberapa masalah pengaturan bidang input tersembunyi atau tidak terlihat.

Ada ide? Apakah ada solusi untuk ini yang benar-benar berfungsi?

jquery set hidden-fields texens
sumber

316

:textakan gagal untuk input dengan nilai jenis hidden. Ini juga jauh lebih efisien untuk digunakan:

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

Atribut ID harus unik pada halaman web, pastikan milik Anda karena hal ini dapat berkontribusi pada masalah yang Anda hadapi, dan menetapkan pemilih yang lebih rumit hanya memperlambat segalanya dan tidak terlihat rapi.

Contoh di http://jsbin.com/elovo/edit , menggunakan kode contoh Anda di http://jsbin.com/elovo/2/edit

Andy E
sumber

Andy, terima kasih atas tanggapan cepatnya. Saya benar-benar mencoba dengan "#texens" pertama, dan kemudian dengan "#input: hidden # texens" dan tak satu pun dari mereka yang bekerja. Ketika saya mengubah jenis input dalam bentuk dari "tersembunyi" menjadi "teks", dan "#input: hidden: texens" menjadi "#input: text: texens", ia bekerja tanpa masalah. "#Input: text # texens" adalah salah ketik di atas, dan seharusnya "#input: hidden # texens" atau hanya "#texens" seperti yang baru saja Anda sebutkan. Jadi, tampaknya nilai-nilai bidang tersembunyi tidak diubah.

Texas

1

@ Texas: Saya menduga masalahnya ada di tempat lain. Seperti yang dapat Anda lihat dari contoh yang saya tautkan, val()berfungsi dengan baik pada input tersembunyi, mengubah nilai dari "tidak diubah" menjadi "diubah". Saya telah merevisi contoh untuk menyertakan kode yang Anda tempel di atas, dengan peringatan untuk mengonfirmasi perubahan nilai: jsbin.com/elovo/2/edit

Andy E

Andy, Terima kasih banyak untuk contohnya. Saya menjalankan kode yang disebutkan di atas dan berfungsi persis seperti yang seharusnya. Dan lansiran memang mengkonfirmasi bahwa nilai telah diubah. Saya telah membuka sumber halaman menggunakan fitur "Lihat Sumber Halaman" Firefox. Dan di sumber halaman, masih menunjukkan nilai lama dan bukan nilai baru (bahkan untuk kode dalam pastebin yang disebutkan di atas). Tetapi, kotak peringatan mengkonfirmasi nilai yang diubah. Jadi, saya berasumsi ini adalah masalah Firefox (atau apakah saya terlalu bodoh dan mengabaikan sesuatu yang penting?). Sekali lagi, terima kasih atas waktu Anda :)

texens

2

@ teks: tidak ada masalah. Saya sarankan menggunakan alat debugging yang tepat, Firebug jika Anda menggunakan Firefox, daripada melihat sumber. Perilaku "sumber tampilan" kurang lebih sama di semua browser, dan akan menampilkan kode sumber halaman yang diunduh dan tidak dimodifikasi.

Andy E

2

Saya tidak berpikir masalahnya adalah dengan Firefox atau alat khusus sebanyak bagaimana dengan modifikasi HTML yang diberikan dan ditampilkan. Saya memiliki situasi yang sama dengan OP, kecuali bahwa ada sedikit lebih banyak jQuery yang terlibat. Dalam kasus saya, seperti dalam yang ini, kode berfungsi dengan benar - acara klik dengan benar memperbarui input dari jenis "tersembunyi" - tetapi Firebug tidak menampilkan nilai yang diperbarui untuk bidang tersembunyi, meskipun mereka telah diperbarui dan jQuery dapat mengaksesnya , dan meskipun nilai yang diperbarui untuk bidang yang terlihat ditampilkan di Firebug dengan benar.

Dave DuPlantis

62

Jika Anda kesulitan mengatur nilai bidang tersembunyi karena Anda memberikan ID padanya, ini solusinya:

Alih-alih $("#hidden_field_id").val(id)lakukan saja $("input[id=hidden_field_id]").val(id). Tidak yakin apa bedanya, tetapi berhasil.

Chuck Callebs
sumber

3

Hati-hati, ini bisa sangat lambat di peramban yang lebih lama ( learn.jquery.com/using-jquery-core/selecting-elements )

Alex Klaus

Tidak berfungsi untuk saya, peramban - Chrome 48. Tidak yakin mengapa

Gurpreet Singh

26

Akhirnya, saya telah menemukan solusi dan ini sederhana:

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

Bekerja seperti pesona. Tidak tahu mengapa jQuery tidak kembali ke ini.

zamber
sumber

Secara teknis ini menggunakan DOM bukan jQuery, tetapi sederhana, dan berfungsi (saya mencoba hampir setiap jawaban di sini untuk kasus saya mengubah nilai pada waktu pengiriman formulir, dan mereka tidak berfungsi).

lama

Itu sebabnya saya memposting jawaban ini;). Senang itu membantu. Adapun jQuery, mereka memiliki potensi perbaikan di sini github.com/jquery/jquery/blob/… tetapi hanya untuk type="radio". Saya malas melaporkan masalah, terutama mengingat saya memecahkan masalah ini 4 tahun yang lalu. Saya juga terkoyak jika harus diperbaiki di jQuery - mungkin ini diterapkan sedemikian rupa untuk melindungi kiddies jQuery dari diri mereka sendiri? Siapa tahu ...

zamber

1

Solusi jQuery juga tidak berhasil untuk saya. Harus pergi dengan Vanilla JS.

Varun Sharma

17

Saya memiliki masalah yang sama. anehnya google chrome dan mungkin yang lain (tidak yakin) tidak suka

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

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

(tidak ada perubahan)

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

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

(tidak ada perubahan)

tapi ini berhasil !!!!

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

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

PERUBAHAN !!

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

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

PERUBAHAN !!

harus menjadi "string"

mr.zaga
sumber

2

Ini memperbaikinya bagi saya juga. Saya akhirnya menggunakan .val(' 0'), yang diuraikan dengan benar parseIntdalam Javascript dan int()Python, backend saya.

rattray

10

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

bekerja untuk saya, ketika keduanya

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

maupun

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

melakukan.

Dirk Seifert
sumber

9

.val tidak bekerja untuk saya, karena saya meraih sisi server atribut nilai dan nilai tidak selalu diperbarui. jadi saya menggunakan:

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

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

Semoga ini bisa membantu seseorang.

Sophie
sumber

Itulah jawaban yang saya suka. Menggunakan fungsi attr menghindari semua liuk yang disebutkan di atas dan melakukan hal yang benar.

7

Sebenarnya, ini adalah masalah yang berkelanjutan. Sementara Andy benar tentang sumber yang diunduh, .val (...) dan .attr ('value', ...) tampaknya tidak benar-benar mengubah html. Saya pikir ini adalah masalah javascript dan bukan masalah jquery. Jika Anda menggunakan pembakar bahkan Anda akan memiliki pertanyaan yang sama. Meskipun tampaknya jika Anda mengirimkan formulir dengan nilai yang dimodifikasi, maka html tidak akan berubah. Saya mengalami masalah ini mencoba membuat pratinjau cetak dari formulir yang dimodifikasi (melakukan [formulir] .html ()) itu menyalin semuanya dengan baik, termasuk semua perubahan kecualinilai berubah. Jadi, pratinjau cetak modal saya agak tidak berguna ... solusi saya mungkin harus 'membangun' formulir tersembunyi yang berisi nilai-nilai yang telah mereka tambahkan, atau menghasilkan pratinjau secara independen dan membuat setiap modifikasi yang dilakukan pengguna juga mengubah pratinjau. Keduanya tidak optimal, tetapi kecuali seseorang mengetahui mengapa perilaku pengaturan nilai tidak mengubah html (dalam DOM saya berasumsi) itu harus dilakukan.

sumber

+1 dari saya! Kamu benar. nilai dan .val () mengalami masalah saat memperbarui menggunakan jQuery. Apakah Anda menemukan sesuatu di sekitar?

NullPointer

4

Saya mengalami masalah yang sama, dan saya menemukan apa yang salah. Saya mendefinisikan HTML sebagai

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

Membaca nilai formulir di server selalu menghasilkan email sebagai kosong. Setelah menggaruk-garuk kepala (dan banyak pencarian), saya menyadari kesalahan itu tidak mendefinisikan form / input dengan benar. Pada memodifikasi input (seperti yang ditunjukkan berikutnya), itu berfungsi seperti pesona

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

Menambahkan ke utas ini seandainya orang lain memiliki masalah yang sama.

Jardalu
sumber

3

Dalam kasus saya, saya menggunakan non-string (integer) sebagai parameter val () yang tidak berfungsi, triknya sesederhana

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

Shawn
sumber

2

Menggunakan val()tidak berhasil untuk saya. Saya harus menggunakannya di .attr()mana-mana. Saya juga memiliki berbagai jenis input dan harus cukup eksplisit dalam hal kotak centang dan pilih menu.

Perbarui bidang teks

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

Perbarui gambar di sebelah input file

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

Perbarui boolean

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

Perbarui pilih (dengan nomor atau string)

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

Julian Mann
sumber

1

Gotcha lain di sini menyia-nyiakan waktu saya, jadi saya pikir saya akan memberikan tip. Saya memiliki bidang tersembunyi yang saya beri id. dan []tanda kurung dalam nama (karena digunakan dengan struts2) dan pemilih $("#model.thefield[0]")tidak akan menemukan bidang tersembunyi saya. Mengganti nama id untuk tidak menggunakan periode dan tanda kurung menyebabkan pemilih mulai bekerja. Jadi pada akhirnya saya berakhir dengan id model_the_field_0sebagai gantinya dan pemilih bekerja dengan baik.

pengguna738048
sumber

Itu karena pemilih Anda $("#model.thefield[0]")sedang ditafsirkan sebagai: elemen dengan idsama dengan model, css classdari thefielddan beberapa attributedisebut 0... Jika Anda ingin menggunakan karakter-karakter dalam idpenggunaan Anda pendekatan yang disarankan oleh Chuck Callebs dalam jawabannya . Dalam HTML5, idmungkin string apa pun yang tidak kosong dan tidak mengandung karakter spasi ( referensi ).

Oliver

1

Menggunakan ID:

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

Menggunakan kelas:

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

Arman H
sumber

0

Jika Anda mencari haml maka ini adalah jawaban untuk bidang tersembunyi untuk menetapkan nilai ke bidang tersembunyi

%input#forum_id.hidden

Di jquery Anda, konversikan nilainya menjadi string dan kemudian tambahkan menggunakan properti attr di jquery. Semoga ini juga berfungsi dalam bahasa lain juga.

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

Yarrabhumi
sumber

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

carolina
sumber

-1

Cukup gunakan sintaks di bawah get and set

DAPATKAN

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

di sini variabel akan menyimpan nilai hiddenfield (selectindex)

Sisi server

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

SET

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

mzonerz
sumber

OP bertanya mengapa kode seperti milikmu tidak bekerja untuknya, jadi ini tidak berguna untuk pertanyaan ini.

ProfK

-1

Siapa pun yang berjuang dengan ini, ada cara "inline" yang sangat sederhana untuk melakukan ini dengan 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="">

Ini menetapkan nilai bidang tersembunyi saat teks diketik ke dalam input yang terlihat menggunakan event onChange. Bermanfaat (seperti dalam kasus saya) tempat Anda ingin meneruskan nilai bidang ke formulir "Pencarian Lanjutan" dan tidak memaksa pengguna untuk mengetik ulang permintaan pencarian mereka.

Joyrex
sumber

Setel nilai bidang tersembunyi dalam formulir menggunakan ".val ()" jQuery tidak berfungsi

Jawaban: