JQuery ব্যবহার করে ফর্ম ইনপুট ক্ষেত্রগুলি অর্জন করবেন?

Question

অনেক ইনপুট ক্ষেত্র সহ আমার একটি ফর্ম রয়েছে।

আমি যখন jQuery এর সাথে জমা ফর্ম ইভেন্টটি ধরি, তখন কি সেই ফর্মের সমস্ত ইনপুট ক্ষেত্রগুলি কোনও এসোসিয়েটিভ অ্যারেতে পাওয়া সম্ভব?

Comments

এটি একটি ভাল প্রশ্ন; আসলে, আমি এটি সত্যিই আশ্চর্যজনক মনে করি যে jQuery এর কোনও ফাংশন নেই যা এইটি করে does দুটি পৃথক ফর্ম্যাটে ফর্ম ডেটা পেতে ফাংশন রয়েছে, তবে আপনি জানেন, স্ক্রিপ্টিং এর জন্য সবচেয়ে সুবিধাজনক নয় ... (সম্ভবত ওভাল () কোনও ফর্ম উপাদানকে ডাকা হলে এই জাতীয় অ্যারেটি ফিরিয়ে আনতে হবে?)

— লূক মোরার

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>উপাদানগুলিতে ব্যর্থ হবে ।

দেখা যাচ্ছে যে নতুন এইচটিএমএল 5 ফর্ম ইনপুটগুলিserializeArray jQuery সংস্করণ 1.3 এ কাজ করে না। এটি সংস্করণ 1.4+ এ কাজ করে

Comments

JQuery এর নতুন সংস্করণগুলিতে, সাইমন_উইভারের উত্তরটি আরও মজবুত এবং সহজ।

— পরাক্রমশালী

@ মাইটি এবং @ সিমন_উইভার - আপনি ঠিক বলেছেন, এটি আরও শক্তিশালী পদ্ধতি, তবে ওপি যা খুঁজছিল ঠিক তা করে না। সিরিয়ালাইজ অ্যারে বৈশিষ্ট্য nameএবং সহ বস্তুর একটি অ্যারে প্রদান করে value। সিরিয়ালাইজআরাই থেকে আউটপুটটি যে কোনও বিন্যাসে প্রয়োজনীয় তা প্রক্রিয়াকরণের একটি আরও ভাল সমাধান হতে পারে।

— নিকফ

আমার মনে হয় সিরিয়ালাইজআরে () আপনি যা চান ঠিক তেমন করে এবং কোডটিও খুব কম।

— অস্পষ্টতা

প্রথম বিকল্পের জন্য, <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

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

— msumme

JQuery এপিআই ডক্স অনুসারে, .serialize()( api.jquery.com/serialize ) ফর্মের সমস্ত উপাদানকে একক স্ট্রিংয়ে একটি কোয়েরি স্ট্রিংয়ে ইউআরএল সংযুক্ত করার জন্য প্রস্তুত রাখে, মূলত জিইটি ফর্ম অনুরোধের নকল করে। এটি নিকফের উত্তর যা অর্জন করে তা সম্পাদন করতে পারে না।

— ক্রিস্টোফার পার্কার

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

— ড্যানিয়েল হান্টার

জ্ঞান মূল্যবান: .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

প্রকৃতপক্ষে, ল্যান্সের উত্তর পোষ্ট মানগুলির জন্য সংঘবদ্ধ অ্যারে অক্ষত রাখে এবং কোডের একটি সম্পূর্ণ এক লাইন নেয়।

— এমসুম্মে

আইটেম একটি অ্যারে হয় কেন? আপনি এটি একটি সরল বস্তুর মতো ব্যবহার করছেন। এখানে অ্যারের দরকার নেই

— জোনাথন মোরেলেস ভেলিজ

@ জোনাথনমোরালেস ভেলিজ ২০০৮ এর অলি এখন আর মন্তব্যের জন্য নেই। 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 স্তর 2 ফর্মডাটা অবজেক্টটি ব্যবহার করে 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] সূচীতে অ্যাক্সেস করতে হবে। তবে আইএমও এটি ডজন-লাইনের ম্যাপিং সমাধানগুলির মধ্যে একটির চেয়ে ভাল।

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

আমার একই সমস্যা ছিল এবং এটি অন্যভাবে সমাধান করা solved

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

ল্যান্স রাশিং এবং সাইমন_উইভারের উত্তর দ্বারা অনুপ্রাণিত , এটি আমার প্রিয় সমাধান solution

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

আমি এখনও একাধিক নির্বাচন বাক্সের সাথে এটি পরীক্ষা করেছি না তবে এটি স্ট্যান্ডার্ড জমা দেওয়ার পদ্ধতিতে সমস্ত ফর্ম ক্ষেত্র পাওয়ার জন্য কাজ করে।

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

Answer 21

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

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

সমস্ত উত্তরগুলি ভাল, তবে যদি এমন কোনও ক্ষেত্র থাকে যা আপনি সেই ফাংশনে উপেক্ষা করতে চান? সহজ, ক্ষেত্রটিকে একটি সম্পত্তি দিন, উদাহরণস্বরূপ উপেক্ষা করুন:

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

এবং আপনার সিরিয়ালাইজ ফাংশনে:

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

আপনি কিছু ক্ষেত্রকে এভাবে উপেক্ষা করবেন।

Comments

এটি একটি প্রশ্নের চেয়ে একটি মন্তব্য বেশি কারণ এটি মূল প্রশ্নের উত্তর দেয় না।

— ওয়াই হা লি

কারণ ইতিমধ্যে তার কাছে প্রচুর উত্তর রয়েছে? এটি তার দেওয়া উত্তরগুলির পরিপূরক।

— মার্সেলো রোচা

আমি বাধ্যতামূলক মতো শ্রেণীর নামের সাথে এটি বাস্তবায়ন করবো যদি ইনপুট অবশ্যই পূরণ করতে হয় then তবে আমি চেক করতে পারি $('.mandatory');এবং!$('.mandatory');

— ই

পরিবর্তন 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)
});