আমি কীভাবে জাভাস্ক্রিপ্ট / jQuery দিয়ে ফর্ম ডেটা পেতে পারি?

Question

কোনও ফর্মের ডেটা পাওয়ার কোনও সহজ, এক-লাইন উপায় কি এটি যদি ক্লাসিক এইচটিএমএল-কেবলমাত্র জমা দেওয়া হয় তবে তা হবে?

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

<form>
    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />
    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
</form>

আউটপুট:

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

এর মতো কিছু খুব সহজ, কারণ এটিতে (সঠিকভাবে) টেক্সেরিয়াস, নির্বাচন, রেডিও বোতাম এবং চেকবক্সগুলি অন্তর্ভুক্ত নয়:

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

Comments

অপর এক প্রশ্নের এই অনুরূপ: stackoverflow.com/questions/169506/...

— মার্সেলো Rodovalho

Answer 1

$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

ডেমো

Comments

বন্ধ, তবে সম্ভবত এমন কিছু যা একক স্ট্রিংয়ের পরিবর্তে কী-মান জোড়গুলির সাথে একটি অ্যারের ফেরত দেয়?

— বার্ট ভ্যান হিউকেলোম

এনভিএম, এটি সিরিয়ালাইজ () ফাংশনের জন্য মন্তব্যে খুঁজে পেয়েছে। একে সিরিয়ালাইজআরে বলা হয়। এটি অ্যারের একটি অ্যারে প্রদান করে (যাতে একটি "নাম" এবং "মান" এন্ট্রি রয়েছে) তবে এটি রূপান্তর করার পক্ষে যথেষ্ট সহজ হওয়া উচিত।

— বার্ট ভ্যান হিউকেলোম

এবং আন্ডারস্কোর লাইব্রেরি ব্যবহার করে রূপান্তর করা যেতে পারে:_.object($("#myform").serializeArray().map(function(v) {return [v.name, v.value];} ))

— এমএইচডি সাইরওয়ান

@ বার্টওয়ান হিউকেলোম আমি জানি এটি 4 বছর পরে, তবে .সরিয়ালাইজ অ্যারে () একটি অ্যারে ফিরিয়ে দেবে।

— টিজে ওয়েলথএজাইন এপিআই প্রচারক

নিশ্চিত হয়ে নিন যে প্রতিটি ইনপুট ট্যাগে নামের বৈশিষ্ট্য রয়েছে, অন্যথায় এটি কোনও কিছুই ফেরত না।

— ইউজিন কুলাবোভভ 23'15

Answer 2

ব্যবহার করুন $('form').serializeArray(), যা একটি অ্যারে প্রদান করে :

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

অন্য বিকল্পটি $('form').serialize(), যা একটি স্ট্রিং প্রদান করে :

"foo=1&bar=xxx&this=hi"

কটাক্ষপাত এই jsfiddle ডেমো

Comments

serializeArrayযদি এটি কী-মূল্যের

— জোড়গুলির

আমি একমত যে একটি বস্তু আদর্শ হতে হবে। তবে, একটি সমস্যা রয়েছে - একটি কীতে একাধিক মান থাকতে পারে। আপনি কি একটি কী- "মানের অ্যারে" অবজেক্ট, বা কী- "প্রথম মান" বা অন্য কিছু ফিরিয়ে দেবেন? আমি মনে করি jQuery ছেলেরা উপরের কোনটিই বেছে

— পল

একাধিক মান (যেমন উপরে উল্লিখিত @ পল) এর সাথে সমস্যা সম্পর্কে সচেতন হোন, চেকবক্স এবং একাধিক ইনপুট name="multiple[]"কাজ করে না। পোষ্ট পদ্ধতির সমাধানটি একই, কেবল $ ('ফর্ম') ব্যবহার করুন serial সিরিয়ালাইজ ()। এছাড়াও পোষ্ট পদ্ধতিতে 2000 অক্ষরের সীমা থাকে না কারণ জিইটি বেশিরভাগ ব্রাউজারগুলিতে করে, তাই এটি একটি দুর্দান্ত বড় ডেটার জন্যও ব্যবহার করা যেতে পারে।

— আর্ট্রু

দয়া করে এও সাবধান হন যে কোনও ফর্ম ইনপুট থেকে কোনও মান রেকর্ড করতে, ইনপুটটির অবশ্যই একটি nameবৈশিষ্ট্য থাকতে হবে।

— ক্রিস - জুন

@ গেটফ্রি কেন শুধু jQuery মানচিত্র ফাংশন ব্যবহার করবেন না? ফাংশন getFormData (ফর্ম) {var RawJson = form.serializeArray (); var মডেল = {}; ma .map (RawJson, ফাংশন (n, i) {মডেল [n ['নাম']] = n ['মান'];}); রিটার্ন মডেল; }

— টম ম্যাকডোনফ

Answer 3

2014 এর জন্য আপডেট হওয়া উত্তর: এইচটিএমএল 5 ফর্মডেটা এটি করে

var formData = new FormData(document.querySelector('form'))

তারপরে আপনি ফর্মডাটা ঠিক ঠিক যেমন পোস্ট করতে পারেন - এতে ফর্মটিতে ব্যবহৃত সমস্ত নাম এবং মান রয়েছে।

Comments

প্লাস যেমন FormData ভাল এবং দরকারী, কিন্তু মূল্য লক্ষ করেন, যদি আপনি ডাটা FormData ভিতরে এটা বেশ এত সহজ নয় পড়তে চাই (দেখুন এক stackoverflow.com/questions/7752188/... )

— StackExchange কি দ্য হেক

মাথায় রাখুন ফর্ম্যাটা XMLHttpRequest উন্নত বৈশিষ্ট্যগুলির অংশ (পূর্বে XMLHttpRequest স্তর 2 হিসাবে পরিচিত) তাই আপনাকে অবশ্যই ইন্টারনেট এক্সপ্লোরার <10 ক্যানিউজ.com

— পিয়ের-লুক

@ Yochannah, তাই না। অবশ্যই, কোনও সাধারণ অবজেক্টের মতো ডেটা অ্যাক্সেস এবং সম্পাদনা করতে পারে না, তবে ডেটা পাওয়া এখনও তুচ্ছ। পরীক্ষা করে দেখুন entries()পদ্ধতি [MDN পৃষ্ঠা ]।

— ওয়েব এবং প্রবাহ

@ ওয়েব এবং প্রবাহকে এটি নির্দেশ করার জন্য ধন্যবাদ! আমি এটি পছন্দ করি যখন ব্রাউজারগুলি নতুন এবং দরকারী বৈশিষ্ট্যগুলি যুক্ত করে :) বার, সেগুলি পরিবর্তিত হয়।

— স্ট্যাক এক্সচেঞ্জ হোয়াট দ্য হেক

আমি আমার ফ্লাস্ক-পাইথন স্ক্রিপ্টে কোনও বস্তু প্রেরণের জন্য ফর্মডিটা ব্যবহার করার চেষ্টা করছি, তবে মনে হচ্ছে এমন কোনও সাধারণ অনুরোধ অবজেক্ট হিসাবে আমি আনপ্যাক করতে পারব না। সার্ভারের পাশে এটি হ্যান্ডেল করার জন্য কোনও বিশেষ পদক্ষেপের ব্যাখ্যাটির দিকে কি কেউ নির্দেশ করতে পারে? এটি আমার কাছে খালি মনে হচ্ছে।

— মনীষা

Answer 4

উপর ভিত্তি করে jQuery.serializeArray, কী-মান জোড়া প্রদান করে।

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

Comments

এখানে মূল-মূল জুটি, ছেলেরা, প্রত্যেকে এখানে আসুন! এটা সোনার !!! ধন্যবাদ! যদি আমি "খুচরা বিক্রেতা" নামের একটি উপাদানের মান চাই, আমি এই কনসোল.লগ ($ ('# ফর্ম') করি serial মান; রিটার্ন আপত্তি;}, {}) ['খুচরা বিক্রেতা']);

— ইয়েভেগেনি আফানসিয়েভ

আমি গতকাল এই উত্তরের ভিত্তিতে একটি জিকুয়ারি পদ্ধতি তৈরি করেছি তবে বহুবিশেষ এবং ইনপুট অ্যারে (নাম 'উদাহরণ []' সহ) দিয়ে কাজ করছি। আপনি নীচে আমার উত্তর এটি খুঁজে পেতে পারেন। যাইহোক, ভাল যোগাযোগ নিউরন্ট, ধন্যবাদ! :)

— manuman94

এই উত্তরটি আমার মধ্যে সবচেয়ে বেশি উপযুক্ত!

— ভিপেট্রোভিক

এই IMHO সেরা উত্তর!

— রাহুল

Answer 5

document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get('foo'), for example.
  // Don't forget e.preventDefault() if you want to stop normal form .submission
});

এটি একটি নিটপিকি উত্তর, তবে কেন এটি আরও ভাল সমাধান তা আমাকে ব্যাখ্যা করুন:

• আমরা বাটন প্রেসের পরিবর্তে ফর্ম জমাটি সঠিকভাবে পরিচালনা করছি। কিছু লোক মাঠে প্রবেশ ঠেকাতে পছন্দ করে। কিছু লোক বিকল্প ইনপুট ডিভাইস যেমন স্পিচ ইনপুট বা অন্যান্য অ্যাক্সেসিবিলিটি ডিভাইসগুলি ব্যবহার করে। ফর্ম জমাটি পরিচালনা করুন এবং আপনি সঠিকভাবে এটি সবার জন্য সমাধান করুন।

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

• ফর্মডাটা ইন্টারফেস মোটামুটি নতুন, তবে ব্রাউজারগুলি দ্বারা এটি সমর্থিত। ফর্মটিতে কী রয়েছে তার আসল মানগুলি অর্জন করার জন্য এটি ডেটা সংগ্রহ তৈরির দুর্দান্ত উপায়। এটি ছাড়াই, আপনাকে সমস্ত উপাদান (যেমন সহ form.elements) লুপ করতে হবে এবং যা চেক করা হয়েছে, কী নয়, মানগুলি কী হয় ইত্যাদি ইত্যাদি নির্ধারণ করতে হবে আপনার পুরানো ব্রাউজার সমর্থন প্রয়োজন হলে সম্পূর্ণভাবে সম্ভব, তবে ফর্মডেটা ইন্টারফেস সহজ।

• আমি এখানে ES6 ব্যবহার করছি ... কোনও উপায়ে প্রয়োজন হয় না, সুতরাং আপনার যদি পুরানো ব্রাউজার সমর্থন প্রয়োজন হয় তবে এটি ES5 সামঞ্জস্যপূর্ণ হিসাবে ফিরিয়ে আনুন।

Comments

ফাই, ফর্মডাটা অবজেক্টগুলি তাদের মানগুলি প্রকাশ করে না। তা থেকে একটি প্লেইন বস্তুর পেতে, দেখতে stackoverflow.com/questions/41431322/...

— phil294

@ ব্লাউহিরন ননসেন্স, অবশ্যই তারা মানগুলি প্রকাশ করে। আমার উত্তরের কোডটি কাজ করে। তোমার এটা চেষ্স্টা করা উচিত. এখানে, আমি আপনার জন্য একটি ঝাঁকনি করেছি: jsfiddle.net/zv9s1xq5 আপনি যদি পুনরুক্তি চান, ব্যবহার করুন formData.entries()।

— ব্র্যাড

আমি জানি এটি কাজ করে, তবে বৈশিষ্ট্যগুলি কী দ্বারা অ্যাক্সেসযোগ্য নয়। উদাহরণস্বরূপ, formData.foo অপরিজ্ঞাত। আপনার উত্তরে যেমন দেখা গেছে, .get() তার জন্য কল করা দরকার যা আমি মনে করি অসুবিধাজনক। হয়তো "এক্সপোজ করে না" ভুল পথে এসেছিল। সুতরাং, { foo: 'bar' }কোনও submitইভেন্ট থেকে কিছু তৈরি করার জন্য আপনাকে এগুলি নিজে থেকেই পুনরাবৃত্তি করতে হবে। অতএব . To get a plain object from it, see [link]।

— phil294

আপনি এটি সম্পর্কে ভুল বলেছেন এক্সএমএলএইচটিপিআরকোয়েস্ট সরাসরি ফর্মডাটা সমর্থন করে। xhr.send(formData);

— ব্র্যাড

@ ব্লাউহিরন JSON.stringify([...formData]) বা আপনি যদি নিজের কীগুলি / মান পৃথক করতে চান ... [...formData].reduce((prev, cur) => { prev[cur[0]] = cur[1]; return prev;}, {})

— ব্র্যাড

Answer 6

অ্যারে বিন্যাসে ডেটা পেতে .serializeArray () ব্যবহার করুন এবং তারপরে এটিকে কোনও বস্তুতে রূপান্তর করুন:

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

Comments

যদি আমার মতো কিছু থাকে তবে এটি আমার চেকবক্সগুলিকে ওভাররাইট করে <input type="checkbox" name="someList" value="one" /> <input type="checkbox" name="someList" value="two" />। যদি উভয়ই চেক করা থাকে তবে অবজেক্টটিতে কেবল দ্বিতীয় চেকবক্সের মান থাকে।

— dmathisen

এই ঘটনা যেখানে someListহওয়া উচিত নয় type="radio"?

— dylanjameswagner

upvote কারণ গৃহীত উত্তর কী হিসাবে কোনও বস্তুটি ফেরত দেয় না:name:value

— ম্যাট-দ্য-মার্কসবাদী

Answer 7

এখানে একটি খুব সহজ এবং সংক্ষিপ্ত দ্রাবক যা এমনকি জ্যাকুয়ের প্রয়োজন হয় না।

var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;

Comments

এটি রেডিও বোতামগুলির সাথে কাজ করে না: সর্বশেষ বিকল্পটি সর্বদা সঞ্চিত থাকে postData।

— কাইল ফ্যালকনার

আমাদের একটি জিকোরি উত্তর না দেওয়ার জন্য আপনাকে ধন্যবাদ।

— গ্লেন পিয়ার্স

Answer 8

এটি 2019 এবং এটি করার আরও ভাল উপায় রয়েছে:

const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());

অথবা আপনি যদি এর পরিবর্তে কোনও সরল অবজেক্ট চান

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

যদিও নোট করুন যে এটি ডুপ্লিকেট কীগুলির সাথে কাজ করবে না আপনি একই নামে বহু-নির্বাচন এবং সদৃশ চেকবক্সগুলি থেকে পেয়েছেন।

Comments

পুরোটাই। যদিও, আমি ইনপুটগুলির তালিকার জন্য একটি অ্যারে পাইনি যে সমস্তটির একই নাম রয়েছে যার অর্থ আমার ব্যবহার করতে হয়েছিল document.getElementsByClassNameএবং লুপের জন্য তবে আরে, jQuery ইত্যাদির চেয়ে আরও ভাল

— alphanumeric0101

এই উত্তরটি আমার প্রিয়। তবে এটি ন্যায়বিচারের document.querySelectorপরিবর্তে পড়া উচিত querySelector।

— adabru

দ্রষ্টব্য "ফর্মডাটা কেবল ইনপুট ক্ষেত্রগুলি ব্যবহার করবে যা নামটি বৈশিষ্ট্য ব্যবহার করে" - এমডিএন

— বাইনারিফ্যান্ট

Answer 9

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

Answer 10

আমি এটি ব্যবহার:

jQuery প্লাগইন

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

এইচটিএমএল ফর্ম

<form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

ডেটা পান

var myData = $("#myForm").getFormData();

Comments

মনে রাখবেন যে একই নামের একাধিক ফর্ম ইনপুট এন্ট্রি উপস্থিত ক্ষেত্রে এই প্লাগইনটি কাজ করে না। সর্বশেষ Array

— মিলি

কেবল একটি নোট যে এক বছর পরে আমি এখন মনে করি এটি একটি ভয়ঙ্কর উত্তর এবং কারও এটি ব্যবহার করা উচিত নয়। পূর্ববর্তী মন্তব্য যেমন বলেছে, রেডিও বোতামগুলির মতো জিনিসগুলি কাজ করবে না। উপরে আরও ভাল উত্তর আছে, পরিবর্তে এর মধ্যে একটি ব্যবহার করুন।

— ডাস্টিন পোয়েসান্ট

Answer 11

$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

এগুলি ছাড়াও, আপনি সিরিয়ালাইজ () দেখতে চাইতে পারেন ;

Answer 12

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

function setOrPush(target, val) {
    var result = val;
    if (target) {
        result = [target];
        result.push(val);
    }
    return result;
}

function getFormResults(formElement) {
    var formElements = formElement.elements;
    var formParams = {};
    var i = 0;
    var elem = null;
    for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
            case 'submit':
                break;
            case 'radio':
                if (elem.checked) {
                    formParams[elem.name] = elem.value;
                }
                break;
            case 'checkbox':
                if (elem.checked) {
                    formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
                }
                break;
            default:
                formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
    }
    return formParams;
}

কাজের উদাহরণ:

    function setOrPush(target, val) {
      var result = val;
      if (target) {
        result = [target];
        result.push(val);
      }
      return result;
    }

    function getFormResults(formElement) {
      var formElements = formElement.elements;
      var formParams = {};
      var i = 0;
      var elem = null;
      for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
          case 'submit':
            break;
          case 'radio':
            if (elem.checked) {
              formParams[elem.name] = elem.value;
            }
            break;
          case 'checkbox':
            if (elem.checked) {
              formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
            }
            break;
          default:
            formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
      }
      return formParams;
    }

    //
    // Boilerplate for running the snippet/form
    //

    function ok() {
      var params = getFormResults(document.getElementById('main_form'));
      document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' ');
    }

    (function() {
      var main_form = document.getElementById('main_form');
      main_form.addEventListener('submit', function(event) {
        event.preventDefault();
        ok();
      }, false);
    })();

<form id="main_form">
  <div id="questions_wrapper">
    <p>what is a?</p>
    <div>
      <input type="radio" required="" name="q_0" value="a" id="a_0">
      <label for="a_0">a</label>
      <input type="radio" required="" name="q_0" value="b" id="a_1">
      <label for="a_1">b</label>
      <input type="radio" required="" name="q_0" value="c" id="a_2">
      <label for="a_2">c</label>
      <input type="radio" required="" name="q_0" value="d" id="a_3">
      <label for="a_3">d</label>
    </div>
    <div class="question range">
      <label for="a_13">A?</label>
      <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl">
      <datalist id="q_3_dl">
        <option value="0"></option>
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option value="7"></option>
        <option value="8"></option>
        <option value="9"></option>
        <option value="10"></option>
      </datalist>
    </div>
    <p>A and/or B?</p>
    <div>
      <input type="checkbox" name="q_4" value="A" id="a_14">
      <label for="a_14">A</label>
      <input type="checkbox" name="q_4" value="B" id="a_15">
      <label for="a_15">B</label>
    </div>
  </div>
  <button id="btn" type="submit">OK</button>
</form>
<div id="results_wrapper"></div>

সম্পাদনা:

আপনি যদি আরও সম্পূর্ণ বাস্তবায়ন সন্ধান করছেন, তবে আমি যে প্রকল্পটি তৈরি করেছি তার এই বিভাগটি একবার দেখুন । আমি এই প্রশ্নের সাথে শেষ পর্যন্ত সম্পূর্ণ সমাধানটি দিয়ে আপডেট করব, তবে সম্ভবত এটি কারও পক্ষে সহায়ক হবে।

Comments

চমৎকার সমাধান :) আমি একটি বাগ খুঁজে পেয়েছি যদিও সেটঅরপশ ফাংশন সহ। লক্ষ্যটি ইতিমধ্যে একটি অ্যারে রয়েছে কিনা তা দেখার জন্য এটি কোনও চেক অন্তর্ভুক্ত করে না, একই নামে একাধিক চেক করা চেকবক্সগুলি ক্ষেত্রে গভীর নেস্টেড অ্যারে তৈরি করে।

— ওয়াউটার ভ্যান বাঁধ

নিবন্ধন করুন আপনি কেন রেডিও এবং চেকবক্সের স্যুইচ কেসগুলিকে মার্জ করেন নি - তারা সঠিকভাবে কাজ করবে (আমার ধারণা))

— ইথান

@ ইথান এর কারণ এটি একটি চেকবাক্সের একাধিক মান নির্বাচন করা যেতে পারে এবং একটি রেডিওতে কেবল কখনও একটি মানই নির্বাচন করা যেতে পারে, তাই আমি যেভাবে মানটি সংরক্ষণ করি তা সংরক্ষণ করতে পারি।

— কাইল ফ্যালকোনার

@ কাইলফালকোনার হ্যাঁ, আমি এটি বুঝতে পারি। 'চেকবাক্স' পরিচালনা করার কোডটি 'রেডিও'র জন্য' সেটঅরপশ 'রুটিনের ভিত্তিতে একক সম্ভাব্য পছন্দকেও যত্ন করে takes

— ইথান

@ ইহ ওহ আমি আপনাকে কী বলছি তা আমি জানি saying এটি যে কোনও উপায়ে করা যেতে পারে, তবে আমি মনে করি যে আমি এটি কেবল এটির কারণেই করেছি কারণ আমি কেবল একটি মান চাইছিলাম, মানগুলির একটি অ্যারে না।

— কাইল ফ্যালকোনার

Answer 13

আপনি যদি jQuery ব্যবহার করে থাকেন তবে এখানে একটি সামান্য ফাংশন যা আপনি যা খুঁজছেন তা করবে।

প্রথমে আপনার ফর্মটিতে একটি আইডি যুক্ত করুন (এটি পৃষ্ঠায় একমাত্র ফর্ম না হলে আপনি ডম ক্যোয়ারী হিসাবে কেবল 'ফর্ম' ব্যবহার করতে পারেন)

<form id="some-form">
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
    var out = {};
    var s_data = $(dom_query).serializeArray();
    //transform into simple data/value object
    for(var i = 0; i<s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData('#some-form'));
</script>

আউটপুট দেখতে হবে:

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}

Answer 14

আপনি ফর্মডাটা অবজেক্টগুলিও ব্যবহার করতে পারেন ; ফর্মডাটা অবজেক্ট আপনাকে এক্সএমএলএইচটিপিআরকোয়েস্ট ব্যবহার করে প্রেরণ করতে কী / মান জোড়ার একটি সেট সংকলন করতে দেয়। এটি প্রাথমিকভাবে ফর্ম ডেটা প্রেরণে ব্যবহারের উদ্দেশ্যে, তবে কীড ডেটা প্রেরণের জন্য ফর্মগুলি থেকে স্বাধীনভাবে ব্যবহার করা যেতে পারে।

        var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);

Comments

ধন্যবাদ, তবে আপনার আইডি না থাকলে কী হবে? আপনার যদি JQuery অবজেক্ট হিসাবে কোনও ফর্ম থাকে? var form = $ (this)। ক্লোজস্ট ('ফর্ম'); ? Var formElement = document.getElementById (ফর্ম [0]) হওয়া উচিত; পরিবর্তে আপনার প্রথম লাইনের কাজ? দুর্ভাগ্যক্রমে, এটি কাজ করছে না। তুমি কি জানো কেন?

— ইয়েজেগেনি আফানসিয়েভ

আসলে FormData সমস্ত ব্রাউজার দ্বারা সমর্থিত নয় :( তাই ভাল একটি ভিন্ন পদ্ধতির ব্যবহার

— numediaweb

ধন্যবাদ। আমি সর্বশেষ ক্রোম ব্যবহার করেছি এবং এখনও এটি কাজ করে না। সুতরাং আমি উপরে থেকে # নিউর্ট উত্তর নিয়ে গেলাম।

— ইয়েভেগেনি আফানসিয়েভ

Answer 15

এটি জাভাস্ক্রিপ্ট অবজেক্ট "রেস" এ সমস্ত ফর্ম ক্ষেত্র যুক্ত করবে:

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})

Comments

সম্ভবত কারণ এটি একই একই উত্তরটি ইতিমধ্যে 2010 সালে পোস্ট করা হয়েছিল

— নাথনভদা

আমি এটা জানতাম না। এত সংক্ষিপ্ত উত্তরের জন্য এটি অবাক হওয়ার মতো কিছু নয়। এবং তবুও, রেফারেন্স কোথায়?

— গ্যামিলিলা

সিরিয়াসলি? আপনি আমার মন্তব্যটি রেফারেন্স ছাড়া বিশ্বাস করেন না এবং আপনি উত্তরগুলির তালিকাটি দেখতে একইরকম দেখতে পারেন কিনা? stackoverflow.com/a/2276469/216513

— nathanvda

আমি ভেবেছিলাম যে আপনি অন্য প্রশ্নের একটি উত্তর বোঝাতে চাইছেন। আমি এখন বিশদ এবং আমার কারণগুলি মনে করি না; সম্ভবত কারণ এটি ঠিক একই নয়

— গ্যামিলিলা

যে কেউ এটির জন্য ইনপুটটির জন্য কাজ করতে চায় তার উপযুক্ত উত্তর, একাধিক এবং টেক্সারিয়া নির্বাচন করুন। কারণ, সিরিয়ালাইজ ব্যবহার করে আপনি নির্বাচিত ট্যাগে নির্বাচিত সমস্ত আইটেম পাবেন না। তবে .val () ব্যবহার করে আপনি অ্যারে হিসাবে যা চান ঠিক তা পাবেন। সরল, সরাসরি এগিয়ে উত্তর।

— সাইলেশ কোথা

Answer 16

প্রয়োজনীয় বস্তুটি ফেরত দেওয়ার জন্য আমি উত্তরটি অন্তর্ভুক্ত করেছি।

function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};

$.map(rawJson, function (n, i) {
    model[n['name']] = n['value'];
});

return model;
}

Comments

এটি আরেগুলিকে কোনওভাবেই পরিচালনা করবে না; foo[bar][] = 'qux'সিরিয়ালাইজ করা উচিত { foo: { bar: [ 'qux' ] } }।

— অ্যামফেটাম্যাচাইন

Answer 17

নিউরন্টের প্রতিক্রিয়ার ভিত্তিতে আমি একটি সাধারণ জিকুয়ের পদ্ধতি তৈরি করেছি যা কী-মান জোড়ায় ফর্ম ডেটা পায় তবে এটি মাল্টি-সিলেক্ট এবং নামের সাথে অ্যারের ইনপুটগুলির জন্য কাজ করে = 'উদাহরণ []'।

এটি এটি ব্যবহার করা হয়:

var form_data = $("#form").getFormObject();

আপনি এর সংজ্ঞা এবং এটি কীভাবে কাজ করে তার নীচে একটি উদাহরণ খুঁজে পেতে পারেন।

// Function start
$.fn.getFormObject = function() {
    var object = $(this).serializeArray().reduce(function(obj, item) {
        var name = item.name.replace("[]", "");
        if ( typeof obj[name] !== "undefined" ) {
            if ( !Array.isArray(obj[name]) ) {
                obj[name] = [ obj[name], item.value ];
            } else {
               obj[name].push(item.value);
            }
        } else {
            obj[name] = item.value;
        }
        return obj;
    }, {});
    return object;
}
// Function ends

// This is how it's used
$("#getObject").click( function() {
  var form_data = $("#form").getFormObject();
  console.log(form_data);
});

/* Only to make view better ;) */
#getObject {
  padding: 10px;
  cursor:pointer;
  background:#0098EE;
  color:white;
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id="form">
  <input type="text" name="text" value="Hola amigo" /> 
  
  <input type="text" name="text_array[]" value="Array 1" /> 
  <input type="text" name="text_array[]" value="Array 2" /> 
  <input type="text" name="text_array[]" value="Array 3" /> 
  
  <select name="multiselect" multiple>
    <option name="option1" selected> option 1 </option>
    <option name="option2" selected> option 2 </option>
  </select>
  
  <input type="checkbox" name="checkbox" value="checkbox1" checked/>
  <input type="checkbox" name="checkbox" value="checkbox2" checked/>
  
  <input type="radio" name="radio" value="radio1" checked/>
  <input type="radio" name="radio" value="radio2"/>

</form>

<div id="getObject"> Get object (check the console!) </div>

Answer 18

var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});

Answer 19

function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        if(indexed_array[n['name']] == undefined){
            indexed_array[n['name']] = [n['value']];
        }else{
            indexed_array[n['name']].push(n['value']);
        }
    });

    return indexed_array;
}

Answer 20

আপনি এই ফাংশনটি ফর্ম থেকে কোনও অবজেক্ট বা জেএসওএন ব্যবহার করতে পারেন ।

এটি ব্যবহারের জন্য:

var object = formService.getObjectFormFields("#idform");

 function  getObjectFormFields(formSelector)
        {
            /// <summary>Função que retorna objeto com base nas propriedades name dos elementos do formulário.</summary>
            /// <param name="formSelector" type="String">Seletor do formulário</param>

            var form = $(formSelector);

            var result = {};
            var arrayAuxiliar = [];
            form.find(":input:text").each(function (index, element)
            {
                var name = $(element).attr('name');

                var value = $(element).val();
                result[name] = value;
            });

            form.find(":input[type=hidden]").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });


            form.find(":input:checked").each(function (index, element)
            {
                var name;
                var value;
                if ($(this).attr("type") == "radio")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    result[name] = value;
                }
                else if ($(this).attr("type") == "checkbox")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    if (result[name])
                    {
                        if (Array.isArray(result[name]))
                        {
                            result[name].push(value);
                        } else
                        {
                            var aux = result[name];
                            result[name] = [];
                            result[name].push(aux);
                            result[name].push(value);
                        }

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

            });

            form.find("select option:selected").each(function (index, element)
            {
                var name = $(element).parent().attr('name');
                var value = $(element).val();
                result[name] = value;

            });

            arrayAuxiliar = [];
            form.find("checkbox:checked").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = arrayAuxiliar.push(value);
            });

            form.find("textarea").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });

            return result;
        }

Comments

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

— ওয়াহিউ ক্রিশ্চিয়ানো

তবে এই লিঙ্কটি তার (আমার মনে হয়) সহায়তার জন্য একটি ফাংশন রয়েছে। তবে আমি পরের বার কোডটি রাখছি।

— মার্কোস কোস্টা

Answer 21

এই সমস্যাটি সমাধান করার জন্য আমি একটি গ্রন্থাগার লিখেছিলাম: জেএসএনফর্মস । এটি একটি ফর্ম নেয়, প্রতিটি ইনপুট দিয়ে যায় এবং আপনি সহজেই পড়তে পারেন এমন একটি JSON অবজেক্ট তৈরি করে।

বলুন আপনার নিম্নলিখিত ফর্ম রয়েছে:

<form enctype='application/json'>
  <input name='places[0][city]' value='New York City'>
  <input type='number' name='places[0][population]' value='8175133'>
  <input name='places[1][city]' value='Los Angeles'>
  <input type='number' name='places[1][population]' value='3792621'>
  <input name='places[2][city]' value='Chicago'>
  <input type='number' name='places[2][population]' value='2695598'>
</form>

জেএসএনফর্মের এনকোড পদ্ধতিতে ফর্মটি পাস করা আপনাকে নিম্নলিখিত বিষয়টিকে ফেরত দেয়:

{
  "places": [
    {
      "city": "New York City",
      "population": 8175133
    },
    {
      "city": "Los Angeles",
      "population": 3792621
    },
    {
      "city": "Chicago",
      "population": 2695598
    }
  ]
}

আপনার ফর্মের সাথে এখানে ডেমো রয়েছে।

Comments

ধন্যবাদ এবং সুন্দরভাবে কাজ করে, ধন্যবাদ। কেবল একটি জিনিস, সংক্ষিপ্ত সংস্করণটি একটি মানচিত্রের ফাইলকে কল করে optionচ্ছিক ইমো হওয়া উচিত।

— adi518

Answer 22

$( "form" ).bind( "submit", function(e) {
    e.preventDefault();
    
    console.log(  $(this).serializeObject() );    

    //console.log(  $(this).serialize() );
    //console.log(  $(this).serializeArray() );

});


$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();

    $.each( a, function() {
        if ( o[this.name] !== undefined) 
        {
            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;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<form>

    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />

    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
    </select>

    <input type="submit" value="Submit" />

</form>

Codepen

Answer 23

আপনারা যারা Objectসিরিয়ালাইজড স্ট্রিংয়ের বিপরীতে পছন্দ করেন (যেমনটি ফিরে এসেছে $(form).serialize(), এবং তাতে কিছুটা উন্নতি হয়েছে $(form).serializeArray()), নীচের কোডটি নির্দ্বিধায় ব্যবহার করুন:

var Form = {
    _form: null,
    _validate: function(){
        if(!this._form || this._form.tagName.toLowerCase() !== "form") return false;
        if(!this._form.elements.length) return false;
    }, _loopFields: function(callback){
        var elements = this._form.elements;
        for(var i = 0; i < elements.length; i++){
            var element = form.elements[i];
            if(name !== ""){
                callback(this._valueOfField(element));
            }
        }
    }, _valueOfField: function(element){
        var type = element.type;
        var name = element.name.trim();
        var nodeName = element.nodeName.toLowerCase();
        switch(nodeName){
            case "input":
                if(type === "radio" || type === "checkbox"){
                    if(element.checked){
                        return element.value;
                    }
                }
                return element.value;
                break;
            case "select":
                if(type === "select-multiple"){
                    for(var i = 0; i < element.options.length; i++){
                        if(options[i].selected){
                            return element.value;
                        }
                    }
                }
                return element.value;
                break;
            case "button":
                switch(type){
                    case "reset": 
                    case "submit": 
                    case "button":
                        return element.value;
                        break;
                }
                break;
        } 
    }, serialize: function(form){
        var data = {};
        this._form = form;

        if(this._validate()){
            this._loopFields(function(value){
                if(value !== null) data[name] = value;
            });
        }
        return data;
    }
};

এটি কার্যকর করতে, কেবল ব্যবহার করুন Form.serialize(form)এবং ফাংশনটি এর সাথে Objectএকই রকম ফিরে আসবে :

<!-- { username: "username", password: "password" } !-->
<input type="text" value="username">
<input type="password" value="password">

বোনাস হিসাবে, এর অর্থ হল যে আপনাকে কেবলমাত্র একটি সিরিয়ালাইজ ফাংশনের জন্য jQuery এর পুরো বান্ডিলটি ইনস্টল করতে হবে না ।

Answer 24

আমি একটি ফাংশন লিখেছি যা একাধিক চেকবক্স এবং একাধিক নির্বাচনের যত্ন নেয়। এই ক্ষেত্রে এটি একটি অ্যারে প্রদান করে।

function getFormData(formId) {
    return $('#' + formId).serializeArray().reduce(function (obj, item) {
        var name = item.name,
            value = item.value;

        if (obj.hasOwnProperty(name)) {
            if (typeof obj[name] == "string") {
                obj[name] = [obj[name]];
                obj[name].push(value);
            } else {
                obj[name].push(value);
            }
        } else {
            obj[name] = value;
        }
        return obj;
    }, {});
}

Answer 25

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

<form id="imageUploadForm"   action="" method="post" enctype="multipart/form-data">
<input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" >
<input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name">
<input type="number" name='phoneno'  class="form-control" id="phoneno" placeholder="Phone Number">
<textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea>
<input type="file" name="file" id="file" >
<input type="submit" id="sub" value="Registration">					   
</form>

জমা বাটন পৃষ্ঠাতে আপনার পিএইচপি ফাইলে এজাক্স অনুরোধ প্রেরণ করবে।

$('#imageUploadForm').on('submit',(function(e) 
{
     fname = $('#fname').val();
     lname =  $('#lname').val();
     address =  $('#address').val();
     phoneno =  $('#phoneno').val();
     file =  $('#file').val();
     e.preventDefault();
     var formData = new FormData(this);
     formData.append('file', $('#file')[0]);
     formData.append('fname',$('#fname').val());
     formData.append('lname',$('#lname').val());
     formData.append('phoneno',$('#phoneno').val());
     formData.append('address',$('#address').val());
     $.ajax({
		type:'POST',
                url: "test.php",
                //url: '<?php echo base_url().'edit_profile/edit_profile2';?>',

                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data)
                {
                     alert('Data with file are submitted !');

                }

     });

}))

Comments

এখানে নতুন ফর্মডাটার দরকার কী?

— সাহু ভি কুমার

@ বিশালকুমারসাহু আমি ফাইল আপলোড করছি তাই সেজন্য আমি ফর্মডাটা ব্যবহার করি।

— মহসিন শওকত

Answer 26

$(form).serializeArray().reduce(function (obj, item) {
      if (obj[item.name]) {
           if ($.isArray(obj[item.name])) {
               obj[item.name].push(item.value);
           } else {
                var previousValue = obj[item.name];
                obj[item.name] = [previousValue, item.value];
           }
      } else {
           obj[item.name] = item.value;
      }

     return obj;
}, {});

এটি সমস্যার সমাধান করবে: বহুবিধের সাথে কাজ করতে পারেনি।

Answer 27

আপনি সব পুরোপুরি সঠিক না। আপনি লিখতে পারবেন না:

formObj[input.name] = input.value;

কারণ এইভাবে যদি আপনার একাধিক তালিকা রয়েছে - এর মানগুলি সর্বশেষের সাথে ওভাররাইট করা হবে, যেহেতু এটি "প্যারাম 1": "মান 1", "প্যারাম 1": "মান 2" হিসাবে সঞ্চারিত।

সুতরাং, সঠিক পদ্ধতির হ'ল:

if (formData[input.name] === undefined) {
    formData[input.name] = input.value;
}
else {
    var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
    $.merge(inputFieldArray, [input.value]);
    formData[input.name] = $.merge([], inputFieldArray);
}

Answer 28

এই পদ্ধতিটি করা উচিত। এটি ফর্ম ডেটাটিকে সিরিয়ালাইজ করে এবং তারপরে তাদেরকে কোনও বস্তুতে রূপান্তর করে। চেকবক্সের গ্রুপগুলিরও যত্ন নেয়।

function getFormObj(formId) {
  var formParams = {};
  $('#' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}

Comments

চেকবাক্সগুলির জন্য কাজ করে তবে রেডিও বোতামগুলির জন্য নয় যেখানে নিয়ন্ত্রণগুলি nameবৈশিষ্ট্য ভাগ করে ।

— কাইল ফ্যালকোনার

Answer 29

এখানে একটি ভাল ভ্যানিলা জেএস ফাংশনটি আমি একটি অবজেক্ট হিসাবে ফর্ম ডেটা বের করার জন্য লিখেছি। এটিতে অবজেক্টে সংযোজন সন্নিবেশ করার জন্য এবং ফর্ম ইনপুট ক্ষেত্রগুলি সাফ করার জন্যও বিকল্প রয়েছে।

const extractFormData = ({ form, clear, add }) => {
  return [].slice.call(form.children).filter(node => node.nodeName === 'INPUT')
  .reduce((formData, input) => {
    const value = input.value
    if (clear) { input.value = '' }
    return {
      ...formData,
      [input.name]: value
    }
  }, add)
}

পোস্টের অনুরোধের সাথে এর ব্যবহারের উদাহরণ এখানে দেওয়া হয়েছে:

submitGrudge(e) {
  e.preventDefault()

  const form = e.target
  const add = { id: Date.now(), forgiven: false }
  const grudge = extractFormData({ form, add, clear: true })

  // grudge = {
  //  "name": "Example name",
  //  "offense": "Example string",
  //  "date": "2017-02-16",
  //  "id": 1487877281983,
  //  "forgiven": false
  // }

  fetch('http://localhost:3001/api/grudge', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(grudge)
  })
    .then(response => response.json())
    .then(grudges => this.setState({ grudges }))
    .catch(err => console.log('error: ', err))
}