Mendapatkan bentuk field input menggunakan jQuery?

Saya punya form dengan banyak field input.

Ketika saya menangkap menyerahkan formulir acara dengan jQuery, adalah mungkin untuk mendapatkan semua field input itu dalam bentuk array asosiatif?

Dave Jarvis
Pertanyaan edit 22 Juni 2010 в 2:05
Pemrograman
javascript jquery
4 Oktober 2008 в 1:34
16 tayangan
Mengomentari pertanyaan (1)
Larutan
$('#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();
    });

});

Terima kasih untuk tip dari Simon_Weaver, berikut adalah cara lain anda bisa melakukannya, dengan menggunakan serializeArray:

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

Perhatikan bahwa potongan ini akan gagal di <memilih beberapa> elemen.

Tampak bahwa baru HTML 5 form input don't bekerja dengan serializeArray di jQuery versi 1.3. Ini bekerja pada versi 1.4+

Komentar (18)

Terlambat ke pesta pada pertanyaan ini, tapi ini bahkan lebih mudah:

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

});
Komentar (7)

The jquery.form plugin dapat membantu dengan apa yang orang lain cari yang berakhir pada pertanyaan ini. I'm tidak yakin jika ini langsung melakukan apa yang anda inginkan atau tidak.

Ada juga serializeArray fungsi.

Komentar (1)

Kadang-kadang saya menemukan satu pada satu waktu adalah lebih berguna. Untuk itu, ada's ini:

var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']");
BOTJr.
Jawaban edit 24 Februari 2016 в 9:50
Komentar (1)
 
$('#myForm').bind('submit', function () {
var elemen = ini.unsur-unsur;
});

Unsur-unsur variabel ini akan berisi semua masukan, memilih, dihapus saja dan fieldsets dalam bentuk.

Komentar (0)

Berikut ini adalah solusi lain, dengan cara ini anda dapat mengambil semua data tentang bentuk dan menggunakannya dalam serverside panggilan atau sesuatu.

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

Anda kemudian dapat menggunakan ini dengan panggilan 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" );
       });
}

Semoga ini berguna bagi anda :)

Komentar (0)

Punya masalah yang sama dengan sedikit twist dan saya pikir saya'd membuang ini. Saya memiliki sebuah fungsi callback yang akan di bentuk jadi aku punya sebuah objek form yang sudah dan tidak't mudah varian $(&#39;form:input&#39;). Bukannya aku datang dengan:

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

Yang mirip tetapi tidak identik situasi, tapi saya menemukan thread ini sangat berguna dan pikir saya'd tuck ini pada akhir dan berharap orang lain menemukan itu berguna.

Komentar (0)

jQuery's serializeArray tidak termasuk bidang cacat, jadi jika anda perlu orang juga, cobalah:

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

Asosiatif? Bukan tanpa beberapa pekerjaan, tetapi anda dapat menggunakan generic penyeleksi:

var items = new Array();

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

Tampaknya aneh bahwa tak seorang pun memiliki upvoted atau mengusulkan solusi ringkas untuk mendapatkan data daftar. Hampir setiap bentuk akan menjadi satu-dimensi objek.

Kelemahan dari solusi ini adalah, tentu saja, bahwa anda singleton benda akan memiliki untuk dapat diakses di [0] indeks. Tapi IMO yang's cara yang lebih baik daripada menggunakan salah satu dari selusin-line solusi pemetaan.

var formData = $('#formId').serializeArray().reduce(function (obj, item) {
    if (obj[item.name] == null) {
        obj[item.name] = [];
    } 
    obj[item.name].push(item.value);
    return obj;
}, {});
Ryanman
Jawaban edit 31 Juli 2017 в 8:44
Komentar (0)

Don't lupa centang dan tombol radio -

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
Igor Ivancha
Jawaban edit 10 Juni 2016 в 2:11
Komentar (0)

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

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

Hal ini juga dapat dilakukan tanpa jQuery menggunakan XMLHttpRequest Level 2 FormData objek

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

var data = new FormData([form])
Komentar (0)

Solusi yang sama seperti yang diberikan oleh nickf, tapi dengan array input nama diperhitungkan misalnya

<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();
  }
});
Igor Ivancha
Jawaban edit 10 Juni 2016 в 2:10
Komentar (0)

Aku punya masalah yang sama dan diselesaikan dengan cara yang berbeda.

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

Ia mengembalikan nilai semua field input. Anda bisa mengubah $(&#39;:input&#39;) untuk lebih spesifik.

Komentar (0)

Ini bagian dari kode yang akan bekerja bukan nama, masukkan email anda di kolom formulir nama

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

Jika anda perlu untuk mendapatkan beberapa nilai dari input dan anda're menggunakan []'s untuk menentukan input dengan beberapa nilai, anda dapat menggunakan berikut:

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

Terinspirasi oleh jawaban dari Tombak Bergegas dan Simon_Weaver, ini adalah favorit saya solusi.

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

Output adalah array dari objek, misalnya

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

Dengan kode di bawah ini,

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

hasil akhir akan

{"start-time":"11:01", "end-time":"11:01"}
T.Liu
Jawaban edit 23 Agustus 2017 в 5:53
Komentar (0)

Saya menggunakan kode ini tanpa setiap loop:

$('.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;
});
Roman Grinev
Jawaban edit 18 April 2018 в 5:30
Komentar (0)

Saya harap ini membantu, serta termudah.

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

Ketika saya diperlukan untuk melakukan panggilan ajax dengan semua kolom formulir, saya punya masalah dengan :input selector kembali semua kotak centang apakah atau tidak mereka diperiksa. Saya menambahkan pemilih baru untuk hanya mendapatkan submit-mampu membentuk elemen-elemen:

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

penggunaan:

$('#form_id :submitable');

I've tidak diuji dengan beberapa pilih kotak belum sekalipun tetapi bekerja untuk mendapatkan semua kolom formulir dengan cara standar yang akan menyerahkan.

Saya menggunakan ini ketika menyesuaikan pilihan produk di situs OpenCart untuk memasukkan kotak centang dan bidang teks serta standar pilih jenis kotak.

Komentar (0)