JQuery'nin “.val ()” işlevini kullanarak bir formdaki gizli alanın değeri çalışmaz

188

JQuery kullanarak bir formda gizli bir alanın değerini ayarlamak için çalışıyorum, ama başarı olmadan.

İşte sorunu açıklayan örnek bir kod. Giriş türünü "metin" olarak tutarsam, sorunsuz çalışır. Ancak, giriş türünü "gizli" olarak değiştirmek işe yaramaz!

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

Ayrıca, girdi türünü "metin" olarak ayarlayıp daha sonra giriş kutusu için "display: none" stilini kullanarak aşağıdaki geçici çözümü denedim. Ancak, bu da başarısız olur! Görünüşe göre jQuery gizli veya görünmez girdi alanlarını ayarlamakta bazı sorunlar yaşıyor.

Herhangi bir fikir? Bunun için gerçekten işe yarayan bir geçici çözüm var mı?

jquery set hidden-fields

— texens
kaynak

316

:texttür değeri olan bir girdi için başarısız olur hidden. Ayrıca sadece kullanımı çok daha verimlidir:

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

Kimlik öznitelikleri bir web sayfasında benzersiz olmalıdır, kendinizin olduğundan emin olun, çünkü bu herhangi bir soruna katkıda bulunabilir ve daha karmaşık bir seçici belirtmek işleri yavaşlatır ve düzgün görünmez.

En Örnek http://jsbin.com/elovo/edit adresinden örnek kodu kullanarak, http://jsbin.com/elovo/2/edit

— Andy E
kaynak

Andy, hızlı cevap için teşekkürler. Aslında önce "#texens" ile ve sonra "#input: hidden # texens" ile denedim ve hiçbiri işe yaramadı. Formdaki giriş türünü "gizli" yerine "metin" ve "#input: hidden: texens" olarak "#input: text: texens" olarak değiştirdiğimde, sorunsuz çalıştı. "#İnput: text # texens" yukarıdaki bir yazım hatasıydı ve daha önce de belirttiğiniz gibi "#input: hidden # texens" veya yalnızca "#texens" olmalıdır. Yani, gizli alanın değerleri değişmiyor gibi görünüyor.

— texens

1

@texens: Sorunun başka yerlerde yattığından şüphelenirim. Bağlandığım örnekten de görebileceğiniz gibi val(), gizli girişte gayet iyi çalışıyor ve değeri "değiştirilmedi" den "değiştirildi" ye değiştiriyor. Örneği, değer değişikliğini onaylamak için bir uyarı ile yukarıda yapıştırdığınız kodu içerecek şekilde revize ettim: jsbin.com/elovo/2/edit

— Andy E

Andy, örnek için çok teşekkürler. Yukarıda belirtilen kodu çalıştırdım ve olması gerektiği gibi çalışır. Ve uyarı gerçekten değerin değiştirildiğini doğrular. Firefox'un "Sayfa Kaynağını Görüntüle" özelliğini kullanarak sayfa kaynağını açıyordum. Ve sayfa kaynağında, hala yeni değeri değil, yeni değeri gösterir (yukarıda belirtilen macun kodunda bile). Ancak, uyarı kutusu değiştirilen değeri onaylar. Yani, bunun bir Firefox problemi olduğunu varsayıyorum (ya da çok aptal mıyım ve önemli bir şeye bakmıyorum?). Bir kez daha, zaman ayırdığınız için teşekkürler :)

— texens

2

@texens: sorun değil. Firefox kullanıyorsanız, kaynağı görüntülemek yerine uygun bir hata ayıklama aracı olan Firebug kullanmanızı öneririm . "Kaynağı görüntüle" davranışı tüm tarayıcılarda aşağı yukarı aynıdır ve sayfanın indirilen, değiştirilmemiş kaynak kodunu gösterir.

— Andy E

2

Sorunun, değiştirilen HTML'nin nasıl oluşturulduğu ve gösterildiğiyle ilgili olduğu kadar Firefox veya belirli bir araçla ilgili olduğunu düşünmüyorum. Ben OP ile aynı duruma sahip, sadece biraz daha jQuery dahil olması dışında. Benim durumumda, bu kodda olduğu gibi, kod düzgün çalışıyor - click olayı "gizli" türünde bir girişi doğru bir şekilde günceller - ancak Firebug, güncellenmiş ve jQuery bunlara erişebilse bile gizli alanlar için güncellenmiş değerleri görüntülemez ve görünür alanlar için güncellenmiş değerler Firebug'da doğru bir şekilde görüntülenmesine rağmen

— Dave DuPlantis

62

Bir kimliği geçirdiğiniz için gizli bir alanın değerini ayarlamakta sorun yaşıyorsanız, çözüm budur:

$("#hidden_field_id").val(id)Sadece yapmak yerine $("input[id=hidden_field_id]").val(id). Farkın ne olduğundan emin değilim, ama işe yarıyor.

— Chuck Callebs
kaynak

3

Dikkat edin, bu eski tarayıcılarda çok yavaş olabilir ( learn.jquery.com/using-jquery-core/selecting-elements )

— Alex Klaus

Benim için çalışmıyor, tarayıcı - Chrome 48. Emin değilim

— Gurpreet Singh

26

Son olarak, bir çözüm buldum ve basit bir çözüm:

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

Tıkır tıkır çalışıyor. Neden jQuery buna geri dönmüyor.

— zamber
kaynak

Teknik olarak bu DOM jQuery değil, kullanır, ama basit ve çalışır (Form gönderme zamanında değeri değiştirme benim durumum için burada hemen hemen her cevap denedim ve onlar çalışma değildi).

— hlongmore

Bu yüzden bu yanıtı yayınladım;). Yardımcı oldu sevindim. JQuery gelince burada potansiyel bir düzeltme var github.com/jquery/jquery/blob/… ama sadece içindir type="radio". Özellikle 4 yıl önce bu sorunu çözdüğüm göz önüne alındığında, bir sorunu bildirmek için tembelim. Ayrıca jQuery düzeltilmesi gerekiyorsa yırtılmış - muhtemelen jQuery çocuklarını kendilerinden korumak için bu şekilde uygulanır? Kim bilir ...

— zamber

1

jQuery çözümü de benim için çalışmadı. Vanilla JS ile gitmek zorunda kaldı.

— Varun Sharma

17

Aynı problemim vardı. garip yeterince google chrome ve muhtemelen diğerleri (emin değilim) beğenmedi

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

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

(değişiklik yok)

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

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

(değişiklik yok)

ama bu çalışıyor !!!!

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

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

DEĞİŞİKLİKLER !!

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

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

DEĞİŞİKLİKLER !!

"dize" olmalı

— mr.zaga
kaynak

2

Bu benim için de düzeltildi. Kullanarak .val(' 0'), doğru bir şekilde parseIntJavascript yanı sıra int()Python, benim arka uç tarafından ayrıştırılmış kullanarak sona erdi .

— rattray

10

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

benim için çalıştı, hiçbiri

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

ne de

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

yaptı.

— Dirk Seifert
kaynak

9

.val benim için çalışmadı, çünkü değer özniteliği sunucu tarafını kapıyorum ve değer her zaman güncellenmedi. bu yüzden kullandım:

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

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

Umarım birine yardımcı olur.

— Sophie
kaynak

Sevdiğim cevap bu. Attr işlevinin kullanılması, yukarıda belirtilen tüm eğilmeleri önler ve doğru olanı yapar.

7

Aslında bu devam eden bir problem. Andy indirilen kaynak konusunda haklı olsa da, .val (...) ve .attr ('değer', ...) aslında html'yi değiştirmiyor gibi görünüyor. Bu bir javascript sorunu değil, bir jquery sorunu olduğunu düşünüyorum . Eğer kundakçı kullansaydın bile aynı soruyu olurdu. Formu değiştirilecek değerlerle gönderirseniz, html değişmez. Değiştirilen formun ([form] .html () yapıyor) bir baskı önizlemesi oluşturmaya çalışırken bu sorunla karşılaştım ve tüm değişiklikler dahil olmak üzere her şeyi tamam dışında değer değişiklikleri . Bu nedenle, kalıcı baskı önizlemem biraz işe yaramaz ... Geçici çözümüm, ekledikleri değerleri içeren gizli bir formu 'oluşturmak' veya önizlemeyi bağımsız olarak oluşturmak ve kullanıcının önizlemeyi de değiştirdiği her değişikliği yapmak olabilir. Her ikisi de yetersizdir, ancak birisi neden değer belirleme davranışının html'yi değiştirmediğini (DOM'da varsayalım) anlamıyorsa yapması gerekir.

Benden +1! Haklısın. value ve .val (), jQuery kullanarak güncellerken sorun yaşıyor. Etrafta bir şey buldun mu?

— NullPointer

4

Aynı sorunu yaşıyordum ve neyin yanlış olduğunu öğrendim. HTML olarak tanımladım

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

Form değerlerinin sunucuda okunması her zaman e-postanın boş kalmasına neden oldu. Başımı tırmaladıktan sonra (ve çok sayıda arama), hatanın formu / girişi doğru bir şekilde tanımlamadığını fark ettim. Girişi değiştirirken (bir sonraki gösterildiği gibi), bir cazibe gibi çalıştı

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

Başkalarının da aynı sorunla karşılaşması durumunda bu konuya ekleme.

— Jardalu
kaynak

3

Benim durumumda, çalışmayan val () parametresi olarak bir dize olmayan (tamsayı) kullanıyordum, hile kadar basit

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

— Shawn
kaynak

2

Kullanmak val()benim için işe yaramadı. Her .attr()yerde kullanmak zorunda kaldım . Ayrıca girişlerin farklı türleri vardı ve onay kutuları ve belirli menüler durumunda oldukça açık olması gerekiyordu.

Metin alanını güncelle

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

Dosya girişinin yanındaki resmi güncelle

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

Güncelleme boole

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

Güncelleme seçimi (sayı veya dize ile)

$('#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
kaynak

1

Burada başka bir gotcha zamanımı boşa harcadım, bu yüzden uç boyunca geçeceğimi düşündüm. Gizli bir alanım vardı sahip olduğum bir kimlik verdim. ve []parantez içinde isimler (struts2 ile kullanılması nedeniyle) ve seçici $("#model.thefield[0]")gizli alanımı bulamaz. Kimliğin nokta ve parantezler kullanılmayacak şekilde yeniden adlandırılması, seçicinin çalışmaya başlamasına neden oldu. Sonunda model_the_field_0bunun yerine bir id ile sona erdi ve seçici iyi çalıştı.

— user738048
kaynak

Yani senin seçici çünkü $("#model.thefield[0]")olarak yorumlanır ediliyor: sahip bir öğenin ideşit modelbir css, classbir thefieldve bazı attributedenilen 0... Eğer bu karakterleri kullanmak istiyorsanız idkullanımda Chuck Callebs önerdiği yaklaşım onun cevabını . HTML5'te idboş olmayan ve boşluk karakteri ( başvuru ) içermeyen herhangi bir dize olabilir .

— Oliver

1

Kimlik kullanma:

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

Sınıfı kullanma:

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

— Arman H
kaynak

0

Eğer haml arıyorsanız, bu gizli alanın değerini aşağıdaki gibi gizli bir alana ayarlamak için cevaptır.

%input#forum_id.hidden

Jquery'nizde değeri dizeye dönüştürün ve jquery'deki attr özelliğini kullanarak ekleyin. umarım bu diğer dillerde de çalışır.

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

— Yarrabhumi
kaynak

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

-1

Sadece al ve ayarla aşağıdaki sözdizimini kullan

ALMAK

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

burada bir değişken gizli alanın (selectindex) değerini tutacak

Sunucu tarafı

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

AYARLAMAK

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

— mzonerz
kaynak

OP sizinki gibi kodun neden onun için çalışmadığını soruyor, bu yüzden bu soru için işe yaramaz.

— ProfK

-1

Bununla mücadele eden herkes, bunu jQuery ile yapmanın çok basit bir "satır içi" yolu vardır:

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

Bu, gizli alanın değerini, onChange olayı kullanılarak görünür girişe metin yazılırken ayarlar. Alan değerini "Gelişmiş Arama" formuna iletmek ve kullanıcıyı arama sorgusunu yeniden yazmaya zorlamak istemediğiniz yararlı (benim durumumda olduğu gibi).

— Joyrex
kaynak