javascript - مكتبة - الحصول على حقول إدخال النموذج باستخدام jQuery؟




تحميل مكتبة jquery (15)

لدي نموذج يحتوي على العديد من حقول الإدخال.

عندما ألتقط حدث إرسال النموذج باستخدام jQuery ، هل من الممكن الحصول على جميع حقول الإدخال الخاصة بهذا النموذج في مصفوفة ترابطية؟


آمل أن يساعد هذا شخص ما. :)

// 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: "[email protected]"
//   1: "[email protected]"
// 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;
};

أستخدم هذا الرمز بدون كل حلقة:

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

التسلسل () هو أفضل طريقة. @ كريستوفر باركر يقول أن nuff's anwser ينجز أكثر ، ومع ذلك فإنه لا يأخذ في الاعتبار أن النموذج قد يحتوي على textarea واختيار القوائم. من الأفضل استخدام serialize () ومن ثم التعامل مع ما تحتاج إليه. يمكن استخدام البيانات من serialize () إما في منشور Ajax أو الحصول عليها ، لذلك لا توجد مشكلة هناك.


ترابطي؟ لا يخلو من بعض العمل ، ولكن يمكنك استخدام المحددات العامة:

var items = new Array();

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

عندما احتجت إلى إجراء مكالمة أجاكس مع جميع حقول النموذج ، واجهت مشكلات في : محدد الإدخال الذي يعرض جميع مربعات الاختيار سواء تم فحصها أم لا. لقد أضفت مُحدِّدًا جديدًا للحصول على عناصر النموذج المُقدَّم:

$.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 لتضمين مربعات الاختيار والحقول النصية بالإضافة إلى نوع مربع التحديد القياسي.


في بعض الأحيان أجد الحصول على واحد في وقت أكثر فائدة. لذلك ، هناك هذا:

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

كان لديه مشكلة مماثلة مع تطور طفيف واعتقدت أنني سوف رمي هذا. لدي وظيفة رد اتصال تحصل على النموذج لذلك كان لدي كائن نموذج بالفعل ولم أستطع استخدام المتغيرات السهلة على $('form:input') . بدلا من ذلك توصلت مع:

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

في وضع مماثل ولكن ليس متطابقة ، لكنني وجدت هذا الموضوع مفيدة للغاية ، وأعتقد أنني كنت دس هذا على النهاية ، ونأمل أن يجد شخص آخر أنه من المفيد.


كان لي نفس المشكلة وحلها بطريقة مختلفة.

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

تقوم بإرجاع قيمة كافة حقول الإدخال. يمكنك تغيير $(':input') لتكون أكثر تحديدًا.


لا يتضمن jQuery's serializeArray حقول معطل ، لذلك إذا كنت بحاجة إلى هذه الحقول أيضًا ، فحاول:

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

مستوحاة من إجابات لانس Simon_Weaver ، هذا هو الحل المفضل لدي.

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

هنا هو حل آخر ، وبهذه الطريقة يمكنك جلب جميع البيانات عن النموذج واستخدامها في مكالمة على جانب الخادم أو شيء من هذا القبيل.

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

يمكنك بعد ذلك استخدام هذا مع مكالمات ajax:

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

آمل أن يكون هذا من أي استخدام لأي واحد منكم :)


يبدو من الغريب أن أحداً لم يغفل أو اقترح حلاً موجزًا ​​للحصول على بيانات القائمة. بالكاد ستكون أي أشكال كائنات أحادية البعد.

الجانب السلبي من هذا الحل هو ، بالطبع ، أنه سيكون من الضروري الوصول إلى كائنات المفردات الخاصة بك في فهرس [0]. لكن المنظمة البحرية الدولية أفضل بكثير من استخدام واحد من أكثر من 12 خطًا لحلول الخرائط.

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


ستعمل هذه الشفرة بدلاً من الاسم ، وسيقوم البريد الإلكتروني بإدخال اسم حقول النموذج الخاص بك

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

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

});

بفضل تلميح من Simon_Weaver ، إليك طريقة أخرى يمكنك القيام بها ، باستخدام serializeArray :

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

لاحظ أن هذا المقتطف سيفشل في <select multiple> elements.

يبدو أن مدخلات نموذج HTML 5 الجديدة لا تعمل مع serializeArray في الإصدار jQuery 1.3. هذا يعمل في الإصدار 1.4+







jquery