मैं जावास्क्रिप्ट / 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"
}

ऐसा कुछ बहुत सरल है, क्योंकि यह (सही ढंग से) textareas, चयन, रेडियो बटन और चेकबॉक्स शामिल नहीं करता है:

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

Comments

इसी तरह का एक और सवाल: stackoverflow.com/questions/169506/…

— Marcelo Rodovalho

Answer 1

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

डेमो

Comments

बंद करें, लेकिन शायद एक स्ट्रिंग के बजाय कुंजी-मूल्य जोड़े के साथ एक सरणी देता है?

— बार्ट वैन ह्युकेलोम

Nvm, इसे क्रमबद्ध () फ़ंक्शन के लिए टिप्पणियों में मिला। इसे क्रमबद्धता कहा जाता है। यह एरे की एक सरणी देता है (जिसमें एक प्रविष्टि "नाम" और "मान") होती है, लेकिन इसे बदलना आसान होना चाहिए।

— बार्ट वैन ह्युकेलोम

और अंडरस्कोर लाइब्रेरी का उपयोग करके रूपांतरित किया जा सकता है:_.object($("#myform").serializeArray().map(function(v) {return [v.name, v.value];} ))

— मेधसिरवान

@BartvanHeukelom मुझे पता है कि यह 4 साल बाद है, लेकिन .serializeArray () एक सरणी लौटाएगा।

— टीजे वेल्थएंगाइन एपीआई एवेंजेलिस्ट

सुनिश्चित करें कि हर इनपुट टैग में नाम विशेषता शामिल है, अन्यथा यह कुछ भी वापस नहीं करेगा।

— यूजीन कुलबुहोव

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यह बहुत उपयोगी होगा यदि यह मुख्य-मूल्य वाले जोड़े के साथ एक वस्तु लौटाए

— GetFree

मैं मानता हूं कि एक वस्तु आदर्श होगी। हालांकि, एक समस्या है - एक कुंजी को कई मान रखने की अनुमति है। क्या आप एक कुंजी- "मानों की सरणी" वस्तु, या कुंजी- "पहला मूल्य" या कुछ और लौटाएंगे? मुझे लगता है कि jQuery के लोगों ने उपरोक्त में से कोई नहीं चुना :)

— पॉल

कई मानों के साथ एक समस्या के बारे में पता होना (जैसा कि @Paul ऊपर उल्लेख किया गया है), चेकबॉक्स और कई इनपुट name="multiple[]"काम नहीं करते हैं। POST विधि का समाधान समान है, बस $ ('फ़ॉर्म') का उपयोग करें। serialize ()। इसके अलावा POST विधि में 2000 वर्णों की सीमा नहीं है जैसा कि अधिकांश ब्राउज़र में GET करता है, इसलिए इसका उपयोग बहुत बड़े डेटा के लिए भी किया जा सकता है।

— आर्ट्रू

कृपया यह भी सावधान रहें कि किसी भी फॉर्म इनपुट से मूल्य रिकॉर्ड करने के लिए, इनपुट में एक nameविशेषता होनी चाहिए ।

— क्रिस - जूनियर

@GetFree सिर्फ jQuery के मानचित्र फ़ंक्शन का उपयोग क्यों नहीं करता है? function getFormData (फॉर्म) {var rawJson = form.serializeArray (); var मॉडल = {}; $ .map (rawJson, function (n, i) {मॉडल [n ['नाम']] = n [मूल्य '];}); वापसी मॉडल; }

— टॉम मैकडोनो

Answer 3

2014 के लिए अद्यतित उत्तर: HTML5 फॉर्मडाटा यह करता है

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

फिर आप फॉर्मडाटा को ठीक उसी तरह पोस्ट कर सकते हैं जैसे कि - इसमें फॉर्म में उपयोग किए गए सभी नाम और मूल्य शामिल हैं।

Comments

प्लसडाटा के रूप में एक अच्छा और उपयोगी है, लेकिन ध्यान देने योग्य है कि यदि आप फॉर्मडाटा के अंदर डेटा को पढ़ाना चाहते हैं तो यह इतना आसान नहीं है (देखें stackoverflow.com/questions/7752188/… )

— StackExchange Heck

ध्यान रखें FormData (पहले XMLHttpRequest स्तर 2 के रूप में जाना जाता है) XMLHttpRequest उन्नत सुविधाओं का हिस्सा है ताकि आप एक पर भरोसा करना चाहिए है polyfill इंटरनेट एक्सप्लोरर <10 के लिए caniuse.com/#feat=xhr2

— पियर ल्यूक Gendreau

@yochannah, ऐसा नहीं है। निश्चित रूप से, एक सामान्य वस्तु की तरह डेटा का उपयोग और संपादन नहीं कर सकता है, लेकिन डेटा प्राप्त करना अभी भी तुच्छ है। entries()विधि की जाँच करें [MDN पृष्ठ ]।

— वेब और फ्लो

@ यह बाहर इशारा करने के लिए धन्यवाद और प्रवाह धन्यवाद! मुझे यह पसंद है जब ब्राउज़र नई और उपयोगी सुविधाओं को जोड़ते हैं :) समय, वे एक बदलते हैं।

— StackExchange

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

— मनीषा

Answer 4

के आधार पर jQuery.serializeArray, कुंजी-मूल्य जोड़े देता है।

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

Comments

कुंजी-मूल्य जोड़े यहाँ, दोस्तों, हर कोई, यहाँ आओ! यह सुनहरा है !!! धन्यवाद! यदि मुझे "रिटेलर" नामक तत्व का मान चाहिए, तो मैं यह कंसोल करता हूं। ($ ('# फॉर्म')। serializeArray () कम करें। मूल्य; वापसी obj;}, {}) ['रिटेलर']);

— येवगेनी अफानसैयेव

मैंने कल इस उत्तर पर आधारित एक JQuery विधि बनाई, लेकिन मल्टीसेप्ट्स और इनपुट सरणियों के साथ काम करना (नाम 'उदाहरण []' के साथ)। आप इसे नीचे मेरे उत्तर में पा सकते हैं। वैसे भी, अच्छा दृष्टिकोण न्यूरोंट, धन्यवाद! :)

— मनुमन94

यह एक मुझे सबसे अनुकूल है, सभी उत्तरों में से!

— 19

यह 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
});

यह एक नीच उत्तर है, लेकिन मुझे यह समझाने दें कि यह एक बेहतर उपाय क्यों है:

• हम बटन प्रेस के बजाय फ़ॉर्म सबमिट को ठीक से संभाल रहे हैं। कुछ लोग खेतों में घुसना पसंद करते हैं। कुछ लोग वैकल्पिक इनपुट डिवाइस का उपयोग करते हैं जैसे कि भाषण इनपुट या अन्य एक्सेसिबिलिटी डिवाइस। फ़ॉर्म सबमिट करें और आप इसे सभी के लिए सही तरीके से हल करें।

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

• FormData इंटरफ़ेस काफी नया है, लेकिन ब्राउज़र द्वारा अच्छी तरह से समर्थित है। यह उस रूप में क्या है के वास्तविक मूल्यों को प्राप्त करने के लिए उस डेटा संग्रह को बनाने का एक शानदार तरीका है। इसके बिना, आपको सभी तत्वों (जैसे कि 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]।

— फिल्प २

@Blauhirn आप इसके बारे में गलत हैं। XMLHttpRequest FormData को सीधे समर्थन करता है। 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"?

— डायलंजमस्वाग्नर

अपवोट क्योंकि स्वीकृत उत्तर कुंजी के साथ एक वस्तु को वापस नहीं करता है:name:value

— मैट-

Answer 7

यहाँ एक बहुत ही सरल और संक्षिप्त विलेय है जो यहां तक ​​कि Jquery की आवश्यकता नहीं है।

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।

— काइल फाल्कनर

आप हमें एक गैर jquery जवाब देने के लिए धन्यवाद।

— ग्लेन पियर्स

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 आदि की आवश्यकता से अच्छे हैं

— अल्फ़ान्यूमेरिक

यह उत्तर मेरा पसंदीदा है। लेकिन इसे document.querySelectorसिर्फ पढ़ने के बजाय पढ़ना चाहिए querySelector।

— adabru

से - नोट "FormData केवल इनपुट फ़ील्ड नाम विशेषता का उपयोग का उपयोग करेगा" MDN

— binaryfunt

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);

HTML फॉर्म

<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

अच्छा समाधान :) मैं एक बग मिल गया, हालांकि setOrPush फ़ंक्शन के साथ। इसमें यह देखने के लिए एक चेक शामिल नहीं है कि क्या लक्ष्य पहले से ही एक सरणी है, जिससे एक ही नाम के साथ कई चेक किए गए चेकबॉक्स के मामले में गहरी नेस्टेड सरणी का निर्माण होता है।

— राउटर वैन डैम

@KyleFalconer अच्छा लगा! आपने रेडियो और चेकबॉक्स के स्विच मामलों को मर्ज क्यों नहीं किया - वे सही तरीके से काम करेंगे (मुझे लगता है)।

— एथन

@ ईथन ऐसा इसलिए है क्योंकि एक चेकबॉक्स में कई मान चयनित हो सकते हैं और एक रेडियो में केवल एक मूल्य का चयन हो सकता है, इसलिए जिस तरह से मैं मूल्य में बदलाव करता हूं।

— काइल फाल्कनर

@KyleFalconer हाँ, मैं समझता हूँ कि। 'चेकबॉक्स' से निपटने के लिए कोड 'सेटऑरपश' दिनचर्या के आधार पर 'रेडियो' के लिए एकल संभव विकल्प का भी ख्याल रखता है।

— एथन

@ ईथन ओह मुझे लगता है कि मुझे पता है कि आप क्या कह रहे हैं। यह किसी भी तरह से किया जा सकता है, लेकिन मुझे लगता है कि मैंने इसे इस तरह से किया क्योंकि मैं सिर्फ एक मूल्य चाहता था, मूल्यों की एक सरणी नहीं।

— काइल फाल्कनर

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

आप फॉर्मडेटा ऑब्जेक्ट का भी उपयोग कर सकते हैं ; FormData ऑब्जेक्ट आपको XMLHttpRequest का उपयोग करने के लिए कुंजी / मान जोड़े के एक सेट को संकलित करने देता है। इसका मुख्य रूप से प्रपत्र डेटा भेजने में उपयोग करने के लिए है, लेकिन कुंजी डेटा प्रसारित करने के लिए रूपों से स्वतंत्र रूप से उपयोग किया जा सकता है।

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

Comments

धन्यवाद, लेकिन क्या होगा अगर आपके पास आईडी नहीं है? यदि आपके पास JQuery ऑब्जेक्ट के रूप में एक फॉर्म है तो क्या होगा? var form = $ (यह) .closest ('form'); ? Var formElement = document.getElementById (फ़ॉर्म [0]); अपने firs लाइन के बजाय काम? खैर यह काम नहीं कर रहा है, दुर्भाग्य से। तुम जानते हो क्यों?

— येवगेनी अफानसेयेव

वास्तव में FormData सभी ब्राउज़रों द्वारा समर्थित नहीं है :( इसलिए बेहतर तरीके से एक अलग दृष्टिकोण का उपयोग करें

— numediaweb

धन्यवाद। मैंने नवीनतम क्रोम का उपयोग किया और अभी भी यह काम नहीं कर रहा था। तो मैं कहीं से #neuront जवाब के साथ चला गया।

— येवगेनी अफानसेयेव

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

मुझे लगा कि आप एक और सवाल का जवाब देना चाहते हैं। मुझे अब विवरण और मेरे कारण याद नहीं हैं; हो सकता है क्योंकि यह बिल्कुल वैसा ही न हो

— Gamliela

किसी ऐसे व्यक्ति के लिए सही उत्तर जो चाहते हैं कि वह इनपुट के लिए काम कर रहा है, कई और टेक्स्टारिया का चयन करें। क्योंकि, क्रमबद्ध का उपयोग करने से आपको वे सभी आइटम नहीं मिलेंगे जो चयनित टैग में चुने गए हैं। लेकिन, .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' ] } }।

— amphetamachine

Answer 17

न्यूरोंट की प्रतिक्रिया के आधार पर मैंने एक साधारण JQuery विधि बनाई जो कुंजी-मूल्य जोड़े में प्रपत्र डेटा प्राप्त करती है, लेकिन यह बहु-चयन और नाम = 'उदाहरण [] के साथ सरणी इनपुट के लिए काम करती है।

इसका उपयोग इस प्रकार किया जाता है:

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

आप इस फ़ंक्शन का उपयोग किसी ऑब्जेक्ट या फॉर्म से JSON के लिए कर सकते हैं ।

इसका उपयोग करने के लिए:

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

मैंने इस समस्या को हल करने के लिए एक पुस्तकालय लिखा: JSONForms । यह एक फॉर्म लेता है, प्रत्येक इनपुट के माध्यम से जाता है और एक 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>

JSONForms के सांकेतिक विधि में फ़ॉर्म को पास करना आपको निम्न वस्तु देता है:

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

यहां आपके फॉर्म के साथ डेमो दिया गया है।

Comments

लगता है और अच्छी तरह से काम करता है, धन्यवाद। बस एक चीज, मिनिफ़ाइड संस्करण एक मैप फ़ाइल को कॉल करता है, वैकल्पिक इमो होना चाहिए।

— एडी ५१ ad

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>

सबमिट बटन पर, आपकी php फ़ाइल के लिए ajax अनुरोध भेजेगा।

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

नए फॉर्मडाटा की यहाँ क्या आवश्यकता है?

— साहू वी कुमार

@VishalKumarSahu मैं फाइल अपलोड कर रहा हूं, इसलिए मैं उसके लिए फॉर्मडाटा का उपयोग करता हूं।

— मोहसिन शुकत

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;

क्योंकि इस तरह से यदि आपके पास बहुविकल्पीय सूची है - इसके मानों को पिछले एक के साथ अधिलेखित कर दिया जाएगा, क्योंकि यह इस तरह से प्रेषित है: "param1": "value1", "param1": "value2"।

तो, सही तरीका है:

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))
}