JQuery का उपयोग करके प्रपत्र इनपुट फ़ील्ड प्राप्त करें?

Question

मेरे पास कई इनपुट फ़ील्ड के साथ एक फ़ॉर्म है।

जब मैं सबमिट फॉर्म ईवेंट को jQuery के साथ पकड़ता हूं, तो क्या उस फॉर्म के सभी इनपुट फ़ील्ड को एक सहयोगी सरणी में प्राप्त करना संभव है?

Comments

यह एक अच्छा सवाल है; वास्तव में, मुझे यह वास्तव में अजीब लगता है कि jQuery के पास एक फ़ंक्शन नहीं है जो ठीक से ऐसा करता है। फ़ॉर्म डेटा को दो अलग-अलग स्वरूपों में प्राप्त करने के लिए फ़ंक्शंस हैं, लेकिन आपके लिए सबसे सुविधाजनक नहीं है, आप जानते हैं, स्क्रिप्टिंग … (हो सकता है कि .val) ऐसे सरणी को वापस करना चाहिए यदि फॉर्म एलिमेंट पर बुलाया जाए?)

— ल्यूक मौरर

Answer 1

$('#myForm').submit(function() {
    // get all the inputs into an array.
    var $inputs = $('#myForm :input');

    // not sure if you wanted this, but I thought I'd add it.
    // get an associative array of just the values.
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });

});

---

शमौन_वर से टिप के लिए धन्यवाद, यहाँ एक और तरीका है जिसे आप इसका उपयोग कर सकते हैं serializeArray:

var values = {};
$.each($('#myForm').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

ध्यान दें कि यह स्निपेट <select multiple>तत्वों पर विफल हो जाएगा ।

ऐसा प्रतीत होता है कि नया HTML 5 फॉर्म इनपुटserializeArray jQuery के संस्करण 1.3 के साथ काम नहीं करता है । यह संस्करण 1.4+ में काम करता है

Comments

JQuery के नए संस्करणों में, साइमन_वेवर का उत्तर अधिक मजबूत और आसान है।

— मई्य

@MightyE & @Simon_Weaver - आप सही कह रहे हैं, यह एक अधिक मजबूत तरीका है, लेकिन यह वही नहीं करता है जो ओपी देख रहा था। serializeArray गुणों के साथ वस्तुओं की एक सरणी देता है nameऔर value। एक बेहतर समाधान यह हो सकता है कि जो भी प्रारूप आवश्यक हो, उसमें serializeArray से आउटपुट को संसाधित किया जाए।

— ०१० ०१:१४

मुझे लगता है कि serializeArray () बिल्कुल वही करता है जो आप चाहते हैं, और बहुत कम कोड है।

— स्लेसी

पहले विकल्प के लिए, <select>तत्वों के बारे में क्या ? मैंने कोशिश की var $inputs = $('#new-ticket :input, :select');लेकिन वह काम नहीं करता है। क्या किसी को यह करने का उचित तरीका पता है क्योंकि मुझे नहीं लगता कि मैं यह सही कर रहा हूं।

— नाथन

@ नथन, आपको उपयोग करना चाहिए $("#new-ticket :input, #new-ticket :select"), या इससे भी बेहतर,$(":input, :select", "#new-ticket")

— निफ्ट

Answer 2

इस सवाल पर पार्टी के लिए देर से, लेकिन यह और भी आसान है:

$('#myForm').submit(function() {
    // Get all the forms elements and their values in one step
    var values = $(this).serialize();

});

Comments

यह वास्तव में सबसे अच्छा जवाब है। यहां तक ​​कि यह आपके इनपुट क्षेत्रों के लिए आपके पास कोई भी फॉरमेट तैयार कर सकता है। मुझे नहीं लगता कि निक द्वारा उत्तर वास्तव में आपके डेटा संरचनाओं को बरकरार रखेगा यदि यह उदाहरण के लिए Zend_Form का उपयोग करके बनाया गया था, जहां आपके पास इनपुट के नाम के रूप में [कुछ] और फ़ील्ड [[कुछ_सेले] फ़ील्ड होगा ... कम से कम शब्दार्थ, मैं यह नहीं देख सकता कि यह कैसे होगा ...

— msumme

JQuery एपीआई डॉक्स के अनुसार, .serialize()( api.jquery.com/serialize ) सभी फॉर्म के एलिमेंट्स को एक स्ट्रिंग में एक URL स्ट्रिंग के लिए तैयार करने के लिए तैयार करता है, अनिवार्य रूप से एक GET फॉर्म रिक्वेस्ट की नकल करता है। इससे यह तय नहीं होगा कि नीक का जवाब क्या है।

— क्रिस्टोफर पार्कर

यह सबसे अच्छा जवाब है!

— डैनियल हंटर

जानने योग्य: .serialize()सिर्फ फार्म तत्वों पर भी काम करता है। तो $('form select').serialize()डेटा का चयन केवल चयन के लिए करेगा।

— एंटीटॉक्सिक

दोहराने के बजाय $('#myForm'), $ का उपयोग करें (यह)।

— जिमोथी

Answer 3

Jquery.form प्लगइन क्या दूसरों को इस सवाल पर कि अंत तक के लिए देख रहे हैं के साथ मदद कर सकता है। मुझे यकीन नहीं है कि यह सीधे वही करता है जो आप चाहते हैं या नहीं।

SerializeArray फ़ंक्शन भी है ।

Answer 4

कभी-कभी मुझे एक समय में एक मिल जाना अधिक उपयोगी होता है। उसके लिए, यह है:

var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']"); 

Comments

जोड़ [0].valueइस यानी करने के लिए $(...)[0].value;मुझे इनपुट सीधे का मूल्य दिया है, धन्यवाद!

— पाऊ कोमा रामिरेज़

Answer 5

$('#myForm').bind('submit', function () {
  var elements = this.elements;
});

एलिमेंट्स वेरिएबल में फॉर्म के भीतर सभी इनपुट्स, सिलेक्ट्स, टेक्सएरेस और फील्डसेट होंगे।

Answer 6

यहां एक और समाधान है, इस तरह आप फॉर्म के बारे में सभी डेटा प्राप्त कर सकते हैं और इसका उपयोग सर्वरसाइड कॉल या कुछ और में कर सकते हैं।

$('.form').on('submit', function( e )){ 
   var form = $( this ), // this will resolve to the form submitted
       action = form.attr( 'action' ),
         type = form.attr( 'method' ),
         data = {};

     // Make sure you use the 'name' field on the inputs you want to grab. 
   form.find( '[name]' ).each( function( i , v ){
      var input = $( this ), // resolves to current input element.
          name = input.attr( 'name' ),
          value = input.val();
      data[name] = value;
   });

  // Code which makes use of 'data'.

 e.preventDefault();
}

फिर आप इसे अजाक्स कॉल के साथ उपयोग कर सकते हैं:

function sendRequest(action, type, data) {
       $.ajax({
            url: action,
           type: type,
           data: data
       })
       .done(function( returnedHtml ) {
           $( "#responseDiv" ).append( returnedHtml );
       })
       .fail(function() {
           $( "#responseDiv" ).append( "This failed" );
       });
}

आशा है कि यह आप में से किसी के लिए किसी भी तरह का है :)

Answer 7

एक मामूली मोड़ के साथ इसी तरह का मुद्दा था और मुझे लगा कि मैं इसे बाहर फेंक दूंगा। मेरे पास एक कॉलबैक फ़ंक्शन है जिसे फ़ॉर्म मिलता है इसलिए मेरे पास पहले से ही एक फॉर्म ऑब्जेक्ट था और आसान वेरिएंट नहीं कर सकता था $('form:input')। इसके बजाय मैं साथ आया:

    var dataValues = {};
    form.find('input').each(
        function(unusedIndex, child) {
            dataValues[child.name] = child.value;
        });

इसकी समान लेकिन समान स्थिति नहीं है, लेकिन मुझे यह धागा बहुत उपयोगी लगा और मैंने सोचा कि मैं इसे अंत में टक कर दूंगा और आशा करता हूं कि कोई और इसे उपयोगी पाए।

Answer 8

साहचर्य? कुछ काम के बिना नहीं, लेकिन आप सामान्य चयनकर्ताओं का उपयोग कर सकते हैं:

var items = new Array();

$('#form_id:input').each(function (el) {
    items[el.name] = el;
});

Comments

वास्तव में, लांस का जवाब POST मूल्यों के लिए सहयोगी सरणी को बरकरार रखता है, और कोड की एक पंक्ति लेता है।

— msumme

आइटम एक सरणी क्यों है? आप इसे एक सादे वस्तु की तरह उपयोग कर रहे हैं। यहाँ सरणी की कोई आवश्यकता नहीं है

— जोनाथन मोरालेस वेलेज़

@ JonathanMoralesVélez 2008 की ओली अब टिप्पणी के लिए आसपास नहीं है। 2015 आपके साथ सहमत है।

— ओली

Answer 9

jQuery के serializeArrayअक्षम फ़ील्ड शामिल नहीं हैं, इसलिए यदि आपको उन लोगों की भी आवश्यकता है, तो प्रयास करें:

var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
    data[field.name] = field.value;
});

Answer 10

http://api.jquery.com/serializearray/

$('#form').on('submit', function() {
    var data = $(this).serializeArray();
});

यह XMLHttpRequest Level 2 FormData ऑब्जेक्ट का उपयोग करके jQuery के बिना भी किया जा सकता है

http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface

var data = new FormData([form])

Answer 11

चेकबॉक्स और रेडियो बटन न भूलें -

var inputs = $("#myForm :input");
var obj = $.map(inputs, function(n, i) {
  var o = {};
  if (n.type == "radio" || n.type == "checkbox")
    o[n.id] = $(n).attr("checked");
  else
    o[n.id] = $(n).val();
  return o;
});
return obj

Answer 12

यह कोड नाम के बजाय काम करेगा , ईमेल आपके फॉर्म फ़ील्ड नाम दर्ज करेगा

$(document).ready(function(){
  $("#form_id").submit(function(event){
    event.preventDefault();
    var name = $("input[name='name']",this).val();
    var email = $("input[name='email']",this).val();
  });
});

Answer 13

अजीब लगता है कि किसी ने सूची डेटा प्राप्त करने के लिए संक्षिप्त समाधान का प्रस्ताव या प्रस्ताव नहीं दिया है। शायद ही किसी भी रूप एकल-आयाम ऑब्जेक्ट होने जा रहे हैं।

इस समाधान का नकारात्मक पहलू यह है कि, आपकी एकल वस्तुओं को [0] सूचकांक में एक्सेस किया जाना है। लेकिन IMO यह दर्जन-लाइन मैपिंग समाधानों में से एक का उपयोग करने से बेहतर है।

var formData = $('#formId').serializeArray().reduce(function (obj, item) {
    if (obj[item.name] == null) {
        obj[item.name] = [];
    } 
    obj[item.name].push(item.value);
    return obj;
}, {});

Answer 14

मेरे पास एक ही समस्या थी और इसे एक अलग तरीके से हल किया।

var arr = new Array();
$(':input').each(function() {
 arr.push($(this).val());
});
arr;

यह सभी इनपुट फ़ील्ड का मान लौटाता है। आप $(':input')अधिक विशिष्ट होने के लिए बदल सकते हैं ।

Answer 15

एक जैसा समाधान निकफ द्वारा दिया गया है , लेकिन सरणी इनपुट नाम जैसे कि खाते में लिया गया है

<input type="text" name="array[]" />

values = {};
$("#something :input").each(function() {
  if (this.name.search(/\[\]/) > 0) //search for [] in name
  {
    if (typeof values[this.name] != "undefined") {
      values[this.name] = values[this.name].concat([$(this).val()])
    } else {
      values[this.name] = [$(this).val()];
    }
  } else {
    values[this.name] = $(this).val();
  }
});

Answer 16

यदि आपको इनपुट से कई मान प्राप्त करने की आवश्यकता है और आप कई मूल्यों के साथ इनपुट को परिभाषित करने के लिए [] का उपयोग कर रहे हैं, तो आप निम्नलिखित का उपयोग कर सकते हैं:

$('#contentform').find('input, textarea, select').each(function(x, field) {
    if (field.name) {
        if (field.name.indexOf('[]')>0) {
            if (!$.isArray(data[field.name])) {
               data[field.name]=new Array();
            }
            data[field.name].push(field.value);
        } else {
            data[field.name]=field.value;
        }
    }                   
});

Answer 17

लांस रशिंग और सिमोन_वेवर के उत्तरों से प्रेरित होकर , यह मेरा पसंदीदा समाधान है।

$('#myForm').submit( function( event ) {
    var values = $(this).serializeArray();
    // In my case, I need to fetch these data before custom actions
    event.preventDefault();
});

आउटपुट वस्तुओं की एक सरणी है, उदाहरण के लिए

[{name: "start-time", value: "11:01"}, {name: "end-time", value: "11:11"}]

नीचे दिए गए कोड के साथ,

var inputs = {};
$.each(values, function(k, v){
    inputs[v.name]= v.value;
});

इसका अंतिम आउटपुट होगा

{"start-time":"11:01", "end-time":"11:01"}

Answer 18

मैं प्रत्येक लूप के बिना इस कोड का उपयोग कर रहा हूं:

$('.subscribe-form').submit(function(e){
    var arr=$(this).serializeArray();
    var values={};
    for(i in arr){values[arr[i]['name']]=arr[i]['value']}
    console.log(values);
    return false;
});

Answer 19

मुझे उम्मीद है कि यह सहायक है, साथ ही सबसे आसान भी है।

 $("#form").submit(function (e) { 
    e.preventDefault();
    input_values =  $(this).serializeArray();
  });

Comments

अजीब तरह से यह jquery के नवीनतम संस्करण 3.4.1 पर काम नहीं किया

— रिले

Answer 20

जब मुझे सभी फॉर्म फ़ील्ड के साथ एक अजाक्स कॉल करने की आवश्यकता थी, तो मुझे समस्या थी : इनपुट चयनकर्ता सभी चेकबॉक्स वापस कर रहा है या नहीं, उन्हें चेक किया गया था। मैंने एक नया चयनकर्ता को केवल जमा करने योग्य फॉर्म तत्वों को प्राप्त करने के लिए जोड़ा:

$.extend($.expr[':'],{
    submitable: function(a){
        if($(a).is(':checkbox:not(:checked)'))
        {
            return false;
        }
        else if($(a).is(':input'))
        {
            return true;
        }
        else
        {
            return false;
        }
    }
});

उपयोग:

$('#form_id :submitable');

मैंने इसे अभी तक कई चुनिंदा बॉक्सों के साथ परीक्षण नहीं किया है, लेकिन यह एक मानक सबमिट करने के तरीके में सभी फॉर्म फ़ील्ड प्राप्त करने के लिए काम करता है।

मैंने इसका उपयोग OpenCart साइट पर उत्पाद विकल्पों को अनुकूलित करते समय चेकबॉक्स और टेक्स्ट फ़ील्ड के साथ-साथ मानक चयन बॉक्स प्रकार को शामिल करने के लिए किया था।

Answer 21

क्रमबद्ध () सबसे अच्छी विधि है। @ क्रिस्टोफर पार्कर का कहना है कि Nickf's anwser अधिक हासिल करता है, हालांकि यह ध्यान में नहीं रखता है कि इस फॉर्म में textarea और मेनू का चयन हो सकता है। यह बेहतर है कि सीरियलाइज़ () का उपयोग करें और फिर उसमें हेरफेर करें जैसा कि आपको आवश्यक है। अनुक्रमिक () से डेटा का उपयोग या तो अजाक्स पोस्ट में किया जा सकता है या प्राप्त किया जा सकता है, इसलिए वहां कोई समस्या नहीं है।

Answer 22

आशा है कि यह किसी की मदद करता है। :)

// This html:
// <form id="someCoolForm">
// <input type="text" class="form-control" name="username" value="...." />
// 
// <input type="text" class="form-control" name="profile.first_name" value="...." />
// <input type="text" class="form-control" name="profile.last_name" value="...." />
// 
// <input type="text" class="form-control" name="emails[]" value="..." />
// <input type="text" class="form-control" name="emails[]" value=".." />
// <input type="text" class="form-control" name="emails[]" value="." />
// </form>
// 
// With this js:
// 
// var form1 = parseForm($('#someCoolForm'));
// console.log(form1);
// 
// Will output something like:
// {
// username: "test2"
// emails:
//   0: ".@....com"
//   1: "...@........com"
// profile: Object
//   first_name: "..."
//   last_name: "..."
// }
// 
// So, function below:

var parseForm = function (form) {

    var formdata = form.serializeArray();

    var data = {};

    _.each(formdata, function (element) {

        var value = _.values(element);

        // Parsing field arrays.
        if (value[0].indexOf('[]') > 0) {
            var key = value[0].replace('[]', '');

            if (!data[key])
                data[key] = [];

            data[value[0].replace('[]', '')].push(value[1]);
        } else

        // Parsing nested objects.
        if (value[0].indexOf('.') > 0) {

            var parent = value[0].substring(0, value[0].indexOf("."));
            var child = value[0].substring(value[0].lastIndexOf(".") + 1);

            if (!data[parent])
                data[parent] = {};

            data[parent][child] = value[1];
        } else {
            data[value[0]] = value[1];
        }
    });

    return data;
};

Answer 23

सभी उत्तर अच्छे हैं, लेकिन अगर कोई ऐसा क्षेत्र है जिसे आप उस फ़ंक्शन में अनदेखा करना चाहते हैं? आसान है, क्षेत्र को एक संपत्ति दें, उदाहरण के लिए ign_this:

<input type="text" name="some_name" ignore_this>

और अपने सीरियल में

if(!$(name).prop('ignorar')){
   do_your_thing;
}

यही तरीका है कि आप कुछ क्षेत्रों की उपेक्षा करते हैं।

Comments

यह उत्तर की तुलना में टिप्पणी का अधिक है क्योंकि यह मूल प्रश्न का उत्तर नहीं देता है।

— वाई हा ली

शायद इसलिए कि उसके पास पहले से ही बहुत सारे जवाब हैं? यह उनके द्वारा प्राप्त उत्तरों का पूरक है।

— मार्सेलो रोचा

मैं अनिवार्य की तरह एक वर्ग के नाम के साथ इस लागू करेगा इनपुट को भरा जाना चाहिए तो मैं देख सकते हैं। $('.mandatory');और!$('.mandatory');

— lharby

बदलें ignore_thisकरने data-ignore-this="true"के बजाय अपने खुद के गुण है कि सत्यापित करें W3C नहीं बनाने का

— zanderwar

Answer 24

निम्नलिखित कोड का प्रयास करें:

jQuery("#form").serializeArray().filter(obje => 
obje.value!='').map(aobj=>aobj.name+"="+aobj.value).join("&")

Comments

कृपया अपने उत्तर की व्याख्या करें

— लिंग वू

Answer 25

कई चुनिंदा तत्वों ( <select multiple="multiple">) के लिए, मैंने इसे काम करने के लिए @ जैसन नोरवुड-यंग से समाधान को संशोधित किया।

उत्तर (जैसा कि पोस्ट किया गया) केवल पहले तत्व से मूल्य लेता है जो चयनित था, उनमें से सभी नहीं । इसने भी इनिशियलाइज़ या रिटर्न नहीं किया data, पूर्व ने जावास्क्रिप्ट एरर को फेंक दिया।

यहाँ नया संस्करण है:

function _get_values(form) {
  let data = {};
  $(form).find('input, textarea, select').each(function(x, field) {
    if (field.name) {
      if (field.name.indexOf('[]') > 0) {
        if (!$.isArray(data[field.name])) {
          data[field.name] = new Array();
        }
        for (let i = 0; i < field.selectedOptions.length; i++) {
          data[field.name].push(field.selectedOptions[i].value);
        }

      } else {
        data[field.name] = field.value;
      }
    }

  });
  return data
}

उपयोग:

_get_values($('#form'))

नोट: आपको बस यह सुनिश्चित करने की आवश्यकता है कि nameआपके चयन में []से एक ने इसे समाप्त कर दिया है, उदाहरण के लिए:

<select name="favorite_colors[]" multiple="multiple">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Answer 26

$("#form-id").submit(function (e) { 
  e.preventDefault();
  inputs={};
  input_serialized =  $(this).serializeArray();
  input_serialized.forEach(field => {
    inputs[field.name] = field.value;
  })
  console.log(inputs)
});