JQuery এর সাহায্যে ফর্ম ডেটাটিকে জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তর করুন

Question

আমি কীভাবে আমার ফর্মের সমস্ত উপাদানকে জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তর করব?

আমি প্রতিটি ফর্মটি লুপ না করে আমার ফর্মটি থেকে স্বয়ংক্রিয়ভাবে একটি জাভাস্ক্রিপ্ট অবজেক্ট তৈরির কিছু উপায় চাই। আমি কোনও স্ট্রিং চাই না, যেমনটি ফেরত পাঠানো হয়েছে $('#formid').serialize();এবং আমি মানচিত্রটি ফেরত চাই না$('#formid').serializeArray();

Comments

কারণ প্রথমটি একটি স্ট্রিং দেয়, ঠিক যেমনটি আপনি জিইটি পদ্ধতিতে ফর্মটি জমা দিলে আপনি কী পেতে চান এবং দ্বিতীয়টি আপনাকে একটি নামের মান জোড়া সহ প্রতিটি বস্তুর অ্যারে দেয়। আমি চাই যে আমার কাছে যদি "ইমেল" নামে একটি ক্ষেত্র থাকে তবে আমি এমন একটি বস্তু পেয়েছি যা আমাকে সেই মানটি আপত্তি.ইমেলের সাথে পুনরুদ্ধার করতে দেয়। SerializeArray (), আমি obj মত কিছু করতে হবে চাই [indexOfElement] .value

— Yisroel

@ জেমস - ডি ক্রকফোর্ডের জেএসএন-জেএস লাইব্রেরি ব্যবহার করে গৃহীত উত্তর। এখানে একটি উদাহরণ রয়েছে: github.com/tleese22/google-app-engine-jappstart/blob/master/src/…

— টেলর

@Taylor হ্যাঁ, আমি বলতে চাই সঠিক উত্তর Crockford এর liberal এর সংক্ষিপ্ত রূপ এবং Tobias 'তাই মত ফাংশন: JSON.stringify ($ (' ব্যবহার করে। MyForm ') serializeObject ())

— জেমস ম্যাককোর্মাক

@ জোঞ্জ - একটি ফর্ম উপাদান ব্যবহারের জন্য জমা / সংক্রমণকরণের পাশাপাশি আরও অন্যান্য কারণ রয়েছে। আপনি যদি জাভাস্ক্রিপ্টের মধ্যে ফর্মের মানগুলি (যেমন সিঙ্গল পেজ অ্যাপ্লিকেশন) সহ কোনও ভারী উত্তোলন করছেন তবে অ্যাক্সেস এবং ম্যানিপুলেট করার জন্য কোনও অবজেক্ট ফর্ম্যাটে এগুলি রাখা খুব সহজ। এছাড়াও, এইচটিটিপি পোস্ট এবং গেট ক্যোয়ারী স্ট্রিংগুলি কেবল ডেটা ঘুরিয়ে দেওয়ার একমাত্র ফর্ম্যাট নয়।

— প্যাট্রিক এম

আমি খুব ভাল জেএস

— 2'13 সমীচীন

Answer 1

serializeArrayইতিমধ্যে যে ঠিক আছে। আপনার কেবলমাত্র প্রয়োজনীয় ফর্ম্যাটটিতে ডেটা ম্যাসেজ করতে হবে:

function objectifyForm(formArray) {//serialize data function

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}

লুকানো ক্ষেত্রগুলির দিকে নজর রাখুন যার প্রকৃত ইনপুটগুলির একই নাম যেমন তারা ওভাররাইট করা হবে।

Comments

যেমন টভানফসন বলেছে, কেন সংগ্রহের উপর দু'বার পুনরাবৃত্তি হবে?

— ইয়েস্রোয়েল

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

— টোবিয়াস কোহেন

সতর্কতা অবলম্বন করুন, সিরিয়ালাইজআরে () অক্ষম উপাদানগুলিকে অন্তর্ভুক্ত করবে না। আমি প্রায়শই ইনপুট উপাদানগুলি অক্ষম করি যা পৃষ্ঠার অন্যান্য উপাদানগুলির সাথে সিঙ্ক হয় তবে আমি সেগুলি এখনও আমার সিরিয়ালযুক্ত অবজেক্টে অন্তর্ভুক্ত করতে চাই। আপনার $.map( $("#container :input"), function(n, i) { /* n.name and $(n).val() */ } );যদি অক্ষম উপাদানগুলি অন্তর্ভুক্ত করার দরকার হয় তবে এমন কিছু ব্যবহার করা ভাল ।

— স্যামুয়েল মিচাম

@ টোবিয়াস কোহেন এটি foo[bar]প্রত্যাশার মতো টাইপ ইনপুটগুলি পরিচালনা করে না , অন্যান্য ইনপুট নামের বিভিন্নগুলির উল্লেখ না করে। এই সমস্যার অগভীর সমাধান নিয়ে খুব হতাশ হওয়ার পরে, আমি আমার নিজের jQuery প্লাগইন লিখতে পেরেছি - এই প্রশ্নের উত্তরটি দিয়েছি এমন উত্তরের বিবরণ।

— maček

@ ম্যাসেক আমি জানি এটি কয়েক মাস পুরাতন তবে অ্যারে কখন থেকে অ-সংখ্যাসূচক সূচকগুলি ব্যবহার করবেন? কারও কাছে একটি ইনপুট ফু [বার] এর নাম রাখা উচিত নয় এবং এটিকে অ্যারে হিসাবে গণ্য করার আশা করা উচিত। আপনি কি অ্যারে এবং হ্যাশগুলিকে বিভ্রান্ত করছেন? হ্যাঁ, [] সাধারণত অ্যাক্সেসর হিসাবে বোঝা যায় তবে কেবল অ্যারেগুলিতে নয়। এটি বৈধ এইচটিএমএল বলা কিন্তু এইচটিএমএল বৈশিষ্ট্যে নয় এটি একটি বৈপরীত্য। হ্যাঁ, ব্রাউজার এতে কমে না পারে তবে অনেক ওয়েবসার্ভার কীভাবে এটির মতো ডিজাইরাইজ করতে হয় তা তারা জানতে পারে না। কেন? কারণ এটি HTML অনুচ্ছেদে নেই spec সুতরাং, এটি সত্যই অবৈধ।

— kroehre

Answer 2

মনিবের মতো ফর্মগুলি JSON এ রূপান্তর করুন

---

বর্তমান উত্সটি গিটহাব এবং বোরের উপর ।

ower বোর ইনস্টল jquery- সিরিয়ালাইজ-অবজেক্ট

---

নিম্নলিখিত কোডটি এখন অবচয় করা হয়েছে ।

নিম্নলিখিত কোডটি সমস্ত ধরণের ইনপুট নামের সাথে কাজ করতে পারে; এবং আপনি যেমন আশা করেন ঠিক তেমন পরিচালনা করুন।

উদাহরণ স্বরূপ:

<!-- All of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">

// Output
{
  "honey":{
    "badger":"a"
  },
  "wombat":["b"],
  "hello":{
    "panda":["c"]
  },
  "animals":[
    {
      "name":"d",
      "breed":"e"
    }
  ],
  "crazy":[
    null,
    [
      {"wonky":"f"}
    ]
  ],
  "dream":{
    "as":{
      "vividly":{
        "as":{
          "you":{
            "can":"g"
          }
        }
      }
    }
  }
}

ব্যবহার

$('#my-form').serializeObject();

যাদুবিদ্যা (জাভাস্ক্রিপ্ট)

(function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){
            base[key] = value;
            return base;
        };

        this.push_counter = function(key){
            if(push_counters[key] === undefined){
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // Skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // Adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // Push
                if(k.match(patterns.push)){
                    merge = self.build([], self.push_counter(reverse_key), merge);
                }

                // Fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build([], k, merge);
                }

                // Named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);

Comments

সুতরাং, এটি বেশ ভাল কাজ করে। তবে এটির নামবিহীন: নামটি বোঝায় এটি জেএসএনকে ফেরত দেয় না। পরিবর্তে, এটি একটি বস্তুর আক্ষরিক প্রত্যাবর্তন করে। এছাড়াও, হাইপপ্রোপার্টিটি পরীক্ষা করা জরুরী, অন্যথায় আপনার অ্যারেগুলির প্রোটোটাইপের সাথে সংযুক্ত এমন কোনও কিছু রয়েছে, যেমন: {সংখ্যা: ["1", "3", সূচিপত্র:) () {...}]}

— ফ্রন্ট্যান্ডবায়িউটি

@ ফ্রন্টএন্ডবিটিউটি আসলে, জেএসএন হ'ল সেই অনুমানটিকে যা বলা উচিত: ডেভেলপার.মোজিলা.আর.এন / জেএসএন# টোজেএসএন /)_মাদাদ একটি দুর্ভাগ্যজনক মিসনোমর।

— রায়ান ফ্লোরেন্স

@ মারেক, আমি এখানে জেসফিডেলে একটি পরীক্ষা করেছি । কৌশলটি আপনার নির্বাচনের নামটি সঠিকভাবে দেওয়া। <select name="foo" multiple="multiple">কোন পরিস্থিতিতে কাজ করবে না। যাইহোক, যদি আপনি ব্যবহার [], হিসাবে <select name="bar[]" multiple="multiple">, এটা ঠিক জরিমানা :) কাজ করবে

— maček

দেখতে চান যে github.com/serbanghita/formToObject একই জাতীয় জাভাস্ক্রিপ্ট পদ্ধতি (কোনও তৃতীয় পক্ষের লাইব্রেরির প্রয়োজন নেই) যা একই কাজ করে। 'একাধিক' সমর্থন করে, 'অক্ষম' উপাদানগুলিকে উপেক্ষা করে।

— banerban Ghiță

এই সমাধানটি শীর্ষে থাকা উচিত কারণ এটি ফর্ম উপাদানগুলির নাম হিসাবে নেস্টেড কীগুলির সমস্যা নিয়ে কাজ করে।

— স্কয়ারগেট

Answer 3

কি সমস্যা:

var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;}); 

Comments

@ লাইজি - যদি কিছু না নির্বাচিত হয় তবে আপনি কেন এটি আপনার পিছনের প্রান্তে চাইবেন? যদি আপনাকে অবশ্যই একটি বিকল্প নির্বাচন করতে হয়, সিরিয়ালাইজ করার আগে ইনপুটটি বৈধতা দিন।

— ডেমেন্টিক

আপনি যদি কিছু ফিরিয়ে না নিচ্ছেন তবে কেন আপনি কেবল তার .eachপরিবর্তে ব্যবহার করবেন না .map??

— আজেফরাতি

এটি এত সহজ কারণ এটি দুর্দান্ত নিষ্পাপ ... একই নামে চেকবক্সগুলি হ্যান্ডেল করে না। প্রতিবার এটি এর আগে চেক করা আইটেমটিকে ওভাররাইড করবে। এটি যথাযথভাবে সিরিয়ালযুক্ত হয়েছে তা নিশ্চিত করতে আপনার অবশ্যই কিছু ইনপুট ধরণের সনাক্তকরণ প্রয়োজন।

— জোশুয়া এফ। রাউন্ট্রি

আপনি যদি একটি খাঁটি jQuery সমাধান চান, আপনি ব্যবহার করতে পারেনvar form = {}; $.each($(this).serializeArray(), function (i, field) { form[field.name] = field.value || ""; });

— tfmontague

$(this).serializeArray().reduce(function(m,o){ m[o.name] = o.value; return m;}, {})

— সাইটগুলি

Answer 4

টোবিয়াস কোহেনের সমাধানের একটি স্থির সংস্করণ। এইটি সঠিকভাবে 0এবং এর মতো মিথ্যা মানগুলি পরিচালনা করে ''।

jQuery.fn.serializeObject = function() {
  var arrayData, objectData;
  arrayData = this.serializeArray();
  objectData = {};

  $.each(arrayData, function() {
    var value;

    if (this.value != null) {
      value = this.value;
    } else {
      value = '';
    }

    if (objectData[this.name] != null) {
      if (!objectData[this.name].push) {
        objectData[this.name] = [objectData[this.name]];
      }

      objectData[this.name].push(value);
    } else {
      objectData[this.name] = value;
    }
  });

  return objectData;
};

এবং আপনার কোডিং সুবিধার জন্য একটি কফিস্ক্রিপ্ট সংস্করণ:

jQuery.fn.serializeObject = ->
  arrayData = @serializeArray()
  objectData = {}

  $.each arrayData, ->
    if @value?
      value = @value
    else
      value = ''

    if objectData[@name]?
      unless objectData[@name].push
        objectData[@name] = [objectData[@name]]

      objectData[@name].push value
    else
      objectData[@name] = value

  return objectData

Comments

কফিস্ক্রিপ্টে, প্রথমে যদি ব্লকটি ছোট করা যায়value = @value ? ''

— এনজিফনব

এবং যদি আপনি রেলের মতো ফর্মগুলি সিরিয়ালাইজ করার চেষ্টা করছেন তবে আপনি উত্পন্ন কীগুলি থেকে উপাদান মূল মুছে ফেলতে চাইতে পারেন। যে অর্জন, আমি একটি নতুন PARAM জুড়েছেন keyMapএবং নিম্নলিখিত লাইন: key = if keyMap? then keyMap(@name) else @name। এখন আপনি ম্যাপিং ফাংশন যেমন পাস করতে পারেন (name) -> name.match(/\[([^\]]+)]/)[1]। এবং তারপর এক সব পরবর্তী পরিবর্তন করতে হবে @nameকরতে key, অবশ্যই

— Damir Zekić

@ দামিরজেকি, আপনার মূল উপাদানটি থাকলে postআপনি কেবল এটি করতে পারতেন $('form').serializeObject().post। অভিনব ম্যাপিংয়ের দরকার নেই।

— maček

@ দামিরজেকিć এই লাইনটি কী করছে? if (!objectData[this.name].push)??

— কিট্টু

@ কিট্টু এটি পরীক্ষা করছে যে objectData[this.name]এটির ধাক্কা পদ্ধতি রয়েছে (মোটামুটি, এটি কি অ্যারে)? যদি এটি একটি অ্যারে হয় তবে এটি মানটিকে ধাক্কা দেয়, যদি এটি কোনও অ্যারে না হয় তবে এটি এটিকে অ্যারে রূপান্তর করে যাতে একই কী সহ একাধিক মান একটি অ্যারের সাথে সংযুক্ত হয়ে যায়।

— ড্যানিয়েল এক্স মুর

Answer 5

আমি Array.prototype.reduceএটি ব্যবহার করতে পছন্দ করি কারণ এটি একটি ওয়ানলাইনার, এবং এটি অ্যান্ডোরকোর.জেএস বা এর মত নির্ভর করে না :

$('#formid').serializeArray()
    .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});

এটি ব্যবহার করে উত্তরের অনুরূপ Array.prototype.map , তবে অতিরিক্ত অবজেক্ট ভেরিয়েবলের সাহায্যে আপনার স্কোপটি খসখস করতে হবে না। এক দামের দোকান.

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

Comments

এটি বেশ মার্জিত। তবে এটি লক্ষণীয় যে array.prototype.reduce()এটি আইসি 8 তে উপলভ্য নয় কারণ এটি ইসমাস্ক্রিপ্ট 5 স্পেসিফিকেশনের অংশ। সুতরাং আপনার যদি আই 8 সমর্থন দরকার হয় তবে আপনি একটি পলিফিল বা অন্য কোনও সমাধান পুরোপুরি ব্যবহার করতে চাইবেন ।

— গুলফ্লাম

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

— এথন ব্রাউন

ওয়েল, আপনার আইটি লোকেরা আইই 11 এন্টারপ্রাইজ মোডে সন্ধান করা উচিত - এটি একটি আধুনিক ব্রাউজার এবং আইই 8- সামঞ্জস্যপূর্ণ অ্যাপ্লিকেশনগুলি চালনার একটি উপায় সরবরাহ করে। মাইক্রোসফ্টের পক্ষ থেকে স্মার্ট পদক্ষেপ: howtogeek.com/184634/…

— ইথান ব্রাউন

Answer 6

এই সমস্ত উত্তর আমার কাছে এত উপরে উঠেছিল। সরলতার জন্য কিছু বলার আছে। যতক্ষণ না আপনার সমস্ত ফর্ম ইনপুটগুলির নাম বৈশিষ্ট্য সেট থাকে এটি কেবল জিম ড্যান্ডি হিসাবে কাজ করা উচিত।

$('form.myform').submit(function () {
  var $this = $(this)
    , viewArr = $this.serializeArray()
    , view = {};

  for (var i in viewArr) {
    view[viewArr[i].name] = viewArr[i].value;
  }

  //Do stuff with view object here (e.g. JSON.stringify?)
});

Comments

যদিও নেস্টেড ফর্ম ডেটা হ্যান্ডেল করে না, সে কারণেই উত্তরগুলি আরও জটিল হয়।

— frontendbeauty

আমার জন্য দুর্দান্ত কাজ করেছেন কী-মান সংযোজনগুলির প্রয়োজন কেবল স্টোরেজ; স্ট্রিংফাইং করে এবং তারপরে লোকালস্টোরেজ বা কুকিগুলিতে সংরক্ষণ করার ফলে খালি কাজ করা হয়েছিল।

— গ্রেগ পেটিট

Answer 7

উপাদানগুলির প্রতিটি পরীক্ষা না করে এটি করার সত্যিই কোনও উপায় নেই। আপনি যা জানতে চান তা হ'ল "অন্য কেউ ইতিমধ্যে এমন কোনও পদ্ধতি লিখেছেন যা কোনও ফর্মকে JSON অবজেক্টে রূপান্তর করে?" নিম্নলিখিতগুলির মতো কিছু কাজ করা উচিত - নোট করুন যে এটি আপনাকে কেবল এমন ফর্ম উপাদানগুলি দেবে যা পোষ্টের মাধ্যমে ফিরে আসবে (অবশ্যই একটি নাম থাকতে হবে)। এটি পরীক্ষা করা হয় না ।

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

Comments

সত্য, আমি এমন একটি প্লাগইন পছন্দ করব যা আমার জন্য এটি করবে। নাম থাকার সীমাবদ্ধতা কোনও বড় বিষয় নয়। এটি কি টেক্সারিয়াস এবং নির্বাচন সহ একটি ফর্মের সমস্ত ক্ষেত্রকে টানবে?

— ইয়েস্রোয়েল

আপনি যদি [অক্ষম] -এর জন্য অ্যাকাউন্ট করতে চান তা নিশ্চিত নন তবে আমার মনে হয় না এটি পাঠানো / নেওয়া উচিত।

— মধ্যস্থতাকারী ওমুরালিভ

মানচিত্রটি পেতে সিরিয়ালাইজ অ্যারে () ব্যবহার করা সহজ হতে পারে এবং তারপরে উপরের মত কোডটি ব্যবহার করে এটি একটি সাধারণ জেএসওএন অবজেক্টে রূপান্তর করতে পারে, আমি নিজেই ফর্মটি নিয়ে কাজ করছি না

— ইয়েস্রোয়েল

সিরিয়ালাইজড অ্যারে ব্যবহার করে কাজ হবে, তবে মূলত আপনি দুটি বার সংগ্রহের মাধ্যমে পুনরাবৃত্তি করতে চান - একবার অ্যারে উত্পাদন করতে, তারপরে অ্যারের উপরে over আমি এর প্রয়োজন দেখছি না।

— tvanfosson

আমি সক্ষম / অক্ষম জন্য নির্বাচক সামঞ্জস্য করব।

— tvanfosson

Answer 8

যদি আপনি অ্যান্ডস্কোর.জেএস ব্যবহার করেন তবে আপনি তুলনামূলকভাবে সংক্ষিপ্ত ব্যবহার করতে পারেন:

_.object(_.map($('#myform').serializeArray(), _.values))

Answer 9

আমি যাচাই করেছিলাম যে অন্য সমস্ত উত্তরগুলির সাথে একটি সমস্যা রয়েছে, যে ইনপুট নামটি যদি অ্যারে হিসাবে থাকে name[key]তবে যেমন , তবে এটি এই জাতীয় উত্পন্ন করা উচিত:

name:{ key : value }

---

উদাহরণস্বরূপ: আপনার যদি নীচের মত একটি এইচটিএমএল ফর্ম থাকে:

<form>
    <input name="name" value="value" >
    <input name="name1[key1]" value="value1" >
    <input name="name2[key2]" value="value2" >
    <input name="name3[key3]" value="value3" >
</form>

তবে এটি নীচের জাসনের মতোই উত্পন্ন করা উচিত এবং অন্যান্য সমস্ত উত্তর সহ নীচের মতো কোনও বস্তু হয়ে ওঠে না। সুতরাং কেউ যদি নীচের জেএসএনের মতো কিছু আনতে চান তবে নীচের জেএস কোডটি চেষ্টা করুন।

{
    name  : 'value',
    name1 : { key1 : 'value1' },
    name2 : { key2 : 'value2' },
    name3 : { key2 : 'value2' }
}

$.fn.getForm2obj = function() {
  var _ = {};
  $.map(this.serializeArray(), function(n) {
    const keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g);
    if (keys.length > 1) {
      let tmp = _;
      pop = keys.pop();
      for (let i = 0; i < keys.length, j = keys[i]; i++) {
        tmp[j] = (!tmp[j] ? (pop == '') ? [] : {} : tmp[j]), tmp = tmp[j];
      }
      if (pop == '') tmp = (!Array.isArray(tmp) ? [] : tmp), tmp.push(n.value);
      else tmp[pop] = n.value;
    } else _[keys.pop()] = n.value;
  });
  return _;
}
console.log($('form').getForm2obj());
$('form input').change(function() {
  console.clear();
  console.log($('form').getForm2obj());
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
  <input name="name" value="value">
  <input type="checkbox" name="name1[]" value="1" checked="checked">1
  <input type="checkbox" name="name1[]" value="2">2
  <input type="checkbox" name="name1[]" value="3">3<br>
  <input type="radio" name="gender" value="male" checked="checked">male
  <input type="radio" name="gender" value="female"> female
  <input name="name2[key1]" value="value1">
  <input name="one[another][another_one]" value="value4">
  <input name="name3[1][name]" value="value4">
  <input name="name3[2][name]" value="value4">
  <input name="[]" value="value5">
</form>

Comments

এই উত্তরে উল্লিখিত কেসটি কভার করে না, তবে এতে চেকবক্স []] এমনকি একটি [অন্য] [অন্য একক]] এরও আওতাভুক্ত নয়

— লিওনার্দো বিয়াল

@ লিওনার্দোবেইল আমি আমার উত্তরগুলি ঠিক করেছি .. এখনই এটি পরীক্ষা কর ..!

— ভাভিক হিরানী

আমি ডাউনভোটার এবং আমি ডাউনভোটেড কারণ evalএইভাবে ব্যবহার করা উচিত নয় কারণ eval, যখন এইভাবে ব্যবহার করা হয় তখন ভয়াবহ অবিশ্বাস্য, বগি, দুর্বৃত্ত, এবং সম্ভাব্য অনিরাপদ অভ্যাসগুলি প্রচার করে।

— জ্যাক গিফিন 21

আমি একমত হতে পারি না এটি একটি ভাল উত্তর। এবং দয়া করে যখন আপনি উত্তরগুলি লিখবেন তখন আপনার কোডটি স্ব-বর্ণনামূলক করে তুলবেন বা ব্যাখ্যা করুন। this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);}সংক্ষিপ্ত এবং বর্ণনামূলক নয়। কম অভিজ্ঞতার সাথে একটি ডিভ কেন কেবল এবং কীভাবে কাজ করে তা না বুঝেই এটি অনুলিপি করবে।

— আইআরএস

@ জ্যাকগিফিন এখনই আমার নতুন কোডটি পরীক্ষা করে দেখুন কারণ আমি eval()আমার কোড থেকে সরিয়েছি ।

— ভাভিক হিরানী

Answer 10

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

অন্যান্য এসও প্রশ্নের আমার উত্তর এখানে :

প্রাথমিকভাবে, আমরা jQuery এর serializeArray()পদ্ধতি ব্যবহার করছিলাম তবে এতে অক্ষম থাকা ফর্ম উপাদানগুলি অন্তর্ভুক্ত নয়। আমরা প্রায়শই ফর্ম উপাদানগুলি অক্ষম করব যা পৃষ্ঠার অন্যান্য উত্সগুলিতে "সিঙ্কড" হয় তবে আমাদের তবুও আমাদের সিরিয়ালযুক্ত অবজেক্টে ডেটা অন্তর্ভুক্ত করতে হবে। তাই serializeArray()বাইরে। আমরা নির্বাচিতটিকে প্রদত্ত :inputধারকটিতে সমস্ত ইনপুট উপাদান (উভয় সক্ষম ও অক্ষম) পেতে এবং তারপরে $.map()আমাদের অবজেক্টটি তৈরি করতে ব্যবহার করি।

var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
    var o = {};
    o[n.name] = $(n).val();
    return o;
});
console.log(obj);

নোট করুন যে এটি কাজ করার জন্য, আপনার প্রতিটি ইনপুটগুলির একটি nameবৈশিষ্ট্যের প্রয়োজন হবে, যা ফলস্বরূপ অবজেক্টের সম্পত্তিটির নাম হবে।

এটি আসলে আমরা যা ব্যবহার করেছি তা থেকে সামান্য সংশোধিত হয়েছে। আমাদের এমন একটি বস্তু তৈরি করা দরকার যা। নেট আইডোরিওর হিসাবে কাঠামোযুক্ত ছিল, সুতরাং আমরা এটি ব্যবহার করেছি: (এটি কার্যকর হলে আমি এখানে এটি সরবরাহ করি)

var obj = $.map(inputs, function(n, i)
{
    return { Key: n.name, Value: $(n).val() };
});
console.log(obj);

আমি এই দুটি সমাধানই পছন্দ করি কারণ এগুলি $.map()ফাংশনের সাধারণ ব্যবহার এবং আপনার নির্বাচকের উপর আপনার সম্পূর্ণ নিয়ন্ত্রণ রয়েছে (সুতরাং, আপনার ফলস্বরূপ অবজেক্টটি সহ আপনি কোন উপাদানগুলি শেষ করেন)। এছাড়াও, কোনও অতিরিক্ত প্লাগইন প্রয়োজন। সরল পুরানো jQuery

Comments

আমি একটি প্রকল্পে এটি চেষ্টা করেছিলাম, এর mapমতো ব্যবহার করে একটি একক সম্পত্তি সহ বস্তুর একটি অ্যারে তৈরি হয়, এটি সমস্ত বস্তুকে এক বস্তুর মধ্যে ভেঙে দেয় না।

— joshperry

Answer 11

এই ফাংশনটিতে একই নামের একাধিক উপাদানগুলির সাথে বহুমাত্রিক অ্যারেগুলি পরিচালনা করা উচিত।

আমি এখনও কয়েক বছর ধরে এটি ব্যবহার করছি:

jQuery.fn.serializeJSON=function() {
  var json = {};
  jQuery.map(jQuery(this).serializeArray(), function(n, i) {
    var _ = n.name.indexOf('[');
    if (_ > -1) {
      var o = json;
      _name = n.name.replace(/\]/gi, '').split('[');
      for (var i=0, len=_name.length; i<len; i++) {
        if (i == len-1) {
          if (o[_name[i]]) {
            if (typeof o[_name[i]] == 'string') {
              o[_name[i]] = [o[_name[i]]];
            }
            o[_name[i]].push(n.value);
          }
          else o[_name[i]] = n.value || '';
        }
        else o = o[_name[i]] = o[_name[i]] || {};
      }
    }
    else {
      if (json[n.name] !== undefined) {
        if (!json[n.name].push) {
          json[n.name] = [json[n.name]];
        }
        json[n.name].push(n.value || '');
      }
      else json[n.name] = n.value || '';      
    }
  });
  return json;
};

Answer 12

তুমি এটি করতে পারো:

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());

JSON দেখুন ।

Answer 13

ওয়ান-লাইনার (jQuery ব্যতীত কোনও নির্ভরতা নেই), mapপদ্ধতিতে উত্তীর্ণ ফাংশনটির জন্য স্থির অবজেক্ট বাইন্ডিং ব্যবহার করে ।

$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]

এর মানে কি?

"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }

প্রগতিশীল ওয়েব অ্যাপ্লিকেশনগুলির জন্য উপযোগী (নিয়মিত ফর্ম জমা দেওয়ার ক্রিয়া পাশাপাশি এজাক্স অনুরোধ উভয়কেই সহজে সমর্থন করা যায়)

Answer 14

ব্যবহার করুন:

function form_to_json (selector) {
  var ary = $(selector).serializeArray();
  var obj = {};
  for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
  return obj;
}

আউটপুট:

{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}

Answer 15

সরলতা এখানে সেরা। আমি একটি সাধারণ স্ট্রিং একটি নিয়মিত প্রকাশের সাথে প্রতিস্থাপন ব্যবহার করেছি এবং তারা এতোক্ষণ মনোযোগের মতো কাজ করেছে like আমি কোনও নিয়মিত এক্সপ্রেশন বিশেষজ্ঞ নই, তবে আমি বাজি ধরে রাখি যে আপনি এমনকি খুব জটিল অবজেক্টও তৈরি করতে পারেন।

var values = $(this).serialize(),
attributes = {};

values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
    attributes[name] = value;
});

Answer 16

কিছু পুরানো উত্তর থেকে:

$('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})

Comments

আমি যা বলতে পারি তার থেকে পার্থক্যটি হ'ল আপনার সমাধানটির উপর নির্ভর করে না serializeArrayতাই আপনি যা চান ইনপুটগুলি বেছে নেওয়ার স্বাধীনতা পেয়েছেন (যেমন, আপনি অক্ষম ইনপুটগুলি অন্তর্ভুক্ত করতে পারেন), তাই না? অর্থাৎ এটি কোনও রূপ বা জমা দেওয়ার ইভেন্টের সাথে মিলিত হয় না, এটি কেবল নিজের দ্বারা স্বতন্ত্র?

— ডিভিটান

সংযুক্ত উত্তরের সাথে কেবলমাত্র ছোট পার্থক্যটি হ'ল ইনস্ট্যান্টিয়েট করার জন্য কোনও ডেটা নেই, reduceঅবজেক্টটি ফেরত দেয়। এটি toArrayjQuery থেকে যেহেতু স্বাধীন নয় ।

— সাইটগুলি

Answer 17

টোবিয়াস কোহেনের কোডে আমি একটি সমস্যা পেয়েছি (এটি সম্পর্কে সরাসরি মন্তব্য করার মতো পর্যাপ্ত পয়েন্ট আমার নেই), যা অন্যথায় আমার পক্ষে কাজ করে। যদি আপনার একই নামের দুটি নির্বাচন বিকল্প থাকে তবে মান = "" উভয়ই থাকে, মূল কোডটি "নাম": "" পরিবর্তে "নাম" তৈরি করবে: ["", ""]

আমি মনে করি প্রথম শর্তে "|| ও [this.name] == '' যোগ করে এটি ঠিক করা যেতে পারে:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] || o[this.name] == '') {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Answer 18

মেকের সমাধানটি ব্যবহার করে , আমি এএসপি.নেট এমভিসি একইভাবে তাদের নেস্টেড / জটিল বস্তুগুলি যেভাবে পরিচালনা করে তা নিয়ে কাজ করার জন্য এটি সংশোধন করেছি। আপনাকে যা করতে হবে তা হ'ল বৈধকরণের অংশটি এটিকে সংশোধন করতে হবে:

"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,

এটি মিলবে এবং তারপরে নামগুলির সাথে সঠিকভাবে উপাদানগুলি মানচিত করবে:

<input type="text" name="zooName" />

এবং

<input type="text" name="zooAnimals[0].name" />

Answer 19

সবচেয়ে সহজ এবং সবচেয়ে সঠিক উপায় আমি এই সমস্যা পাওয়া যায়নি ব্যবহার করতে ছিল BBQ প্লাগইন বা এই এক (যা সম্পর্কে 0.5K আকার বাইট)।

এটি বহু মাত্রিক অ্যারেগুলির সাথেও কাজ করে।

$.fn.serializeObject = function()
{
	return $.deparam(this.serialize());
};

Comments

এটি দুর্দান্তভাবে কাজ করবে বলে মনে হচ্ছে না। আছে jQuery-deparam জন্য বিকল্প সংগ্রহস্থলের যে আবাস এবং npm বিবরণ ফাইল অন্তর্ভুক্ত করা হয়েছে।

— আলফ ইটন

Answer 20

JQuery, jquery.seializeJSON এর জন্য এটি করার জন্য একটি প্লাগইন রয়েছে । আমি এখন কয়েকটি প্রকল্পে এটি সফলভাবে ব্যবহার করেছি। ইহা যাদুর মত কাজ করে।

Answer 21

const formData = new FormData(form);

let formDataJSON = {};

for (const [key, value] of formData.entries()) {

    formDataJSON[key] = value;
}

Answer 22

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

$.formObject = function($o) {
    var o = {},
        real_value = function($field) {
            var val = $field.val() || "";

            // additional cleaning here, if needed

            return val;
        };

    if (typeof o != "object") {
        $o = $(o);
    }

    $(":input[name]", $o).each(function(i, field) {
        var $field = $(field),
            name = $field.attr("name"),
            value = real_value($field);

        if (o[name]) {
            if (!$.isArray(o[name])) {
                o[name] = [o[name]];
            }

            o[name].push(value);
        }

        else {
            o[name] = value;
        }
    });

    return o;
}

এর মতো ব্যবহার করুন:

var obj = $.formObject($("#someForm"));

কেবল ফায়ারফক্সে পরীক্ষা করা হয়েছে।

Answer 23

যে কোনও কিছুকে একটি বস্তুতে পরিণত করুন (ইউনিট পরীক্ষিত নয়)

<script type="text/javascript">
string = {};

string.repeat = function(string, count)
{
    return new Array(count+1).join(string);
}

string.count = function(string)
{
    var count = 0;

    for (var i=1; i<arguments.length; i++)
    {
        var results = string.match(new RegExp(arguments[i], 'g'));
        count += results ? results.length : 0;
    }

    return count;
}

array = {};

array.merge = function(arr1, arr2)
{
    for (var i in arr2)
    {
        if (arr1[i] && typeof arr1[i] == 'object' && typeof arr2[i] == 'object')
            arr1[i] = array.merge(arr1[i], arr2[i]);
        else
            arr1[i] = arr2[i]
    }

    return arr1;
}

array.print = function(obj)
{
    var arr = [];
    $.each(obj, function(key, val) {
        var next = key + ": ";
        next += $.isPlainObject(val) ? array.print(val) : val;
        arr.push( next );
      });

    return "{ " +  arr.join(", ") + " }";
}

node = {};

node.objectify = function(node, params)
{
    if (!params)
        params = {};

    if (!params.selector)
        params.selector = "*";

    if (!params.key)
        params.key = "name";

    if (!params.value)
        params.value = "value";

    var o = {};
    var indexes = {};

    $(node).find(params.selector+"["+params.key+"]").each(function()
    {
        var name = $(this).attr(params.key),
            value = $(this).attr(params.value);

        var obj = $.parseJSON("{"+name.replace(/([^\[]*)/, function()
        {
            return '"'+arguments[1]+'"';
        }).replace(/\[(.*?)\]/gi, function()
        {
            if (arguments[1].length == 0)
            {
                var index = arguments[3].substring(0, arguments[2]);
                indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;

                return ':{"'+indexes[index]+'"';
            }
            else
                return ':{"'+escape(arguments[1])+'"';
        })+':"'+value.replace(/[\\"]/gi, function()
        {
            return "\\"+arguments[0]; 
        })+'"'+string.repeat('}', string.count(name, ']'))+"}");

        o = array.merge(o, obj);
    });

    return o;
}
</script>

পরীক্ষার ফলাফল:

$(document).ready(function()
{
    console.log(array.print(node.objectify($("form"), {})));
    console.log(array.print(node.objectify($("form"), {selector: "select"})));
});

চালু

<form>
    <input name='input[a]' type='text' value='text'/>
    <select name='input[b]'>
        <option>select</option>
    </select>

    <input name='otherinput[c][a]' value='a'/>
    <input name='otherinput[c][]' value='b'/>
    <input name='otherinput[d][b]' value='c'/>
    <input name='otherinput[c][]' value='d'/>

    <input type='hidden' name='anotherinput' value='hidden'/>
    <input type='hidden' name='anotherinput' value='1'/>

    <input type='submit' value='submit'/>
</form>

ফলন হবে:

{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }

Answer 24

আমি নির্বাচিত সমাধানটিতে একটি সমস্যা পেয়েছি।

অ্যারে ভিত্তিক নাম রয়েছে এমন ফর্মগুলি ব্যবহার করার সময় জিকুয়েরি সিরিয়ালাইজ অ্যারে () ফাংশনটি আসলে মারা যায়।

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

যেহেতু আমি এই নিখুঁত বেস কার্যকারিতাটি গ্রহণ না করেই ফর্মগুলি সিরামাইজ করতে চেয়েছিলাম আমি নিজের seralizeArray () লেখার সিদ্ধান্ত নিয়েছি:

        var $vals = {};

        $("#video_edit_form input").each(function(i){
            var name = $(this).attr("name").replace(/editSingleForm\[/i, '');

            name = name.replace(/\]/i, '');

            switch($(this).attr("type")){
                case "text":
                    $vals[name] = $(this).val();
                    break;
                case "checkbox":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                case "radio":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                default:
                    break;
            }
        });

দয়া করে নোট করুন: এটি ফর্ম জমা দেওয়ার বাইরেও কাজ করে () সুতরাং আপনার কোডের বাকী অংশে যদি কোনও ত্রুটি দেখা দেয় তবে আপনি "পরিবর্তনগুলি সংরক্ষণ করুন" বলে একটি লিঙ্ক বোতামে রাখলে ফর্মটি জমা দেবে না।

এছাড়াও মনে রাখবেন যে এই ফাংশনটি কেবলমাত্র বৈধতার জন্য সার্ভার-সাইডে প্রেরণ করার জন্য ডেটা সংগ্রহ করার জন্য ফর্মটি বৈধতা দেওয়ার জন্য ব্যবহার করা উচিত নয়। এই জাতীয় দুর্বল এবং ভর-নির্ধারিত কোড ব্যবহারের ফলে এক্সএসএস হবে ইত্যাদির etc.

Answer 25

আমি ইদানীং একই সমস্যা ছিল এবং সাথে বেরিয়ে এসেছি এই .toJSON jQuery প্লাগইনটি যা কোনও ফর্মকে একই কাঠামোর সাথে একটি JSON অবজেক্টে রূপান্তর করে। এটি গতিশীল উত্পাদিত ফর্মগুলির জন্যও বিশেষভাবে কার্যকর যেখানে আপনি আপনার ব্যবহারকারীকে নির্দিষ্ট জায়গায় আরও ক্ষেত্র যুক্ত করতে চান।

মুল বক্তব্যটি হ'ল আপনি সম্ভবত একটি ফর্ম তৈরি করতে চান যাতে এটির নিজস্ব কাঠামো থাকে, সুতরাং আসুন আপনি একটি ফর্ম তৈরি করতে চান যেখানে ব্যবহারকারী শহরে তার পছন্দের জায়গাগুলি সন্নিবেশ করান: আপনি এই ফর্মটি কোনও <places>...</places>এক্সএমএল উপাদানযুক্ত একটি প্রতিনিধিত্ব করতে কল্পনা করতে পারেন ব্যবহারকারীদের যে জায়গাগুলি পছন্দ করে তাদের তালিকার তালিকায় <place>...</place>প্রতিটি <name>...</name>উপাদান যেমন একটি উপাদান, একটি <type>...</type>উপাদান এবং তারপরে একটি তালিকা রয়েছে তার তালিকা করে<activity>...</activity> এমন কোনও স্থানে আপনি যে ক্রিয়াকলাপ সম্পাদন করতে পারবেন তার প্রতিনিধিত্ব করার উপাদানগুলির । সুতরাং আপনার এক্সএমএল কাঠামোটি এরকম হবে:

<places>

    <place>

        <name>Home</name>
        <type>dwelling</type>

        <activity>sleep</activity>
        <activity>eat</activity>
        <activity>watch TV</activity>

    </place>

    <place>...</place>

    <place>...</place>

</places>

এটি থেকে যদি কোনও JSON অবজেক্ট পাওয়া যায় যা এই সঠিক কাঠামোর প্রতিনিধিত্ব করে তবে আপনি যে কোনওটি করতে সক্ষম হবেন:

• এই বস্তুটি যেমন কোনও কাউচডিবি- সদৃশ ডাটাবেসে রয়েছে তেমন সংরক্ষণ করুন
• এটি আপনার $ _POST [] সার্ভার পাশ থেকে পড়ুন এবং সঠিকভাবে নেস্টেড অ্যারে পুনরুদ্ধার করুন যারপরে আপনি শব্দার্থিকভাবে ম্যানিপুলেট করতে পারবেন
• এটিকে একটি সুগঠিত এক্সএমএল ফাইলে রূপান্তর করতে কিছু সার্ভার-সাইড স্ক্রিপ্ট ব্যবহার করুন (এমনকি যদি আপনি এর সঠিক কাঠামোটি প্রাক-প্রাইরি নাও জানেন)
• এটি কোনও নোড.জেএস- সদৃশ সার্ভার স্ক্রিপ্টে যেমন আছে তেমনই ব্যবহার করুন

ঠিক আছে, সুতরাং এখন আমাদের ভাবতে হবে যে কোনও ফর্ম কীভাবে একটি এক্সএমএল ফাইল উপস্থাপন করতে পারে।

অবশ্যই <form>ট্যাগটি হ'ল rootতবে তারপরে আমাদের কাছে সেই <place>উপাদানটি রয়েছে যা একটি ধারক এবং নিজেই কোনও ডেটা উপাদান নয়, তাই আমরা এর জন্য একটি ইনপুট ট্যাগ ব্যবহার করতে পারি না।

<fieldset>ট্যাগটি হাতে আসে এখানে ! আমরা <fieldset>আমাদের ফর্ম / এক্সএমএল উপস্থাপনায় সমস্ত ধারক উপাদান উপস্থাপন করতে এবং এর ফলে ফলাফল পেতে ট্যাগ ব্যবহার করব :

<form name="places">

    <fieldset name="place">

        <input type="text" name="name"/>
        <select name="type">
            <option value="dwelling">Dwelling</option>
            <option value="restoration">Restoration</option>
            <option value="sport">Sport</option>
            <option value="administrative">Administrative</option>
        </select>

        <input type="text" name="activity"/>
        <input type="text" name="activity"/>
        <input type="text" name="activity"/>

    </fieldset>

</form>

আপনি যেমন এই ফর্মটিতে দেখতে পাচ্ছেন, আমরা অনন্য নামের বিধিগুলি ভঙ্গ করছি, তবে এটি ঠিক আছে কারণ তারা উপাদানগুলির একটি অ্যারেতে রূপান্তরিত হবে সুতরাং এগুলি কেবল অ্যারের অভ্যন্তরে তাদের সূচী দ্বারা রেফারেন্স করা হবে।

এই মুহুর্তে আপনি দেখতে পাবেন যে কীভাবে name="array[]"ফর্মের মতো কোনও নাম নেই এবং সবকিছু সুন্দর, সরল এবং শব্দার্থক।

এখন আমরা এই ফর্মটি একটি JSON অবজেক্টে রূপান্তরিত করতে চাই যা দেখতে এরকম হবে:

{'places':{

    'place':[

        {

            'name': 'Home',
            'type': 'dwelling',

            'activity':[

                 'sleep',
                 'eat',
                 'watch TV'

            ]

        },

        {...},

        {...}

    ]

}}

এটি করার জন্য আমি এই jQuery প্লাগইনটি এখানে তৈরি করেছি যা এই কোড রিভিউ থ্রেডটিতে কেউ অনুকূলিত করতে সহায়তা করেছে এবং এর মতো দেখায়:

$.fn.toJSO = function () {
    var obj = {},
        $kids = $(this).children('[name]');
    if (!$kids.length) {
        return $(this).val();
    }
    $kids.each(function () {
        var $el = $(this),
            name = $el.attr('name');
        if ($el.siblings("[name=" + name + "]").length) {
            if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
                obj[name] = obj[name] || [];
                obj[name].push($el.toJSO());
            }
        } else {
            obj[name] = $el.toJSO();
        }
    });
    return obj;
};

আরও ব্যাখ্যা করার জন্য আমি এটি একটি ব্লগ পোস্টও করেছি ।

এটি কোনও ফর্মের সমস্ত কিছুকে JSON (এমনকি রেডিও এবং চেক বাক্সে) রূপান্তর করে এবং আপনার যা করতে বাকি থাকবে তা কল

$.post('script.php',('form').toJSO(), ...);

আমি জানি যে ফর্মগুলি JSON অবজেক্টে রূপান্তরিত করার প্রচুর উপায় রয়েছে এবং বেশিরভাগ ক্ষেত্রেই এটি নিশ্চিত .serialize()এবং .serializeArray()দুর্দান্ত কাজ করে এবং বেশিরভাগ ক্ষেত্রেই এটি ব্যবহারের উদ্দেশ্যে থাকে, তবে আমি মনে করি অর্থপূর্ণ নাম সহ এক্সএমএল কাঠামো হিসাবে একটি ফর্ম লেখার এবং এটি একটি রূপান্তর করার এই পুরো ধারণাটি সুগঠিত জেএসওএন অবজেক্টটি চেষ্টা করার মতো, এছাড়াও আপনি যদি চিন্তিত না হয়ে একই নাম ইনপুট ট্যাগ যুক্ত করতে পারেন তবে আপনার যদি গতিশীলভাবে উত্পন্ন ফর্ম ডেটা পুনরুদ্ধার করতে হয় তবে এটি দরকারী is

আমি আশা করি এটা কারো সাহায্যে লাগবে!

Comments

আপনি কি করতে চেষ্টা করছেন?

— অনেহিরন

Answer 26

উত্পাদনে এটি ব্যবহার করতে আমি নিজেই একটি বহুমাত্রিক জাভাস্ক্রিপ্ট অবজেক্টে একটি ফর্ম কোড করেছিলাম। ফলাফলটি https://github.com/serbanghita/formToObject.js ।

Comments

আমি খুব নির্দিষ্ট প্রয়োগের জন্য এর একটি প্রকরণ ব্যবহার করেছি, অনেক ধন্যবাদ!

— ক্রিস বেকার

এটি দরকারী যে আমাকে জানাতে ধন্যবাদ। আমার রোল করার জন্য কিছু আগত বৈশিষ্ট্য রয়েছে এবং এটি আমাকে অনুপ্রাণিত করে।

— banেরবান গিয়

Answer 27

আর একটি উত্তর

document.addEventListener("DOMContentLoaded", function() {
  setInterval(function() {
    var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]');
    var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0];
    
    console.log(json)
    document.querySelector('#asJSON').value = JSON.stringify(json);
  }, 1000);
})

<form name="userprofile" id="form">
  <p>Name <input type="text" name="firstname" value="John"/></p>
  <p>Family name <input name="lastname" value="Smith"/></p>
  <p>Work <input name="employment[name]" value="inc, Inc."/></p>
  <p>Works since <input name="employment[since]" value="2017" /></p>
  <p>Photo <input type="file" /></p>
  <p>Send <input type="submit" /></p>
</form>

JSON: <textarea id="asJSON"></textarea>

ফর্মডেটা: https://developer.mozilla.org/en-US/docs/Web/API/FormData

Answer 28

[আপডেট ২০২০]

ভ্যানিলা জেএসে একটি সাধারণ অনেলিয়ার সহ:

Object.fromEntries(new FormData(form))

Answer 29

আমি সামুয়েল সংস্করণ পছন্দ করি তবে আমি বিশ্বাস করি এটির একটি ছোট ত্রুটি রয়েছে। সাধারণত JSON হিসাবে পাঠানো হয়

{ "CoreSKU": "PCGUYJS", "name_de": "যাই হোক না কেন", ...

হিসাবে না

[{ "CoreSKU": "PCGUYJS"}, { "name_de": "যাই হোক না কেন"}, ...

আইএমও ফাংশনটি পড়া উচিত:

App.toJson = function( selector ) {
    var o = {};
    $.map( $( selector ), function( n,i )
    {
        o[n.name] = $(n).val();
    });     
    return o;
}

এবং ডেটা অ্যারেতে এটি মোড়ানো (সাধারণত হিসাবে প্রত্যাশিত, খুব) এবং অবশেষে এস্ট্রিং অ্যাপ্লিকেশন হিসাবে প্রেরণ করুন ring স্ট্রিংফাই ({ডেটা: অ্যাপ.টোজসন ('# ক্রপফর্ম: ইনপুট')})

হরিণ সংস্করণের জন্য প্রশ্নটি 3593046 , স্ট্রিংফাই চেহারাটির জন্য, প্রতিটি ইভেন্ট-আচ্ছাদিত সংস্করণটির জন্য json2.js এ । এটি সব কভার করা উচিত :)

Comments

আপনাকে ধন্যবাদ .. এটি তোলে (যেমন আপনি উল্লেখ করেছেন) ছোট কিন্তু খুব গুরুত্বপূর্ণ পার্থক্য।

— আদর্শ

Answer 30

দ্রুত, আধুনিক সমাধানের জন্য, JSONify jQuery প্লাগইন ব্যবহার করুন । নীচের উদাহরণটি গিথহাব README থেকে ভারব্যাটিম নেওয়া হয়েছে। প্লাগইনটির লেখক কুশল পান্ড্যের সমস্ত কৃতিত্ব।

প্রদত্ত:

<form id="myform">
    <label>Name:</label>
    <input type="text" name="name"/>
    <label>Email</label>
    <input type="text" name="email"/>
    <label>Password</label>
    <input type="password" name="password"/>
</form>

চলমান:

$('#myform').jsonify();

উত্পাদন:

{"name":"Joe User","email":"[e-mail]","password":"mypass"}

আপনি যদি এই JSON অবজেক্টের সাথে jQuery পোস্ট করতে চান:

$('#mybutton').click(function() {
    $.post('/api/user', JSON.stringify($('#myform').jsonify()));
}