JQuery kullanarak form giriş alanları elde etmek?

Birçok girdi alanı olan bir form var.

Formu gönder olayını jQuery ile yakaladığımda, bu formun tüm girdi alanlarını ilişkilendirilebilir bir dizide almak mümkün mü?

$('#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'ın ipucu sayesinde, bunu kullanarak yapabileceğiniz başka bir yol var serializeArray:

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

Bu pasajın <select multiple>öğelerde başarısız olacağını unutmayın .

Yeni HTML 5 form girişlerininserializeArray jQuery sürüm 1.3 ile çalışmadığı anlaşılıyor . Bu sürüm 1.4 ve sonraki sürümlerinde çalışır

Bu soru üzerine partiye geç, ama bu daha da kolay:

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

});

Jquery.form eklentisi başkaları bu soru üzerine bu amaçla kadar aradıklarını ile yardımcı olabilir. İstediğinizi doğrudan yapıp yapmadığından emin değilim.

SerializeArray işlevi de vardır .

Bazen her seferinde bir tane almanın daha yararlı olduğunu düşünüyorum. Bunun için şu var:

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

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

Elements değişkeni, formdaki tüm girdileri, seçimleri, metinleri ve alan kümelerini içerecektir.

İşte başka bir çözüm, bu şekilde form hakkındaki tüm verileri alabilir ve bir sunucu tarafı çağrısında veya başka bir şeyde kullanabilirsiniz.

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

Daha sonra bunu ajax çağrılarıyla kullanabilirsiniz:

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

Umarım bu herhangi biriniz için herhangi bir kullanımdır :)

Hafif bir bükülme ile benzer bir sorun vardı ve ben bunu atmak düşündüm. Ben zaten bir form nesnesi vardı ve kolay varyantları bu yüzden formu alır bir geri arama işlevi var $('form:input'). Bunun yerine:

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

Onun benzer ama aynı değil durum, ama ben bu konu çok yararlı buldum ve sonunda bunu tuck ve başka birinin yararlı buldum umuyordum.

Çağrışımsal? Biraz çalışma yapmadan değil, genel seçicileri kullanabilirsiniz:

var items = new Array();

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

jQuery's serializeArraydevre dışı alanları içermez, bu nedenle bunlara ihtiyacınız varsa şunları deneyin:

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

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

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

Bu, XMLHttpRequest Düzey 2 FormData nesnesi kullanılarak jQuery olmadan da yapılabilir

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

var data = new FormData([form])

Onay kutularını ve radyo düğmelerini unutmayın -

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

Bu kod parçası ad yerine çalışacaktır , e-posta form alanlarınızın adını girin

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

Liste verilerini almak için kimsenin özlü bir çözüm önerisi sunmadığı veya önermediği garip görünüyor. Hemen hemen hiçbir form tek boyutlu nesneler olmayacaktır.

Bu çözümün dezavantajı, elbette, singleton nesnelerinize [0] dizininden erişilmesi gerekmesidir. Ancak IMO, düzine hat haritalama çözümlerinden birini kullanmaktan çok daha iyi.

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

Aynı sorunu yaşadım ve farklı bir şekilde çözdüm.

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

Tüm giriş alanlarının değerini döndürür. $(':input')Daha spesifik olacak şekilde değiştirebilirsiniz .

Nickf tarafından verilenle aynı çözüm , ancak dizi giriş adları dikkate alınarak ör.

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

Girişlerden birden fazla değer almanız gerekiyorsa ve girişleri birden fazla değerle tanımlamak için [] 'leri kullanıyorsanız aşağıdakileri kullanabilirsiniz:

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

Lance Rushing ve Simon_Weaver'ın cevaplarından esinlenerek , bu benim en sevdiğim çözüm.

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

Çıktı bir nesne dizisidir, ör.

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

Aşağıdaki kodla,

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

nihai çıktısı

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

Her döngü olmadan bu kodu kullanıyorum:

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

Umarım bu yardımcı olur, aynı zamanda en kolay olanıdır.

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

Tüm form alanları ile bir ajax çağrısı yapmak gerektiğinde, onlar kontrol edildi olsun ya da olmasın tüm onay kutularını döndürme : giriş seçici ile sorunları vardı . Yalnızca gönderilebilir form öğelerini almak için yeni bir seçici ekledim:

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

kullanımı:

$('#form_id :submitable');

Ben henüz çoklu seçim kutuları ile test etmedim ama standart bir gönderme olur gibi tüm form alanları almak için çalışır.

Bunu, bir OpenCart sitesindeki ürün seçeneklerini, onay kutularını ve metin alanlarını ve standart seçim kutusu türünü içerecek şekilde özelleştirirken kullandım.

serialize () en iyi yöntemdir. @ Christopher Parker, Nickf'in anwser'ının daha fazlasını başardığını söylüyor, ancak formun textarea ve belirli menüler içerebileceğini dikkate almıyor. Serialize () kullanmak ve sonra istediğiniz gibi değiştirmek çok daha iyidir. Serialize () verileri bir Ajax gönderisinde veya getinde kullanılabilir, bu yüzden orada bir sorun yoktur.

Umarım bu birine yardımcı olur. :)

// 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;
};

Tüm cevaplar iyidir, ancak bu işlevde yoksaymak istediğiniz bir alan varsa? Kolay, alana bir özellik verin, örneğin ignore_this:

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

Ve Seri Hale Getirme Fonksiyonunuzda:

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

Bazı alanları görmezden gelmenin yolu budur.

Aşağıdaki kodu deneyin:

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

Birden fazla seçme öğesi için ( <select multiple="multiple">), @Jason Norwood-Young'daki çözümü çalıştırabilmek için değiştirdim.

Yanıt (yayınlandığı gibi), değeri yalnızca seçilen ilk öğeden alır, tümünü değil . Ayrıca databir JavaScript hatası başlatmadı veya geri dönmedi .

İşte yeni sürüm:

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
}

Kullanımı:

_get_values($('#form'))

Not: Sadece emin olmanız gerekir namesenin seçme ait olan []örneğin, bunun sonuna eklenen:

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

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