प्रपत्र क्रमबद्ध जावास्क्रिप्ट (कोई रूपरेखा नहीं)

141

आश्चर्य है कि जावास्क्रिप्ट या किसी भी ढांचे के बिना जावास्क्रिप्ट में एक फ़ंक्शन है जो मुझे प्रपत्र को क्रमबद्ध करने और क्रमबद्ध संस्करण तक पहुंचने की अनुमति देता है?

javascript  forms  serialization 
— RussellHarrower
स्रोत
1
"क्रमबद्ध संस्करण तक पहुंच" से आपका क्या मतलब है? मैंने एक ऐसी स्क्रिप्ट विकसित की है जिसमें कोई 3 पार्टी निर्भरता नहीं है जो HTML फॉर्म को एक JSON में ऑब्जेक्ट की तरह परिवर्तित कर सकता है जो कि बहुआयामी है: github.com/serbanghita/formToObject - अगर यह उत्तर छोड़ने में मदद करता है
— Șbanbanban G Ghiță

जवाबों:

39

लघु -क्रमबद्ध पुस्तकालय से एक रूपरेखा पर भरोसा नहीं होता है। ऐसा कुछ के अलावा, आपको क्रमबद्धता फ़ंक्शन को स्वयं लागू करना होगा। (हालांकि 1.2 किलोबाइट के वजन पर, इसका उपयोग क्यों नहीं किया गया?)

— Lusitanian
स्रोत
2
यह एकदम सही था। लेकिन case 'email':कोड के इनपुट अनुभाग में एक जोड़ना था
— अरविंद
ओह, अब मैं देख रहा हूँ, googlecode जावास्क्रिप्ट के बिना काम नहीं करता है। यह बस थूकता हैThat's an error
— 14:10 पर user1040495
3
कृपया कुछ कोड शामिल करें और न केवल एक पुस्तकालय का लिंक। यदि लाइब्रेरी खुला स्रोत है, तो आपको संबंधित कोड की प्रतिलिपि बनाने में सक्षम होना चाहिए।
— ल्यूक
171

यहाँ शुद्ध जावास्क्रिप्ट दृष्टिकोण है:

var form = document.querySelector('form');
var data = new FormData(form);
var req = new XMLHttpRequest();
req.send(data);

हालांकि यह केवल POST अनुरोधों के लिए काम कर रहा है।

https://developer.mozilla.org/en-US/docs/Web/API/FormData

— अर्तुर बेलज्जव
स्रोत
13
ध्यान दें, यह मल्टीपार्ट भेजता है, जो कुछ साधारण REST सेवाओं के साथ खराब काम करता है (यानी। पंख-मोंगोडीबी)
— जेसन मैककारेल
मुझे लगता है कि आप सही हैं कि यह केवल POST अनुरोधों के साथ काम करता है। डॉक्स से यह तुरंत स्पष्ट नहीं था।
— मनीषा
यह मेरे लिए काम नहीं करता है। रूप बहुत गहरा घोंसला है। FormData ऑब्जेक्ट खाली है ...
— chitzui
ध्यान दें, आपको req.open("POST", "<your-url>");पहले उपयोग करना पड़ सकता है req.send(data);अन्यथा मुझे InvalidStateError: XMLHttpRequest state must be OPENED.फ़ायरफ़ॉक्स 66 पर त्रुटि हुई। इसे अन्य अनुरोधों के साथ काम करना चाहिए जैसे कि PUT क्या आप POST को PUT से बदल सकते हैं।
— बपतिस्मा
1
इसके बारे में सोचें: आप "GET" पद्धति का उपयोग करके फॉर्मडाटा ऑब्जेक्ट कैसे भेज सकते हैं? हां, फॉर्मडाटा केवल "POST" के साथ काम करता है।
— को अजीब बात है
88

केवल आधुनिक ब्राउज़रों के लिए

आप ब्राउज़रों कि समर्थन को लक्षित करते हैं URLSearchParamsएपीआई ( सबसे हाल ही में ब्राउज़रों ) और FormData(formElement)निर्माता ( सबसे हाल ही में ब्राउज़रों एज को छोड़कर ), इस का उपयोग करें:

new URLSearchParams(new FormData(formElement)).toString()

आईई को छोड़कर हर जगह

उन ब्राउज़रों के लिए जो समर्थन करते हैं, URLSearchParamsलेकिन निर्माता नहीं FormData(formElement), इस फॉर्मडैट पॉलीफ़िल और इस कोड का उपयोग करें (IE को छोड़कर हर जगह काम करता है)

new URLSearchParams(Array.from(new FormData(formElement))).toString()

उदाहरण

कोड स्निपेट दिखाएं

IE 10 के साथ संगत

यहां तक ​​कि पुराने ब्राउज़रों (उदाहरण के लिए IE 10) के लिए, फॉर्मडाटा पॉलीफिल , पॉलीफिल का उपयोग करें Array.fromयदि आवश्यक हो और यह कोड:

Array.from(
  new FormData(formElement),
  e => e.map(encodeURIComponent).join('=')
).join('&')
— glebm
स्रोत
क्या .toString()वास्तव में यहाँ आवश्यक है?
— ओली विलियम्स
1
यदि आप एक स्ट्रिंग चाहते हैं और नहीं URLSearchParams, तो हाँ। स्ट्रिंग रूपांतरण भी अंतर्निहित रूप से होता है यदि आप इसे एक स्ट्रिंग में जोड़ते हैं या जोड़ते हैं, तो उस स्थिति में स्पष्ट toStringकॉल आवश्यक नहीं है।
— ग्लीबम
अप्रैल 2018 तक iOS सफारी पर वन-लाइनर ने मेरे लिए काम नहीं किया
— jchook
आपको क्या त्रुटि मिलती है और सफारी का कौन सा संस्करण है? शायद new FormData(formElement)वहाँ अभी तक समर्थित नहीं है?
— ग्लीबम
@glebm हाँ इसकी सफारी में समर्थित नहीं है, क्या आपको कोई अन्य समाधान मिला?
— ऋषिअर्ज
34 
function serialize (form) {
    if (!form || form.nodeName !== "FORM") {
            return;
    }
    var i, j, q = [];
    for (i = form.elements.length - 1; i >= 0; i = i - 1) {
        if (form.elements[i].name === "") {
            continue;
        }
        switch (form.elements[i].nodeName) {
            case 'INPUT':
                switch (form.elements[i].type) {
                    case 'text':
                    case 'tel':
                    case 'email':
                    case 'hidden':
                    case 'password':
                    case 'button':
                    case 'reset':
                    case 'submit':
                        q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                        break;
                    case 'checkbox':
                    case 'radio':
                        if (form.elements[i].checked) {
                                q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                        }                                               
                        break;
                }
                break;
                case 'file':
                break; 
            case 'TEXTAREA':
                    q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                    break;
            case 'SELECT':
                switch (form.elements[i].type) {
                    case 'select-one':
                        q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                        break;
                    case 'select-multiple':
                        for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
                            if (form.elements[i].options[j].selected) {
                                    q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].options[j].value));
                            }
                        }
                        break;
                }
                break;
            case 'BUTTON':
                switch (form.elements[i].type) {
                    case 'reset':
                    case 'submit':
                    case 'button':
                        q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                        break;
                }
                break;
            }
        }
    return q.join("&");
}

स्रोत: http://code.google.com/p/form-serialize/source/browse/trunk/serialize-0.1.ds

— जॉन्डेव डेकोनो
स्रोत
1
यह क्रमांकन मानक रूप क्रमांकन के साथ संगत नहीं लगता है, जहाँ रिक्त स्थान "+" द्वारा दर्शाए जाते हैं। उपरोक्त केवल एन्कोडर्कोम्पोनेंट का उपयोग करता है , जो अंतरिक्ष को "% 20" के रूप में एन्कोड करेगा। यदि अनुरूपता की आवश्यकता होती है, तो ट्रांसमिशन से पहले "% 20" को "+" में बदलने के लिए एक नियमित अभिव्यक्ति का उपयोग किया जा सकता है।
— रॉब जूल
3
मैंने ऐसे संशोधित संस्करण को gist.github.com/brettz9/7147458 (कुछ अन्य सुधारों के साथ) में जोड़ा है
— ब्रेट ज़मीर
3
सबमिट बटन आवश्यक रूप से प्रस्तुत नहीं किया जाना चाहिए, रीसेट बटन को कभी भी सबमिट नहीं किया जाना चाहिए, और बटन केवल जहां उन्हें सबमिट के लिए उपयोग किया जाता है और उस स्थिति में सबमिट बटन के रूप में माना जाता है। HTML5 4.10.22 फ़ॉर्म सबमिट करें देखें ।
— रॉब
इनपुट प्रकार ईमेल को क्रमबद्ध न करें।
— इवान
25

यहाँ TibTibs का थोड़ा संशोधित संस्करण है:

function serialize(form) {
    var field, s = [];
    if (typeof form == 'object' && form.nodeName == "FORM") {
        var len = form.elements.length;
        for (i=0; i<len; i++) {
            field = form.elements[i];
            if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
                if (field.type == 'select-multiple') {
                    for (j=form.elements[i].options.length-1; j>=0; j--) {
                        if(field.options[j].selected)
                            s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.options[j].value);
                    }
                } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {
                    s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value);
                }
            }
        }
    }
    return s.join('&').replace(/%20/g, '+');
}

अक्षम फ़ील्ड को छोड़ दिया जाता है और नाम भी URL एन्कोडेड होते हैं। स्ट्रिंग को वापस करने से पहले, रेगेक्स का% 20 अक्षरों का स्थान केवल एक बार होता है।

क्वेरी स्ट्रिंग jQuery के $ .serialize () विधि से परिणाम के समान रूप में है।

— साइमन स्टाइनबर्गर
स्रोत
6
कोड में सुधार के लिए समय निकालने के लिए +1। मुझे मजा आता है जब लोगों को मेरी खामियां मिलती हैं, क्योंकि यह सीखने का एक अच्छा मौका है। इसे अच्छा दिखने के लिए +1 भी। -1 क्योंकि मैं +2 = (
— टिब्बीज
1
आप form.nodeName.toLowerCase() == "form"इसके बजाय जोड़ सकते हैंform.nodeName == "FORM"
— StefanNch
12

मैंने जॉन्डेव डेकोनो के जवाब के साथ शुरुआत की।

यह उनके फ़ंक्शन के उत्तरों में वर्णित कुछ समस्याओं को ठीक करना चाहिए।

  1. % 20 को + प्रतीक के साथ बदलें।
  2. सबमिट / बटन प्रकार केवल तभी सबमिट किए जाएंगे जब उन्हें फॉर्म जमा करने के लिए क्लिक किया गया था।
  3. रीसेट बटन को नजरअंदाज कर दिया जाएगा।
  4. कोड मुझे अनावश्यक लग रहा था क्योंकि यह अनिवार्य रूप से क्षेत्र के प्रकार की परवाह किए बिना एक ही काम कर रहा है। HTML5 फ़ील्ड प्रकार जैसे 'tel' और 'email' के साथ असंगतता का उल्लेख नहीं करना, इस प्रकार मैंने स्विच स्टेटमेंट के साथ अधिकांश बारीकियों को हटा दिया।

यदि उनके पास कोई नाम मान नहीं है तो बटन प्रकारों को अभी भी अनदेखा किया जाएगा।

function serialize(form, evt){
    var evt    = evt || window.event;
    evt.target = evt.target || evt.srcElement || null;
    var field, query='';
    if(typeof form == 'object' && form.nodeName == "FORM"){
        for(i=form.elements.length-1; i>=0; i--){
            field = form.elements[i];
            if(field.name && field.type != 'file' && field.type != 'reset'){
                if(field.type == 'select-multiple'){
                    for(j=form.elements[i].options.length-1; j>=0; j--){
                        if(field.options[j].selected){
                            query += '&' + field.name + "=" + encodeURIComponent(field.options[j].value).replace(/%20/g,'+');
                        }
                    }
                }
                else{
                    if((field.type != 'submit' && field.type != 'button') || evt.target == field){
                        if((field.type != 'checkbox' && field.type != 'radio') || field.checked){
                            query += '&' + field.name + "=" + encodeURIComponent(field.value).replace(/%20/g,'+');
                        }   
                    }
                }
            }
        }
    }
    return query.substr(1);
}

इस समय मैं इस फ़ंक्शन का उपयोग कर रहा हूं।

<form onsubmit="myAjax('http://example.com/services/email.php', 'POST', serialize(this, event))">
— TibTibs
स्रोत
6
अच्छी तरह से refactored कोड के लिए +1। -1 अक्षम फ़ील्ड की अवहेलना के लिए, जो क्वेरी स्ट्रिंग में प्रकट नहीं होनी चाहिए। +1 कथन के लिए बहुत ही सुंदर है, जो फार्म तत्वों की बार-बार गिनती से बचते हैं। कुल: +1 :-) धन्यवाद!
— साइमन स्टाइनबर्गर
विकलांग क्षेत्रों पर अच्छा ध्यान दें, मैं हाल ही में एक नए समारोह में लिख रहा था। आप दोनों को +1, क्योंकि मुझे मजेदार टिप्पणियां पढ़ने में आनंद आता है। :)
— टिब्बीज जूल
11

यदि आपको json फॉर्मेट में POST का उपयोग करके "myForm" फॉर्म जमा करने की आवश्यकता है, तो आप कर सकते हैं:

const formEntries = new FormData(myForm).entries();
const json = Object.assign(...Array.from(formEntries, ([x,y]) => ({[x]:y})));
fetch('/api/foo', {
  method: 'POST',
  body: JSON.stringify(json)
});

दूसरी पंक्ति एक सरणी से परिवर्तित होती है जैसे:

[["firstProp", "firstValue"], ["secondProp", "secondValue"], ...and so on... ]

... एक नियमित वस्तु में, जैसे:

{"firstProp": "firstValue", "secondProp": "secondValue", ...and so on ... }

... यह रूपांतरण को Array.from () में एक MapFn में पास करके करता है। यह मानचित्र प्रत्येक ["a", "b"] जोड़े पर लागू होता है और उन्हें {"a": "b"} में रूपांतरित करता है ताकि सरणी में प्रत्येक में केवल एक गुण वाली बहुत सी वस्तु समाहित हो जाए। MapFn जोड़ी के पहले और दूसरे हिस्सों के नाम पाने के लिए "विनाशकारी" का उपयोग कर रहा है, और यह MapFn द्वारा लौटाए गए ऑब्जेक्ट में संपत्ति का नाम सेट करने के लिए ES6 "ComputedPropertyName" का भी उपयोग कर रहा है (यह कहता है "] x]: कुछ "बजाय" x: कुछ "।

इन सभी एकल संपत्ति ऑब्जेक्ट्स को तब Object.assign () फ़ंक्शन के तर्कों में पारित किया जाता है जो सभी एकल गुण ऑब्जेक्ट्स को एकल ऑब्जेक्ट में विलय करता है जिसमें सभी गुण होते हैं।

Array.from (): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

मापदंडों में विनाशकारी: https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/

गणना की गई संपत्ति के नाम पर अधिक: जावास्क्रिप्ट ऑब्जेक्ट शाब्दिक में संपत्ति के नाम के रूप में परिवर्तनीय?

— molsson
स्रोत
यह मेरे लिए भी काम करता है भले ही मुझे दूसरी पंक्ति समझ में न आए, क्या आप इसके बारे में अधिक जानकारी दे सकते हैं कृपया ??
— एस्पिरर मुरहाबी
प्रसार ऑपरेटर और देशी वस्तु और सरणी विधियों का उपयोग करके सुंदर उत्तर।
— विन्नी फोंसेका
ध्यान दें कि यह दृष्टिकोण IE (.entries ()) में समर्थित नहीं है
— दोस्त
Object.entries () के लिए MDN पृष्ठ एक छोटी पॉलीफ़िल है जिसे आप IE के लिए उपयोग कर सकते हैं: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… लेकिन IE भी प्रसार ऑपरेटर का समर्थन नहीं करता है।
— मॉल्सन
आप नई विधि Object.fromEntries (नया फॉर्मडाटा (myFormElement)) का उपयोग करके फॉर्म को क्रमबद्ध कर सकते हैं।
— मिगुएल सविग्नानो
10

सभी ब्राउज़रों में काम करता है।

const formSerialize = formElement => {
  const values = {};
  const inputs = formElement.elements;

  for (let i = 0; i < inputs.length; i++) {
    values[inputs[i].name] = inputs[i].value;
  }
  return values;
}

const dumpValues = form => () => {
  
  const r = formSerialize(form);
  console.log(r);
  console.log(JSON.stringify(r));
}

const form = document.querySelector('form');

dumpValues(form)();

form.addEventListener('change',dumpValues(form));
<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" value="John">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail" value="john@jonhson.j">
  </div>
  <div>
    <label for="interests">Interest:</label>
    <select required=""  id="interests" name="interests">
      <option value="" selected="selected">- None -</option>
      <option value="drums">Drums</option>
      <option value="js">Javascript</option>
      <option value="sports">Sports</option>
      <option value="trekking">Trekking</option>
    </select>
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message">Hello My Friend</textarea>
  </div>
</form>
स्निपेट का विस्तार करें

— डेविड लेमन
स्रोत
यह एक जुसन बनाता है, मुझे लगता है कि लेखक यूआरआई को क्रमबद्ध करने के बारे में पूछ रहा था।
— जस्कमार 13
मैं कई चुनिंदा विकल्प रूपों के लिए इस काम को देखना पसंद करूंगा।
— जैच स्मिथ
@ZachSmith यह पहले से ही काम कर रहा था, लेकिन मैंने इसे जांचने के लिए एक उदाहरण जोड़ा
— डेविड लेमन
8 
HTMLElement.prototype.serialize = function(){
    var obj = {};
    var elements = this.querySelectorAll( "input, select, textarea" );
    for( var i = 0; i < elements.length; ++i ) {
        var element = elements[i];
        var name = element.name;
        var value = element.value;

        if( name ) {
            obj[ name ] = value;
        }
    }
    return JSON.stringify( obj );
}

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

var dataToSend = document.querySelector("form").serialize();

मुझे आशा है कि मैंने मदद की होगी।

— एडुआर्डो बोर्गेस
स्रोत
3
चेकबॉक्स के साथ काम नहीं करेंगे। यहां, आपको इनपुट प्रकार की स्पष्ट रूप से जांच करनी चाहिए।
— एड्रियन प्रीस
5

यदि आप किसी घटना पर जानकारी को क्रमबद्ध करना चाहते हैं। यहां एक शुद्ध जावास्क्रिप्ट तरीका है जिसका मैं उपयोग करता हूं।

// serialize form
var data = {};
var inputs = [].slice.call(e.target.getElementsByTagName('input'));
inputs.forEach(input => {
  data[input.name] = input.value;
});

डेटा आदानों का एक जावास्क्रिप्ट ऑब्जेक्ट होगा।

— CAOakley
स्रोत
2
यह अधिकांश तत्वों पर काम करना चाहिए। निश्चित रूप से नहीं textarea / चयन, हालांकि
— दांतेदार
क्या वह टुकड़ा Array.from जैसा ही है?
— user1040495
5

कम चर का उपयोग करके और forEachलूप की गति का लाभ उठाते हुए @ SimonSteinberger के कोड का एक परिष्कृत संस्करण (जो fors की तुलना में थोड़ा तेज़ है )

function serialize(form) {
    var result = [];
    if (typeof form === 'object' && form.nodeName === 'FORM')
        Array.prototype.slice.call(form.elements).forEach(function(control) {
            if (
                control.name && 
                !control.disabled && 
                ['file', 'reset', 'submit', 'button'].indexOf(control.type) === -1
            )
                if (control.type === 'select-multiple')
                    Array.prototype.slice.call(control.options).forEach(function(option) {
                        if (option.selected) 
                            result.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(option.value));
                    });
                else if (
                    ['checkbox', 'radio'].indexOf(control.type) === -1 || 
                    control.checked
                ) result.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(control.value));
        });
        return result.join('&').replace(/%20/g, '+');
}
— स्टीफन गैबोस
स्रोत
3

मैंने टिब्बी का उत्तर उस चीज़ में दिया, जो पढ़ने में बहुत स्पष्ट है। यह 80 वर्ण चौड़ाई और कुछ टिप्पणियों के कारण थोड़ा लंबा है।

इसके अतिरिक्त, यह रिक्त फ़ील्ड नामों और रिक्त मानों को अनदेखा करता है।

// Serialize the specified form into a query string.
//
// Returns a blank string if +form+ is not actually a form element.
function $serialize(form, evt) {
  if(typeof(form) !== 'object' && form.nodeName !== "FORM")
    return '';

  var evt    = evt || window.event || { target: null };
  evt.target = evt.target || evt.srcElement || null;
  var field, query = '';

  // Transform a form field into a query-string-friendly
  // serialized form.
  //
  // [NOTE]: Replaces blank spaces from its standard '%20' representation
  //         into the non-standard (though widely used) '+'.
  var encode = function(field, name) {
    if (field.disabled) return '';

    return '&' + (name || field.name) + '=' +
           encodeURIComponent(field.value).replace(/%20/g,'+');
  }

  // Fields without names can't be serialized.
  var hasName = function(el) {
    return (el.name && el.name.length > 0)
  }

  // Ignore the usual suspects: file inputs, reset buttons,
  // buttons that did not submit the form and unchecked
  // radio buttons and checkboxes.
  var ignorableField = function(el, evt) {
    return ((el.type == 'file' || el.type == 'reset')
        || ((el.type == 'submit' || el.type == 'button') && evt.target != el)
        || ((el.type == 'checkbox' || el.type == 'radio') && !el.checked))
  }

  var parseMultiSelect = function(field) {
    var q = '';

    for (var j=field.options.length-1; j>=0; j--) {
      if (field.options[j].selected) {
        q += encode(field.options[j], field.name);
      }
    }

    return q;
  };

  for(i = form.elements.length - 1; i >= 0; i--) {
    field = form.elements[i];

    if (!hasName(field) || field.value == '' || ignorableField(field, evt))
      continue;

    query += (field.type == 'select-multiple') ? parseMultiSelect(field)
                                               : encode(field);
  }

  return (query.length == 0) ? '' : query.substr(1);
}
— ब्रायन एडमंड्स
स्रोत
मैंने इसे सीधे अपने ऐप में कॉपी किया और मल्टी-सेलेक्ट काम में नहीं आता (मानों की नक़ल की जाती है)
— anastymous
@anastymous कैच के लिए धन्यवाद, यह तय हो गया है।
— ब्रायन एडमंड्स
हाय ब्रायन, क्या के लिए evt है? और मुझे इसके लिए क्या करना चाहिए? फ़ायरफ़ॉक्स मुझे बता रहा है कि यह परिभाषित नहीं है।
— anastymous
हाय anastymous, फिर से पकड़ने के लिए धन्यवाद, इसे करने के लिए evt असाइनमेंट को बदलकर तय किया जाना चाहिए evt = evt || window.event || { target: null };(जैसा कि संपादित किया गया है) इसके पीछे बिंदु उस घटना को पारित करना है जिसने क्रमांकन को ट्रिगर किया है, अगर कोई है, जैसे कि एक फॉर्म "सबमिट करें" ईवेंट, या एक बटन "क्लिक"। यदि किसी फ़ॉर्म में सबमिट करने के लिए एक से अधिक बटन हैं, तो आप केवल उस बटन के मूल्य का हिसाब लगाना चाहते हैं जिसने इवेंट को ट्रिगर किया और दूसरों को अनदेखा किया। मैंने एक साथ डंप
— ब्रायन एडमंड्स
2 
  // supports IE8 and IE9 
  function serialize(form) {
    var inputs = form.elements;
    var array = [];
    for(i=0; i < inputs.length; i++) {
      var inputNameValue = inputs[i].name + '=' + inputs[i].value;
      array.push(inputNameValue);
    }
    return array.join('&');
  }
 //using the serialize function written above
 var form = document.getElementById("form");//get the id of your form. i am assuming the id to be named form.
 var form_data = serialize(form);
 var xhr = new XMLHttpRequest();
 xhr.send(form_data);

 //does not work with IE8 AND IE9
 var form = document.querySelector('form');
 var data = new FormData(form);
 var xhr = new XMLHttpRequest();
 xhr.send(data);
— ओनोम माइन आदमू
स्रोत
2

मैंने @Dison उत्तर और MDN से फॉर्मडैट की प्रविष्टियाँ () विधि पकड़ ली है, ऐसा कहा जाता है:

FormData.entries () विधि इस ऑब्जेक्ट में निहित सभी कुंजी / मान जोड़े के माध्यम से जाने के लिए एक पुनरावृत्ति देता है। प्रत्येक जोड़ी की कुंजी एक USVString ऑब्जेक्ट है; मूल्य या तो USVString, या एक बूँद है।

लेकिन एकमात्र मुद्दा यह है कि मोबाइल ब्राउज़र (एंड्रॉइड और सफारी समर्थित नहीं हैं) और IE और सफारी डेस्कटॉप भी

लेकिन मूल रूप से यहाँ मेरा दृष्टिकोण है:

let theForm =  document.getElementById("contact"); 

theForm.onsubmit = function(event) {
    event.preventDefault();

    let rawData = new FormData(theForm);
    let data = {};

   for(let pair of rawData.entries()) {
     data[pair[0]] = pair[1]; 
    }
    let contactData = JSON.stringify(data);
    console.warn(contactData);
    //here you can send a post request with content-type :'application.json'

};

कोड यहां पाया जा सकता है

— एस्पिरर मुरहाबी
स्रोत
2

जावास्क्रिप्ट को कम करने के लिए फ़ंक्शन का उपयोग IE9> सहित सभी ब्राउज़रों के लिए एक चाल करना चाहिए:

Array.prototype.slice.call(form.elements) // convert form elements to array
    .reduce(function(acc,cur){   // reduce 
        var o = {type : cur.type, name : cur.name, value : cur.value}; // get needed keys
        if(['checkbox','radio'].indexOf(cur.type) !==-1){
            o.checked = cur.checked;
        } else if(cur.type === 'select-multiple'){
            o.value=[];
            for(i=0;i<cur.length;i++){
                o.value.push({
                    value : cur.options[i].value,
                    selected : cur.options[i].selected
                });
            }
        }
        acc.push(o);
        return acc;
 },[]);

लाइव उदाहरण बलो।

कोड स्निपेट दिखाएं

— crashtestxxx
स्रोत
क्या यह बहुविकल्पी के लिए काम करता है? लगता है जब मैं आपके कोड का उपयोग करता हूं तो यह कई चयनित विकल्पों के मूल्य का केवल पहला आइटम देता है
— Zach Smith
@ZachSmith मैंने कई चुनिंदा तत्वों को शामिल करने के लिए अपना उत्तर अपडेट कर दिया है।
— 21 फरवरी
0

मुझे उम्मीद है कि यह काम करेगा

var serializeForm = (formElement) => {
  const formData = {};
  const inputs = formElement.elements;

  for (let i = 0; i < inputs.length; i++) {
    if(inputs[i].name!=="")
        formData[inputs[i].name] = inputs[i].value;
  }
  return formData;
}
— मनोज राणा
स्रोत
0

डेविड लेमन के जवाब में सुधार।

यह JSON में डेटा को रूपांतरित करता है और आपको डेटा ऑब्जेक्ट से फ़ॉर्म सेट करने की अनुमति देता है।

const main = () => {
  const form = document.forms['info'];
  const data = {
    "user_name"       : "John",
    "user_email"      : "john@jonhson.com",
    "user_created"    : "2020-03-24",
    "user_age"        : 42,
    "user_subscribed" : true,
    "user_interests"  : "sports",
    "user_message"    : "Hello My Friend"
  };

  populateForm(form, data);
  updateJsonView(form);
  form.addEventListener('change', (e) => updateJsonView(form));
}

const getFieldValue = (field, opts) => {
  let type = field.getAttribute('type');
  if (type) {
    switch (type) {
      case 'checkbox':
        return field.checked;
      case 'number':
        return field.value.includes('.')
          ? parseFloat(field.value)
          : parseInt(field.value, 10);
    }
  }
  if (opts && opts[field.name] && opts[field.name].type) {
    switch (opts[field.name].type) {
      case 'int':
        return parseInt(field.value, 10);
      case 'float':
        return parseFloat(field.value);
    }
  }
  return field.value;
}

const setFieldValue = (field, value) => {
  let type = field.getAttribute('type');
  if (type) {
    switch (type) {
      case 'checkbox':
        field.checked = value;
        break;
      default:
        field.value = value;
        break;
    }
  } else {
    field.value = value;
  }
}

const extractFormData = (form, opts) => {
  return Array.from(form.elements).reduce((data, element) => {
    return Object.assign(data, { [element.name] : getFieldValue(element, opts) });
  }, {});
};

const populateForm = (form, data) => {
  return Array.from(form.elements).forEach((element) => {
    setFieldValue(element, data[element.name]);
  });
};

const updateJsonView = (form) => {
  let fieldOptions = {};
  let formData = extractFormData(form, fieldOptions);
  let serializedData = JSON.stringify(formData, null, 2);
  document.querySelector('.json-view').textContent = serializedData;
};

main();
.form-field {
  margin-bottom: 0.5em;
}

.form-field label {
  display: inline-block;
  font-weight: bold;
  width: 7em;
  vertical-align: top;
}

.json-view {
  position: absolute;
  top: 0.667em;
  right: 0.667em;
  border: thin solid grey;
  padding: 0.5em;
  white-space: pre;
  font-family: monospace;
  overflow: scroll-y;
  max-height: 100%;
}
<form name="info" action="/my-handling-form-page" method="post">
  <div class="form-field">
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div class="form-field">
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email">
  </div>
  <div class="form-field">
    <label for="created">Date of Birth:</label>
    <input type="date" id="created" name="user_created">
  </div>
  <div class="form-field">
    <label for="age">Age:</label>
    <input type="number" id="age" name="user_age">
  </div>
  <div class="form-field">
    <label for="subscribe">Subscribe:</label>
    <input type="checkbox" id="subscribe" name="user_subscribed">
  </div>
  <div class="form-field">
    <label for="interests">Interest:</label>
    <select required=""  id="interests" name="user_interests">
      <option value="" selected="selected">- None -</option>
      <option value="drums">Drums</option>
      <option value="js">Javascript</option>
      <option value="sports">Sports</option>
      <option value="trekking">Trekking</option>
    </select>
  </div>
  <div class="form-field">
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
</form>
<div class="json-view"></div>
स्निपेट का विस्तार करें

— श्री पॉलीवूलर
स्रोत
0

यह बहुत ही सरल कार्य द्वारा निम्नानुसार किया जा सकता है

function serialize(form) {
        let requestArray = [];
        form.querySelectorAll('[name]').forEach((elem) => {
            requestArray.push(elem.name + '=' + elem.value);
        });
        if(requestArray.length > 0)
            return requestArray.join('&');
        else
            return false;
    }

 serialized = serialize(document.querySelector('form'))
  console.log(serialized);
<form>

  <input type='text' name='fname' value='Johne'/>
  <input type='text' name='lname' value='Doe'/>
  <input type='text' name='contact[]' value='99999999'/>
  <input type='text' name='contact[]' value='34423434345'/>

</form>
स्निपेट का विस्तार करें

— Anil
स्रोत
0

यहाँ शुद्ध जावास्क्रिप्ट दृष्टिकोण है:

var form = document.querySelector('form');
var data = new FormData(form);

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       console.log(this.responseText);
    }
  };
  xhttp.open("POST", "<YOUR-URL>", true);
  xhttp.send(data);
}
— RahmanRezaee
स्रोत
-1 
document.serializeForm = function (selector) {
     var dictionary = {};
     var form = document.querySelector(selector);
     var formdata = new FormData(form);
     var done = false;
     var iterator = formdata.entries();
     do {
         var prop = iterator.next();
         if (prop.done && !prop.value) {
             done = true;
         }
         else {
             dictionary[prop.value[0]] = prop.value[1];
         }

     } while (!done);
     return dictionary;
}
— हसन
स्रोत
साफ-सुथरा दिखता है, लेकिन यह रेडियो बटन या चेकबॉक्स को ध्यान में नहीं रखता है
— Yvonne Aburrow
-1

डीबगिंग उद्देश्यों के लिए यह आपकी मदद कर सकता है:

function print_form_data(form) {
    const form_data = new FormData(form);

    for (const item of form_data.entries()) {
        console.log(item);
    }

    return false;
}
— tobias47n9e
स्रोत
-1

मैं पागल हो सकता था लेकिन मैं इन उत्तरों को गंभीरता से फूला हुआ पा रहा हूं। यहाँ मेरा समाधान है

function serialiseForm(form) {
  var input = form.getElementsByTagName("input");
  var formData = {};
  for (var i = 0; i < input.length; i++) {
    formData[input[i].name] = input[i].value;
  }
  return formData = JSON.stringify(formData);
}
— माइकल शेरिस कैली
स्रोत
इनपुट प्रकार द्वारा तत्वों को पुनः प्राप्त करने के लिए आपके फ़ॉर्म को आधार बनाना select, सभी के लिए विफल होगा
— Zach Smith
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.