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

— অ্যান্ডি ই
সূত্র

অ্যান্ডি, দ্রুত প্রতিক্রিয়া জন্য ধন্যবাদ। আমি প্রথমে প্রথমে "# টেক্সেনস" দিয়ে চেষ্টা করেছি এবং তারপরে "# ইনপুট: লুকানো # টেক্সট" দিয়েছিলাম এবং তাদের দু'জনেরই কাজ করার মতো মনে হয়নি। আমি যখন ফর্মের ইনপুট টাইপটিকে "লুকানো" থেকে "পাঠ্য" এবং "# ইনপুট: লুকানো: টেক্সেনস" থেকে "# ইনপুট: পাঠ্য: টেক্সেন" এ পরিবর্তন করেছি, এটি কোনও সমস্যা ছাড়াই কাজ করেছে। "# ইনপুট: পাঠ্য # টেক্সটগুলি" উপরের একটি টাইপ ছিল এবং আপনি যেমন উল্লেখ করেছেন তেমন "# ইনপুট: লুকানো # টেক্সট" বা "" টেক্সটেন "হওয়া উচিত ছিল। সুতরাং, মনে হয় লুকানো ক্ষেত্রের মানগুলি পরিবর্তন করা হচ্ছে না।

— টেক্সটগুলি

1

@ টেক্সেন্স: সমস্যাটি অন্য কোথাও রয়েছে বলে আমি সন্দেহ করব। আমি যে উদাহরণটি সংযুক্ত করেছি তার থেকে আপনি দেখতে পাচ্ছেন, val()লুকানো ইনপুটটিতে ঠিক কাজ করে, "পরিবর্তিত নয়" থেকে "পরিবর্তিত" তে মান পরিবর্তন করে। মান পরিবর্তনের বিষয়টি নিশ্চিত করার জন্য একটি সতর্কতার সাথে আমি উপরের পেস্ট কোডটি অন্তর্ভুক্ত করার উদাহরণটি সংশোধন করেছি: jsbin.com/elovo/2/edit

— অ্যান্ডি ই

অ্যান্ডি, উদাহরণের জন্য আপনাকে অনেক ধন্যবাদ। আমি উপরে উল্লিখিত কোডটি চালিয়েছি এবং এটি যেমনটি অনুমান করা হচ্ছে ঠিক তেমন কাজ করে। এবং সতর্কতাটি সত্যই নিশ্চিত করে যে মানটি পরিবর্তন করা হয়েছে। আমি ফায়ারফক্সের "পৃষ্ঠার উত্স দেখুন" বৈশিষ্ট্যটি ব্যবহার করে পৃষ্ঠা উত্সটি খুলছিলাম। এবং পৃষ্ঠার উত্সে, এটি এখনও পুরানো মান এবং নতুন মানটি দেখায় না (এমনকি উপরে উল্লিখিত পেস্টবিনে কোডের জন্যও)। তবে, সতর্কতা বাক্স পরিবর্তিত মানকে নিশ্চিত করে। সুতরাং, আমি ধরে নিচ্ছি এটি একটি ফায়ারফক্স সমস্যা (বা আমি কি খুব বোকা এবং গুরুত্বপূর্ণ কিছু উপেক্ষা করছি?) আবারও, আপনার সময়ের জন্য ধন্যবাদ :)

— টেক্সটস

2

@ টেক্সেন্স: কোনও সমস্যা নেই। আমি উত্স দেখার পরিবর্তে ফায়ারফক্স ব্যবহার করে একটি সঠিক ডিবাগিং সরঞ্জাম, ফায়ারব্যাগ ব্যবহার করার পরামর্শ দেব । "ব্রাউজ উত্স" এর আচরণটি সমস্ত ব্রাউজারগুলিতে কমবেশি একই রকম হয় এবং এটি পৃষ্ঠার ডাউনলোড করা, অপরিবর্তিত উত্স কোডটি দেখায়।

— অ্যান্ডি ই

2

আমি মনে করি না যে সমস্যাটি ফায়ারফক্স বা একটি নির্দিষ্ট সরঞ্জামের সাথে রয়েছে ততটাই এটি সংশোধিত এইচটিএমএলকে কীভাবে রেন্ডার এবং প্রদর্শিত হয়। আমার ওপি-র মতো একই অবস্থা রয়েছে, তবে এখানে আরও কিছুটা jQuery জড়িত। আমার ক্ষেত্রে যেমন কোডটি সঠিকভাবে কাজ করে - ক্লিক ইভেন্টটি সঠিকভাবে "লুকানো" টাইপের একটি ইনপুট আপডেট করে - তবে ফায়ারব্যাগ লুকানো ক্ষেত্রগুলির জন্য আপডেট হওয়া মানগুলি প্রদর্শন করে না, যদিও সেগুলি আপডেট হয়ে গেছে এবং jQuery সেগুলি অ্যাক্সেস করতে পারে , এবং দৃশ্যমান ক্ষেত্রগুলির জন্য আপডেট হওয়া মানগুলি ফায়ারব্যাগে সঠিকভাবে প্রদর্শিত হলেও

— ডেভ ডুপ্লান্টিস

62

যদি কোনও লুকানো ক্ষেত্রের মান নির্ধারণ করতে আপনার সমস্যা হয় কারণ আপনি এতে একটি আইডি পাস করছেন, এটি সমাধান:

পরিবর্তে $("#hidden_field_id").val(id)শুধু না $("input[id=hidden_field_id]").val(id)। পার্থক্য কী তা নিশ্চিত নয়, তবে এটি কাজ করে।

— চক ক্লেলেবস
সূত্র

3

সাবধান, এটি পুরানো ব্রাউজারগুলিতে খুব ধীর হতে পারে ( learn.jquery.com/ using-jquery-core / selecting-e উপাদান )

— অ্যালেক্স ক্লাউস

ব্রাউজার - ক্রোম আমার জন্য কাজ করছে না 48. কেন নিশ্চিত তা নয়

— গুরুপ্রীত সিং

26

অবশেষে, আমি একটি সমাধান খুঁজে পেয়েছি এবং এটি একটি সহজ:

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

একটি যাদুমন্ত্র মত কাজ করে. JQuery কেন এই পিছনে না আসে সে সম্পর্কে কোনও ক্লু নেই।

— zamber
সূত্র

প্রযুক্তিগতভাবে এটি ডওমটি jQuery নয়, ব্যবহার করে তবে এটি সহজ এবং কাজ করে (ফর্ম জমা দেওয়ার সময় মূল্য পরিবর্তন করার ক্ষেত্রে আমার প্রায় প্রতিটি উত্তর চেষ্টা করেছিলাম এবং তারা কাজ করে না)।

— hlongmore

এজন্য আমি এই উত্তরটি পোস্ট করেছি;)। এটা খুশী হয়েছে। JQuery হিসাবে তাদের এখানে github.com/jquery/jquery/blob/… একটি সম্ভাব্য ফিক্স আছে তবে এটি কেবল এর জন্য type="radio"। আমি একটি সমস্যা প্রতিবেদন করতে অলস, বিশেষত আমি 4 বছর আগে এই সমস্যাটির সমাধান করেছি। আমিও ছিঁড়েছি যদি এটি jQuery এ স্থির করা উচিত - সম্ভবত এটি নিজের থেকে jQuery বাচ্চাদের রক্ষা করার জন্য সেভাবে বাস্তবায়ন করা হয়েছে? কে জানে ...

— জাম্বার

1

jQuery সমাধান আমার জন্য কাজ করে না। ভ্যানিলা জেএসের সাথে যেতে হয়েছিল।

— বরুণ শর্মা

17

আমারও একই সমস্যা ছিল অদ্ভুতভাবে যথেষ্ট পরিমাণে গুগল ক্রোম এবং সম্ভবত অন্যরা (নিশ্চিত নয়) পছন্দ করেন নি

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

করেছিল.

— ডার্ক সিফার্ট
সূত্র

9

.val আমার পক্ষে কাজ করেনি , কারণ আমি মানটি অ্যাট্রিবিউট সার্ভারের দিকটি ধরেছি এবং মানটি সর্বদা আপডেট হয় না। সুতরাং আমি ব্যবহার করেছি:

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

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

আশা করি এটি কাউকে সাহায্য করবে।

— সোফি
সূত্র

এটাই আমার পছন্দ উত্তর। অ্যাটর ফাংশনটি ব্যবহার করে উপরের বর্ণিত সমস্ত বিপরীততা এড়ানো এবং সঠিক কাজটি করে does

7

আসলে, এটি একটি চলমান সমস্যা। অ্যান্ডি ডাউনলোড করা উত্স সম্পর্কে সঠিক হলেও, .val (...) এবং .attr ('মান', ...) আসলে এইচটিএমএল সংশোধন করে বলে মনে হয় না। আমি এই একটি জাভাস্ক্রিপ্ট সমস্যা এবং না একটি jQuery সমস্যা। আপনি যদি ফায়ারব্যাগ ব্যবহার করেন তবে আপনিও একই প্রশ্নটি করতে পারতেন। যদিও মনে হচ্ছে আপনি পরিবর্তিত মান সহ ফর্মটি জমা দিলে এটি চলে যাবে, এইচটিএমএল পরিবর্তন হয় না। আমি পরিবর্তিত ফর্মের একটি প্রিন্ট পূর্বরূপ তৈরি করার চেষ্টা করে এই সমস্যাটি ছুঁড়েছি ([ফর্ম]। এইচটিএমএল ()) এটি সমস্ত কিছু ঠিক আছে, ব্যতীত সমস্ত পরিবর্তন সহ অনুলিপি করেমান পরিবর্তন। সুতরাং, আমার মডেল মুদ্রণের পূর্বরূপটি কিছুটা অকেজো ... উভয়ই অযৌক্তিক, তবে মান-নির্ধারণের আচরণটি এইচটিএমএলকে কেন পরিবর্তন করবে না তা যদি না কেউ সনাক্ত করে (DOM তে আমি ধরে নিচ্ছি) এটি করতে হবে।

আমার কাছ থেকে +1! তুমি ঠিক বলছো. jQuery ব্যবহার করে এটি আপডেট করার সময় মান এবং .val () এর সমস্যা হয়। আপনি কি আশেপাশে কিছু খুঁজে পেয়েছেন?

— নুলপয়েন্টার

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, একটি CSS classএর thefieldএবং কিছু attributeবলা 0... আপনি আপনার ঐ অক্ষর ব্যবহার করতে চান তাহলে idপদ্ধতির মধ্যে চাক Callebs দ্বারা প্রস্তাবিত ব্যবহারের তার উত্তর । এইচটিএমএল 5 এ idএমন কোনও স্ট্রিং থাকতে পারে যা খালি নয় এবং কোনও স্থান অক্ষর ( রেফারেন্স ) ধারণ করে না ।

— অলিভার

1

আইডি ব্যবহার:

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

ক্লাস ব্যবহার:

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

— আরমান এইচ
সূত্র

0

আপনি যদি এইচএমএল অনুসন্ধান করে থাকেন তবে লুকানো ক্ষেত্রের মতো কোনও লুকানো ক্ষেত্রের মান নির্ধারণের জন্য এটিই উত্তর

%input#forum_id.hidden

আপনার jquery এ মানটিকে স্ট্রিংয়ে রূপান্তর করুন এবং তারপরে jquery এ অ্যাটর সম্পত্তি ব্যবহার করে এটি যুক্ত করুন। আশা করি এটি অন্যান্য ভাষায়ও কাজ করে।

$('#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
সূত্র

ওপি জিজ্ঞাসা করছে যে আপনার মতো কোডটি কেন তার পক্ষে কাজ করে না, তাই এই প্রশ্নের পক্ষে এটি অকেজো।

— অধ্যাপক

-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 ইভেন্ট ব্যবহার করে। সহায়ক (আমার ক্ষেত্রে যেমন) আপনি যেখানে ক্ষেত্রের মানটি "উন্নত অনুসন্ধান" ফর্মটিতে যেতে চান এবং ব্যবহারকারীকে তাদের অনুসন্ধান কোয়েরিটি পুনরায় টাইপ করতে বাধ্য করেন না।

— Joyrex
সূত্র