jQuery - লুকানো ইনপুট ক্ষেত্রে মান পরিবর্তন সনাক্ত করুন


270

আমার একটি গোপন পাঠ্য ক্ষেত্র রয়েছে যার মানটি একটি এজেএক্স প্রতিক্রিয়ার মাধ্যমে আপডেট হয়।

<input type="hidden" value="" name="userid" id="useid" />

যখন এই মানটি পরিবর্তন হয়, আমি একটি এজেএক্স অনুরোধটি বরখাস্ত করতে চাই। কেউ কীভাবে পরিবর্তনটি সনাক্ত করতে পারে সে সম্পর্কে পরামর্শ দিতে পারেন?

আমার কাছে নিম্নলিখিত কোড রয়েছে তবে মানটি কীভাবে সন্ধান করতে হবে তা আমি জানি না:

$('#userid').change( function() {  
    alert('Change!'); 
}) 

2
যদি এটি একটি আজাক্স প্রতিক্রিয়াটির মাধ্যমে আপডেট হয়ে যায়, তবে আপনি কেন সাড়া সাফল্যের ফাংশনে নতুন এজ্যাক্স অনুরোধটি সরিয়ে দেবেন না?
বনিটি

2
'(' # ইউজারিড ')। ভাল () আপনি যা বলছেন তা যদি আপনাকে মান দেয়
বনিটি

আপডেট: একটি লুকানো ক্ষেত্রের মান আপডেট করা হলে একটি পরিবর্তন ইভেন্ট এখন ট্রিগার করা হয়।
স্টিভেন

উত্তর:


622

সুতরাং এটি বেশ দেরিতে, তবে আমি একটি উত্তর খুঁজে পেয়েছি, যদি এই থ্রেডটি জুড়ে আসে এমন কারও পক্ষে এটি কার্যকর হয়।

লুকানো উপাদানগুলিতে মান পরিবর্তনগুলি। পরিবর্তন () ইভেন্টটি স্বয়ংক্রিয়ভাবে আগুন দেয় না। সুতরাং, আপনি যে মানটি নির্ধারণ করছেন তা যেখানেই রয়েছে, আপনি এটিতে ট্রিগার করতে jQuery কেও বলতে হবে।

function setUserID(myValue) {
     $('#userid').val(myValue)
                 .trigger('change');
}

একবার যদি কেস হয়,

$('#userid').change(function(){
      //fire your ajax call  
})

প্রত্যাশার মতো কাজ করা উচিত


5
কি .trigger()শুধু কলিং উপর ব্যবহার করতে সাধারণত ভাল change()?
হানা

1
এটি কাজ করে তবে মনে হয় এটি পরিবর্তনের ইভেন্টটিকে দু'বার ট্রিগার করে! এর মতো, যদি আমি এই কোডটি রাখি, এটি দুটি বার ট্র্যাগার করে, যদি আমি কোডটি সরিয়ে ফেলি তবে ডাব্লু / ই শুরু করে না।
ভেনিজুয়েলা থেকে জানেক্স

1
এটিকে changeইভেন্ট হিসাবে একইরকম আচরণ করার জন্য আপনার কোডটি যুক্ত করা উচিত setUserID()যা মানটি সত্যই পরিবর্তন হয়েছে কিনা তা যাচাই করতে। if ($('#userid').val() != myVaule) { // set val() and trigger change }
nnattawat

1
এটি বিশেষত কার্যকর যদি আপনি "পরিবর্তন" ইভেন্টটিকে জাভাস্ক্রিপ্টের মাধ্যমে পরিবর্তিত করা হয় বলে ধরার চেষ্টা করছেন তবে অন্যথায় জাভাস্ক্রিপ্ট দ্বারা করা পরিবর্তনগুলি। পরিবর্তন (হ্যান্ডলার) বা .on ("পরিবর্তন", হ্যান্ডলার) দ্বারা ধরা যাবে না
জেজেকে

7
সুতরাং যদি আমার সেই ফাংশনটির নিয়ন্ত্রণ না থাকে যা লুকানো ক্ষেত্রের মান পরিবর্তন করে (অর্থাত্ ট্রিগারটি আগুন জ্বালাতে পারে না), এই সমাধানটি কাজ করবে না, তাই না?
ওসামা ইয়াকুব

31

যেহেতু লুকানো ইনপুট পরিবর্তনতে "পরিবর্তন" ইভেন্টটি ট্রিগার করে না, আমি পরিবর্তনের পরিবর্তে এটি মিউটেশনঅবার্সার ব্যবহার করেছি।

(কখনও কখনও লুকানো ইনপুট মান পরিবর্তনগুলি অন্য কোনও স্ক্রিপ্টগুলি করে যা আপনি সংশোধন করতে পারবেন না)

এটি IE10 এবং নীচে কাজ করে না

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var trackChange = function(element) {
  var observer = new MutationObserver(function(mutations, observer) {
    if(mutations[0].attributeName == "value") {
        $(element).trigger("change");
    }
  });
  observer.observe(element, {
    attributes: true
  });
}

// Just pass an element to the function to start tracking
trackChange( $("input[name=foo]")[0] );

এএফএইচ মিউটেশন সার্ভারটি কোনও পাঠ্যক্ষেত্রের পরিবর্তনের জন্যও বরখাস্ত হয় না (লুকিয়ে থাকুক বা না থাকুক)
ওলে অ্যালবারস

3
দুর্দান্ত কাজ! @ ওএলবার্স - ওপি সম্পর্কে জিজ্ঞাসা করেছেinput[type=hidden]
শায়

1
আমি এটি কোনও ফাংশনের সাথে মিশ্রণে ব্যবহার করেছি যা লুকানো ইনপুট ক্ষেত্রের মানগুলির সংগ্রহ পুনরুদ্ধার করতে jquery এর মানচিত্র কমান্ডটি ব্যবহার করে। অনেক ধন্যবাদ @ লুলালালা!
অ্যাডামজোনস

2
সহজ এবং বুঝতে সহজ। "সমাধানটি পরিবর্তন করার সময় আপনাকে অবশ্যই ইভেন্টটি ট্রিগার করতে হবে" সমাধানগুলির বিপরীতে এই সমাধানটি কোডার অ্যাক্সেস থাকা প্রোগ্রামারের উপর নির্ভর করে না যেখানে মানটি পরিবর্তিত হয়, যতক্ষণ না আপনি ডান হন ততক্ষণ এটিকে আরও দরকারী করে তোলে আইই 11 এর চেয়ে পুরানো সংস্করণটিকে সমর্থন করতে হবে না। এটা আমার জন্য দুর্দান্ত কাজ করেছে। ধন্যবাদ
জো সালাজার

দুর্দান্ত সমাধান! ধন্যবাদ! কোনও কারণে trigger('change')আমার পক্ষে কাজ হয়নি, সুতরাং আমি একটি কাস্টম ইভেন্ট তৈরি করেছি, এটি নিবন্ধীকৃত করেছি এবং তারপরেelement.dispatchEvent(myCustomEvent)
tbutcaru

8

আপনি কেবল নীচের ফাংশনটি ব্যবহার করতে পারেন, আপনি টাইপ উপাদানও পরিবর্তন করতে পারেন।

 $("input[type=hidden]").bind("change", function() {
       alert($(this).val()); 
 });

লুকানো উপাদানগুলিতে মান পরিবর্তনগুলি। পরিবর্তন () ইভেন্টটি স্বয়ংক্রিয়ভাবে আগুন দেয় না। সুতরাং, আপনি যে মানটি নির্ধারণ করছেন তা যেখানেই রয়েছে, আপনি এটিতে ট্রিগার করতে jQuery কেও বলতে হবে।

এইচটিএমএল

 <div id="message"></div>
<input type="hidden" id="testChange" value="0"  />    

অবশ্যই JAVASCRIPT

var $message = $('#message');
var $testChange = $('#testChange');
var i = 1;

function updateChange() {
    $message.html($message.html() + '<p>Changed to ' + $testChange.val() + '</p>');
}

$testChange.on('change', updateChange);

setInterval(function() {
    $testChange.val(++i).trigger('change');; 
    console.log("value changed" +$testChange.val());
}, 3000);

updateChange();

প্রত্যাশার মতো কাজ করা উচিত

http://jsfiddle.net/7CM6k/3/


1
আমার জন্য কাজ করছে না ... যাইহোক, কোনও হিডেন ফিল্ডে মান আটকানো কীভাবে সম্ভব? : /
সাইমন ডুগ্রি

আরে ধন্যবাদ, পেস্টটি সেখানে থাকা উচিত নয়, তবে পরিবর্তনগুলি লুকানো ক্ষেত্র পরিবর্তনের ইভেন্টটি সনাক্ত করতে পারে
তরুণ গুপ্ত

@ ক্রিসেরিকসন ফিডলের জন্য ধন্যবাদ, আমি কোডটি আপডেট করেছি যাতে এটি স্পষ্টভাবে পরিবর্তনটি সনাক্ত করতে পারে, দয়া করে আপডেট করা ফিডলটি
তরুণ গুপ্ত

1
@ তারুনগুপ্ত হ্যাঁ এটি ট্রিগারটিতে কাজ করছে, তবে মান পরিবর্তন করছে না। কোনও লুকানোটির মান পরিবর্তিত হয়ে গেলে ব্রাউজারগুলি পরিবর্তন ইভেন্টটিকে চালিত করে না, আপনাকে এটি ম্যানুয়ালি করতে হবে।
ক্রিস এরিকসন 14

সমস্ত লুকানো ক্ষেত্রের জন্য বাইন্ডিং সম্পর্কে এই উত্তরের প্রথম অংশটি খুব সহায়ক ছিল। ধন্যবাদ!
চাদ


4

Object.defineProperty()ইনপুট উপাদানটির 'মান' সম্পত্তিটি নতুন করে সংজ্ঞায়িত করতে এবং তার পরিবর্তনের সময় কিছু করার জন্য এটি ব্যবহার করা সম্ভব ।

Object.defineProperty() আমাদের কোনও সম্পত্তিটির জন্য গেটর এবং সেটটার সংজ্ঞায়িত করার অনুমতি দেয়, এইভাবে এটি নিয়ন্ত্রণ করে।

replaceWithWrapper($("#hid1")[0], "value", function(obj, property, value) { 
  console.log("new value:", value)
});

function replaceWithWrapper(obj, property, callback) {
  Object.defineProperty(obj, property, new function() {
    var _value = obj[property];
    return {
      set: function(value) {
        _value = value;
        callback(obj, property, value)
      },
      get: function() {
        return _value;
      }
    }
  });
}

$("#hid1").val(4);

https://jsfiddle.net/bvvmhvfk/


1
আমি এই পদ্ধতির পছন্দ করি, বিশেষত কারন অন্য সবার জবাব হ'ল "নিজেকে বদলে ফেলুন" ... যা সর্বদা সম্ভব হয় না।
sMyles 0

1
এটি প্রায় আমার জন্য কাজ করছে, গোপন ক্ষেত্রের চূড়ান্ত মান ব্যতীত সমস্ত কিছুই আসলে পরিবর্তিত হচ্ছে না, আপনি যদি জিসফিডেল পরীক্ষা করেন তবে লুকানো ফিল্ডের মান '123' (ক্রোম ব্যবহার করে) থেকে পরিবর্তন হবে না
মেটাগুরু

খুব কাছাকাছি, তবে অন্যরা যেমন উল্লেখ করেছে যে এটি ক্ষেত্রের জন্য মূল মিউটর / সেটারের কোনও রেফারেন্স বজায় রাখে না, সুতরাং আপডেটগুলি গোপন ইনপুটটিকে নিজেই প্রভাবিত করতে ব্যর্থ হয়। আমি একটি নতুন সমাধান এই পদ্ধতির টুকরা এবং এক অন্তর্ভুক্ত পোস্ট করছি stackoverflow.com/a/38802602/4342230
GuyPaddock

0

এই উদাহরণটি প্রতিবারই লুকানো খসড়া ক্ষেত্রের মান (ক্রোম ব্রাউজার) পরিবর্তিত করে খসড়া ক্ষেত্রের মানটি প্রদান করে:

var h = document.querySelectorAll('input[type="hidden"][name="draft"]')[0];
//or jquery.....
//var h = $('input[type="hidden"][name="draft"]')[0];

observeDOM(h, 'n', function(draftValue){ 
  console.log('dom changed draftValue:'+draftValue);
});


var observeDOM = (function(){
var MutationObserver = window.MutationObserver || 
window.WebKitMutationObserver;

  return function(obj, thistime, callback){
    if(typeof obj === 'undefined'){
      console.log('obj is undefined');
      return;
    }

    if( MutationObserver ){

        // define a new observer
        var obs = new MutationObserver(function(mutations, observer){

            if( mutations[0].addedNodes.length || mutations[0].removedNodes.length ){

               callback('pass other observations back...');

            }else if(mutations[0].attributeName == "value" ){

               // use callback to pass back value of hidden form field                            
               callback( obj.value );

            }

        });

        // have the observer observe obj for changes in children
        // note 'attributes:true' else we can't read the input attribute value
        obs.observe( obj, { childList:true, subtree:true, attributes:true  });

       }
  };
})();

0

ভিক্টরের জবাব বন্ধ করে দেওয়া , এখানে একটি বাস্তবায়ন যা আপনি যখন কোনও ইনপুট উপাদানটির মান পরিবর্তন করেন তখন পরবর্তী পরিবর্তন ইভেন্টটি বরখাস্ত হয় তা নিশ্চিত করতে প্রদত্ত লুকানো ইনপুট উপাদানটিতে একবার কল করতে পারেন:

/**
 * Modifies the provided hidden input so value changes to trigger events.
 *
 * After this method is called, any changes to the 'value' property of the
 * specified input will trigger a 'change' event, just like would happen
 * if the input was a text field.
 *
 * As explained in the following SO post, hidden inputs don't normally
 * trigger on-change events because the 'blur' event is responsible for
 * triggering a change event, and hidden inputs aren't focusable by virtue
 * of being hidden elements:
 * https://stackoverflow.com/a/17695525/4342230
 *
 * @param {HTMLInputElement} inputElement
 *   The DOM element for the hidden input element.
 */
function setupHiddenInputChangeListener(inputElement) {
  const propertyName = 'value';

  const {get: originalGetter, set: originalSetter} =
    findPropertyDescriptor(inputElement, propertyName);

  // We wrap this in a function factory to bind the getter and setter values
  // so later callbacks refer to the correct object, in case we use this
  // method on more than one hidden input element.
  const newPropertyDescriptor = ((_originalGetter, _originalSetter) => {
    return {
      set: function(value) {
        const currentValue = originalGetter.call(inputElement);

        // Delegate the call to the original property setter
        _originalSetter.call(inputElement, value);

        // Only fire change if the value actually changed.
        if (currentValue !== value) {
          inputElement.dispatchEvent(new Event('change'));
        }
      },

      get: function() {
        // Delegate the call to the original property getter
        return _originalGetter.call(inputElement);
      }
    }
  })(originalGetter, originalSetter);

  Object.defineProperty(inputElement, propertyName, newPropertyDescriptor);
};

/**
 * Search the inheritance tree of an object for a property descriptor.
 *
 * The property descriptor defined nearest in the inheritance hierarchy to
 * the class of the given object is returned first.
 *
 * Credit for this approach:
 * https://stackoverflow.com/a/38802602/4342230
 *
 * @param {Object} object
 * @param {String} propertyName
 *   The name of the property for which a descriptor is desired.
 *
 * @returns {PropertyDescriptor, null}
 */
function findPropertyDescriptor(object, propertyName) {
  if (object === null) {
    return null;
  }

  if (object.hasOwnProperty(propertyName)) {
    return Object.getOwnPropertyDescriptor(object, propertyName);
  }
  else {
    const parentClass = Object.getPrototypeOf(object);

    return findPropertyDescriptor(parentClass, propertyName);
  }
}

ডকুমেন্ট এ যেমন কল কল:

$(document).ready(function() {
  setupHiddenInputChangeListener($('myinput')[0]);
});

-4

যদিও এই থ্রেডটি 3 বছরের পুরানো, আমার সমাধানটি এখানে:

$(function ()
{
    keep_fields_uptodate();
});

function keep_fields_uptodate()
{
    // Keep all fields up to date!
    var $inputDate = $("input[type='date']");
    $inputDate.blur(function(event)
    {
        $("input").trigger("change");
    });
}

3
অস্পষ্ট ইভেন্টটি তখনই ট্রিগার করা হয় যখন ইনপুটটি ফোকাস হারিয়ে ফেলবে। কোনও লুকানো ইনপুট জন্য বৈধ প্রতিক্রিয়া নয়
manuerumx
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.