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>

मैंने इनपुट प्रकार को "टेक्स्ट" पर सेट करके और फिर इनपुट बॉक्स के लिए "प्रदर्शन: कोई नहीं" शैली का उपयोग करके, निम्नलिखित वर्कअराउंड की कोशिश की। लेकिन, यह भी विफल हो जाता है! ऐसा लगता है कि jQuery के पास छिपे या अदृश्य इनपुट फ़ील्ड सेट करने में कुछ परेशानी है।

कोई विचार? क्या इसके लिए कोई समाधान है जो वास्तव में काम करता है?

jquery set hidden-fields

— texens
स्रोत

316

:textएक प्रकार के मूल्य वाले इनपुट के लिए विफल हो जाएगा hidden। यह सिर्फ उपयोग करने के लिए बहुत अधिक कुशल है:

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

एक वेब पेज पर आईडी विशेषताएँ अद्वितीय होनी चाहिए, सुनिश्चित करें कि आपका वही है जो आपके पास होने वाली किसी भी समस्या में योगदान दे सकता है, और एक अधिक जटिल चयनकर्ता को निर्दिष्ट करता है बस चीजों को धीमा कर देता है और साफ नहीं दिखता है।

पर उदाहरण http://jsbin.com/elovo/edit पर अपने उदाहरण कोड का उपयोग कर, http://jsbin.com/elovo/2/edit

— एंडी ई
स्रोत

एंडी, त्वरित प्रतिक्रिया के लिए धन्यवाद। मैंने वास्तव में पहले "# नेटेंस" के साथ कोशिश की, और फिर "#input: हिडन # टेक्सन्स" के साथ और न ही उनमें से कोई भी काम नहीं कर रहा था। जब मैंने इनपुट प्रकार को "हिडन" से "टेक्स्ट", और "#input: हिडन: टेक्सेंस" से "#input: टेक्स्ट: टेक्सेंस" में बदल दिया, तो इसने बिना किसी परेशानी के काम किया। "#Input: text # texens" ऊपर एक टाइपो था, और होना चाहिए "#input: hidden # texens" या सिर्फ "#texens" जैसा कि आपने अभी बताया है। तो, ऐसा लगता है कि छिपे हुए क्षेत्र के मूल्यों को नहीं बदला जा रहा है।

— टेक्सेन

1

@ संदर्भ: मुझे संदेह है कि समस्या कहीं और निहित है। जैसा कि आप मेरे द्वारा जुड़े उदाहरण से देख सकते हैं, val()छिपे हुए इनपुट पर ठीक काम करता है, मान को "परिवर्तित नहीं" से "परिवर्तित" में बदल देता है। मैंने मूल्य परिवर्तन की पुष्टि करने के लिए अलर्ट के साथ आपके द्वारा ऊपर चिपकाए गए कोड को शामिल करने के लिए उदाहरण को संशोधित किया है: jsbin.com/elovo/2/edit

— एंडी ई

एंडी, उदाहरण के लिए बहुत बहुत धन्यवाद। मैंने ऊपर उल्लिखित कोड चलाया और यह ठीक वैसे ही काम करता है जैसा कि माना जाता है। और चेतावनी वास्तव में पुष्टि करती है कि मूल्य बदल दिया गया है। मैं फ़ायरफ़ॉक्स के "व्यू पेज सोर्स" फीचर का उपयोग करके पेज सोर्स खोल रहा था। और पृष्ठ स्रोत में, यह अभी भी पुराने मूल्य को दिखाता है और नए मूल्य को नहीं (यहां तक कि ऊपर बताए गए पास्टबिन में कोड के लिए)। लेकिन, अलर्ट बॉक्स बदले हुए मूल्य की पुष्टि करता है। इसलिए, मैं मान रहा हूं कि यह एक फ़ायरफ़ॉक्स समस्या है (या क्या मैं बहुत बेवकूफ हूं और कुछ महत्वपूर्ण बात को अनदेखा कर रहा हूं?)। एक बार फिर, आपके समय के लिए धन्यवाद :)

— टेक्सेन्स

2

@ नेटेंस: कोई समस्या नहीं। यदि आप स्रोत देखने के बजाय फ़ायरफ़ॉक्स का उपयोग करते हैं, तो मैं एक उचित डिबगिंग टूल, फायरबग का उपयोग करने का सुझाव दूंगा । "व्यू सोर्स" का व्यवहार कमोबेश सभी ब्राउज़रों में समान है, और पेज के डाउनलोड किए हुए, अनमॉडिफाइड सोर्स कोड को दिखाएगा।

— एंडी ई

2

मुझे नहीं लगता कि यह मुद्दा फ़ायरफ़ॉक्स या एक विशिष्ट उपकरण के साथ है जितना कि यह है कि संशोधित HTML कैसे प्रस्तुत और प्रदर्शित किया जाता है। मेरे पास ओपी के समान स्थिति है, सिवाय इसके कि इसमें थोड़ा अधिक jQuery शामिल है। मेरे मामले में, जैसा कि इस एक में, कोड सही ढंग से काम करता है - क्लिक इवेंट सही ढंग से "छिपे हुए" प्रकार के इनपुट को अपडेट करता है - लेकिन फायरबग छिपे हुए फ़ील्ड के लिए अद्यतन मान प्रदर्शित नहीं करता है, भले ही वे अपडेट किए गए हों और jQuery उन्हें एक्सेस कर सकता है , और भले ही दिखाई देने वाले क्षेत्रों के लिए अपडेट किए गए मान

— फायरबग में

62

यदि आपको किसी छिपे हुए फ़ील्ड का मान सेट करने में समस्या हो रही है क्योंकि आप इसके लिए एक आईडी पास कर रहे हैं, तो यह समाधान है:

इसके बजाय $("#hidden_field_id").val(id)बस करो $("input[id=hidden_field_id]").val(id)। निश्चित नहीं है कि अंतर क्या है, लेकिन यह काम करता है।

— चक कैलेब्स
स्रोत

3

खबरदार, पुराने ब्राउज़रों में यह बहुत धीमा हो सकता है ( learn.jquery.com/using-jquery-core/selecting-elements )

— एलेक्स

मेरे लिए काम नहीं कर रहा, ब्राउज़र - क्रोम 48। निश्चित नहीं कि क्यों

— गुरप्रीत सिंह

26

अंत में, मुझे एक समाधान मिल गया है और यह एक सरल है:

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

एक जादू की तरह काम करता है। कोई सुराग नहीं कि jQuery इस पर वापस क्यों नहीं आता है।

— zamber
स्रोत

तकनीकी रूप से यह DOM को jQuery का उपयोग नहीं करता है, लेकिन यह सरल है, और काम करता है (मैंने फॉर्म सबमिट समय पर मूल्य बदलने के मेरे मामले के लिए यहाँ पर लगभग हर उत्तर की कोशिश की, और वे काम नहीं कर रहे थे)।

— २०:०५ पर hlongmore

इसलिए मैंने यह उत्तर पोस्ट किया है;)। खुशी है कि यह मदद की। JQuery के रूप में वे यहाँ एक संभावित तय github.com/jquery/jquery/blob/… है, लेकिन यह केवल के लिए है type="radio"। मैं एक समस्या की रिपोर्ट करने के लिए आलसी हूं, विशेषकर मैंने 4 साल पहले इस समस्या को हल किया था। मैं भी फटा हुआ हूँ अगर यह jQuery में तय किया जाना चाहिए - संभवतः यह jQuery kiddies खुद से बचाने के लिए उस तरह से लागू किया गया है? कौन जानता है ...

— ज़ंबर

1

jQuery समाधान मेरे लिए भी काम नहीं किया। वैनिला जेएस के साथ जाना था।

— वरुण शर्मा

17

मुझे भी यही समस्या थी। अजीब तरह से पर्याप्त Google क्रोम और संभवतः अन्य (निश्चित नहीं) पसंद नहीं किया

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

परिवर्तन!!

एक "स्ट्रिंग चीज" होनी चाहिए

— mr.zaga
स्रोत

2

यह मेरे लिए भी तय है। मैंने उपयोग करना समाप्त कर दिया .val(' 0'), जिसे सही ढंग parseIntसे जावास्क्रिप्ट में और साथ ही int()पायथन में मेरी बैकेंड द्वारा पार्स किया गया है ।

— २६'१४

10

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

मेरे लिए काम किया, जब न तो

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

न

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

किया।

— डिर्क Seifert
स्रोत

9

.val मेरे लिए काम नहीं कर रहा है, क्योंकि मैं मूल्य विशेषता सर्वर पक्ष को हथियाने और मूल्य हमेशा अद्यतन नहीं किया गया था। इसलिए मैंने इस्तेमाल किया:

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

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

आशा है कि यह किसी की मदद करता है।

— सोफी
स्रोत

यही जवाब मुझे पसंद है। Attr फंक्शन का इस्तेमाल करने से ऊपर बताई गई सभी कंट्रोवर्सीज़ से बचा जाता है और सही काम होता है।

7

दरअसल, यह एक सतत समस्या है। हालांकि एंडी डाउनलोड किए गए स्रोत के बारे में सही है, .val (...) और .attr ('मूल्य', ...) वास्तव में HTML को संशोधित करने के लिए प्रतीत नहीं होता है। मुझे लगता है कि यह एक जावास्क्रिप्ट समस्या है न कि एक jquery समस्या। अगर आपने फायरबग का इस्तेमाल किया होता तो भी आपके मन में यही सवाल होता। हालांकि ऐसा लगता है कि यदि आप संशोधित किए गए मूल्यों के साथ फॉर्म जमा करते हैं, तो यह एचटीएमएल में नहीं बदलेगा। मैं इस मुद्दे को संशोधित रूप का प्रिंट पूर्वावलोकन बनाने की कोशिश कर रहा था ([प्रपत्र] .html) ()) यह सब कुछ ठीक करता है, सिवाय बदलावों के।मूल्यों में परिवर्तन होता है। इस प्रकार, मेरा मोडल प्रिंट पूर्वावलोकन कुछ हद तक बेकार है ... मेरे वर्कअराउंड को एक छिपे हुए फॉर्म का 'निर्माण' करना पड़ सकता है, जिसमें वे जोड़े गए मूल्यों को शामिल करते हैं, या पूर्वावलोकन को स्वतंत्र रूप से उत्पन्न करते हैं और प्रत्येक संशोधन उपयोगकर्ता को पूर्वावलोकन को संशोधित करता है। दोनों अयोग्य हैं, लेकिन जब तक किसी को यह पता नहीं चलता कि मूल्य-निर्धारण व्यवहार html (DOM im में क्यों नहीं है) को नहीं बदलता है, तो यह करना होगा।

मुझ से +1! आप सही हे। jQuery का उपयोग करते हुए इसे अद्यतन करने के दौरान मूल्य और .val () की समस्या है। क्या आपको आसपास कुछ मिला?

— NullPointer

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

यदि इस मामले में दूसरों को एक ही मुद्दा है, तो इस धागे को जोड़ना।

— Jardalu
स्रोत

3

मेरे मामले में, मैं वैल () के पैरामीटर के रूप में एक गैर-स्ट्रिंग (पूर्णांक) का उपयोग कर रहा था, जो काम नहीं करता है, चाल बहुत आसान है

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

यहाँ एक और गेटा ने मेरा कुछ समय बर्बाद किया, इसलिए मैंने सोचा कि मैं टिप के साथ गुजरूंगा। मेरे पास एक छिपा हुआ क्षेत्र था जिसमें मैंने एक आईडी दी थी। और []नाम में कोष्ठक (struts2 के साथ उपयोग के कारण) और चयनकर्ता $("#model.thefield[0]")को मेरा छिपा हुआ क्षेत्र नहीं मिलेगा। पीरियड और कोष्ठक का उपयोग नहीं करने के लिए आईडी का नाम बदलने से चयनकर्ता को काम करना शुरू करना पड़ा। इसलिए अंत में मैं model_the_field_0इसके बजाय एक आईडी के साथ समाप्त हो गया और चयनकर्ता ने ठीक काम किया।

— user738048
स्रोत

ऐसा इसलिए है क्योंकि अपने चयनकर्ता $("#model.thefield[0]")के रूप में व्याख्या की जा रही है: के साथ एक तत्व idके बराबर model, एक सीएसएस classकी thefieldऔर कुछ attributeकहा जाता है 0... आप अपने में उन वर्णों का उपयोग करना चाहते हैं idदृष्टिकोण में चक Callebs ने सुझाव दिया उपयोग अपने जवाब । एचटीएमएल 5 में idकोई भी स्ट्रिंग हो सकती है जो खाली नहीं है और इसमें कोई अंतरिक्ष वर्ण ( संदर्भ ) नहीं है।

— ओलिवर

1

आईडी का उपयोग करना:

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

कक्षा का उपयोग करना:

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

— अरमान एच
स्रोत

0

यदि आप haml की खोज कर रहे हैं तो यह एक छिपे हुए क्षेत्र की तरह मान सेट करने के लिए छिपे हुए फ़ील्ड का उत्तर है

%input#forum_id.hidden

अपने jquery में बस मान को स्ट्रिंग में बदलें और फिर jquery में attr संपत्ति का उपयोग करके इसे जोड़ें। आशा है कि यह अन्य भाषाओं में भी काम करता है।

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

— Yarrabhumi
स्रोत

-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

बस नीचे दिए गए सिंटैक्स का उपयोग करें और सेट करें

प्राप्त

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

यहां एक चर हिडनफील्ड (सिलेक्टेक्सएक्स) का मान रखेगा

सर्वर साइड

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

सेट

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

— mzonerz
स्रोत

ओपी पूछ रहा है कि आपका जैसा कोड उसके लिए काम क्यों नहीं करता है, इसलिए यह इस प्रश्न के लिए बेकार है।

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

यह छिपे हुए फ़ील्ड के मान को सेट करता है क्योंकि टेक्स्ट ऑनकेंज इवेंट का उपयोग करके दृश्य इनपुट में टाइप किया जाता है। सहायक (मेरे मामले की तरह) जहां आप "उन्नत खोज" फ़ॉर्म में फ़ील्ड मान पर पास होना चाहते हैं और उपयोगकर्ता को उनकी खोज क्वेरी फिर से टाइप करने के लिए मजबूर नहीं करते हैं।

— Joyrex
स्रोत