Bagaimana saya bisa mendapatkan data formulir dengan JavaScript / jQuery?


404

Apakah ada cara sederhana, satu-baris untuk mendapatkan data formulir seperti jika akan dikirimkan dengan cara klasik HTML saja?

Sebagai contoh:

<form>
    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />
    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
</form>

Keluaran:

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

Sesuatu seperti ini terlalu sederhana, karena tidak (dengan benar) memasukkan teks, pilihan, tombol radio dan kotak centang:

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

3
Pertanyaan lain yang mirip dengan ini: stackoverflow.com/questions/169506/…
Marcelo Rodovalho

Jawaban:


431
$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

demo


15
Tutup, tapi mungkin sesuatu yang mengembalikan array dengan pasangan nilai kunci dan bukan string tunggal?
Bart van Heukelom

80
Nvm, menemukannya di komentar untuk fungsi serialize (). Ini disebut serializeArray. Ini mengembalikan array array (yang berisi entri "nama" dan "nilai") tetapi itu harus cukup mudah untuk diubah.
Bart van Heukelom

22
Dan menggunakan perpustakaan garis bawah dapat diubah menggunakan:_.object($("#myform").serializeArray().map(function(v) {return [v.name, v.value];} ))
MhdSyrwan

8
@ BartvanHeukelom Saya tahu ini 4 tahun kemudian, tetapi .serializeArray () akan mengembalikan array.
TJ WealthEngine API Evangelist

6
Pastikan setiap tag input menyertakan atribut nama, jika tidak maka tidak akan mengembalikan apa pun.
Eugene Kulabuhov

507

Gunakan $('form').serializeArray(), yang mengembalikan array :

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

Opsi lainnya adalah $('form').serialize(), yang mengembalikan string :

"foo=1&bar=xxx&this=hi"

Lihatlah demo jsfiddle ini


91
serializeArrayakan jauh lebih berguna jika mengembalikan objek dengan pasangan kunci-nilai
GetFree

8
Saya setuju bahwa suatu objek akan ideal. Namun, ada masalah - kunci dibolehkan memiliki beberapa nilai. Apakah Anda akan mengembalikan objek kunci- "array nilai", atau kunci- "nilai pertama" atau yang lainnya? Saya pikir orang-orang jQuery tidak memilih satu pun di atas :)
Paul

Waspadai masalah dengan beberapa nilai (seperti @Paul sebutkan di atas), kotak centang dan beberapa input dengan name="multiple[]"tidak berfungsi. Solusi untuk metode POST adalah sama, cukup gunakan $ ('form'). Serialize (). Juga metode POST tidak memiliki batas 2000 karakter seperti halnya GET di sebagian besar browser, sehingga dapat digunakan bahkan untuk data yang cukup besar.
Artru

Harap perhatikan juga bahwa untuk mencatat nilai dari input formulir apa pun, input tersebut harus memiliki nameatribut.
Chris - Jr

@ Dapatkan Mengapa tidak menggunakan fungsi peta jQuery saja? function getFormData (form) {var rawJson = form.serializeArray (); var model = {}; $ .map (rawJson, function (n, i) {model [n ['name']] = n ['value'];}); model pengembalian; }
Tom McDonough

196

Jawaban yang diperbarui untuk 2014: HTML5 FormData melakukan ini

var formData = new FormData(document.querySelector('form'))

Anda kemudian dapat memposting formData persis seperti itu - itu berisi semua nama dan nilai yang digunakan dalam formulir.


13
Plus satu karena FormData baik dan berguna, tetapi perlu dicatat bahwa jika Anda ingin BACA data di dalam FormData itu tidak begitu mudah (lihat stackoverflow.com/questions/7752188/… )
StackExchange What The Heck

1
Perlu diingat FormData adalah bagian dari fitur-fitur canggih XMLHttpRequest (sebelumnya dikenal sebagai XMLHttpRequest Level 2) sehingga Anda harus mengandalkan polyfill untuk Internet Explorer <10. caniuse.com/#feat=xhr2
Pier-Luc Gendreau

3
@yochannah, tidak begitu. Tentu, seseorang tidak bisa hanya mengakses dan mengedit data seperti objek normal, tetapi masih sepele untuk mendapatkan data. Lihat entries()metode [halaman MDN ].
Web dan Flow

@ Web dan Aliran terima kasih untuk menunjukkan ini! Saya suka ketika browser menambahkan fitur baru dan berguna :) kali, mereka a-berubah.
StackExchange What The Heck

Saya mencoba menggunakan FormData untuk mengirim objek ke skrip Flask-python saya, tetapi tampaknya tidak akan muncul sebagai objek permintaan normal yang dapat saya ekstrak. Dapatkah seseorang menunjuk ke penjelasan tentang langkah-langkah khusus untuk menanganinya di sisi server? Di situlah tempat itu terasa kosong bagiku.
manisha

181

Berdasarkan jQuery.serializeArray, mengembalikan pasangan nilai kunci.

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

12
Pasangan kunci-nilai di sini, teman-teman, semuanya, kemari! Itu emas !!! Terima kasih! Jika saya ingin nilai elemen bernama "pengecer", saya melakukan ini console.log ($ ('# form'). SerializeArray (). Kurangi (fungsi (obj, item) {obj [item.name] = item. value; return obj;}, {}) ['pengecer']);
Yevgeniy Afanasyev

Saya membuat metode JQuery kemarin berdasarkan jawaban ini tetapi bekerja dengan multiselect dan input array (dengan nama 'example []'). Anda dapat menemukannya di jawaban saya di bawah ini. Bagaimanapun, pendekatan neuront yang bagus, terima kasih! :)
manuman94

Yang ini paling cocok untuk saya, dari semua jawaban!
VPetrovic

IMHO ini adalah jawaban terbaik!
Rahul

74
document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get('foo'), for example.
  // Don't forget e.preventDefault() if you want to stop normal form .submission
});

Ini adalah jawaban yang membingungkan, tetapi izinkan saya menjelaskan mengapa ini adalah solusi yang lebih baik:

  • Kami benar menangani pengiriman formulir daripada menekan tombol. Beberapa orang suka menekan enter pada bidang. Beberapa orang menggunakan perangkat input alternatif seperti input ucapan atau perangkat aksesibilitas lainnya. Menangani formulir kirim dan Anda menyelesaikannya dengan benar untuk semua orang.

  • Kami sedang menggali data formulir untuk formulir aktual yang dikirimkan. Jika Anda mengubah pemilih formulir Anda nanti, Anda tidak perlu mengubah pemilih untuk semua bidang. Selain itu, Anda mungkin memiliki beberapa formulir dengan nama input yang sama. Tidak perlu bingung dengan ID yang berlebihan dan yang tidak, cukup lacak input berdasarkan formulir yang dikirimkan. Ini juga memungkinkan Anda untuk menggunakan penangan peristiwa tunggal untuk berbagai bentuk jika itu sesuai untuk situasi Anda.

  • Antarmuka FormData cukup baru, tetapi didukung dengan baik oleh browser. Ini cara yang bagus untuk membangun pengumpulan data untuk mendapatkan nilai nyata dari apa yang ada di formulir. Tanpa itu, Anda harus mengulang semua elemen (seperti dengan form.elements) dan mencari tahu apa yang diperiksa, apa yang tidak, apa nilainya, dll. Sangat mungkin jika Anda memerlukan dukungan browser lama, tetapi FormData antarmuka lebih sederhana.

  • Saya menggunakan ES6 di sini ... bukan persyaratan dengan cara apa pun, jadi ubah kembali agar kompatibel dengan ES5 jika Anda memerlukan dukungan browser lama.


fyi, objek FormData tidak mengekspos nilainya. Untuk mendapatkan objek sederhana darinya, lihat stackoverflow.com/questions/41431322/…
phil294

2
@Blauhirn Nonsense, tentu saja mereka mengekspos nilai-nilainya. Kode dalam jawaban saya berfungsi. Kamu harus mencobanya. Di sini, saya membuat biola untuk Anda: jsfiddle.net/zv9s1xq5 Jika Anda menginginkan iterator, gunakan formData.entries().
Brad

Saya tahu ini berfungsi, tetapi properti tidak dapat diakses dengan kunci. Misalnya, formData.foo tidak ditentukan. Seperti yang terlihat dalam jawaban Anda, .get() perlu dipanggil untuk apa yang menurut saya tidak nyaman. Mungkin "tidak mengekspos" datang dengan cara yang salah. Jadi, untuk menghasilkan sesuatu seperti { foo: 'bar' }dari suatu submitacara, Anda perlu mengulanginya secara manual. Karena itu . To get a plain object from it, see [link].
phil294

1
@ Belauhirn Anda salah tentang itu. XMLHttpRequest mendukung FormData secara langsung. xhr.send(formData);
Brad

1
@ Belauhirn JSON.stringify([...formData]) Atau, jika Anda ingin kunci / nilai Anda terpisah ... [...formData].reduce((prev, cur) => { prev[cur[0]] = cur[1]; return prev;}, {})
Brad

25

gunakan .serializeArray () untuk mendapatkan data dalam format array dan kemudian mengubahnya menjadi objek:

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

Ini menimpa kotak centang saya jika saya memiliki sesuatu seperti <input type="checkbox" name="someList" value="one" /> <input type="checkbox" name="someList" value="two" />. Jika keduanya dicentang, objek hanya berisi nilai kotak centang kedua.
dmathisen

2
Bukankah ini kasus di mana someListseharusnya type="radio"?
dylanjameswagner

terbalik karena jawaban yang diterima tidak mengembalikan objek dengan kunci sebagai:name:value
Matt-the-Marxist

24

Inilah soluton yang sangat sederhana dan singkat yang bahkan tidak memerlukan Jquery.

var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;

1
Ini tidak berfungsi dengan tombol radio: opsi terakhir selalu yang disimpan postData.
Kyle Falconer

3
Terima kasih telah memberikan kami jawaban non jquery.
Glen Pierce

24

Ini tahun 2019 dan ada cara yang lebih baik untuk melakukan ini:

const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());

atau jika Anda menginginkan Obyek polos sebagai gantinya

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

meskipun perhatikan bahwa ini tidak akan berfungsi dengan kunci duplikat seperti yang Anda dapatkan dari kotak centang multi-pilih dan duplikat dengan nama yang sama.


Sama sekali. Meskipun, saya tidak mendapatkan array untuk daftar input yang semuanya memiliki nama yang sama yang berarti saya harus menggunakan document.getElementsByClassNamedan untuk loop tetapi hei, masih lebih bagus daripada memerlukan jQuery dll
alphanumeric0101

1
Jawaban ini adalah favorit saya. Tetapi harus dibaca document.querySelectorbukan hanya querySelector.
adabru

Catatan "FormData hanya akan menggunakan bidang input yang menggunakan atribut nama" - dari MDN
binaryfunt


13
$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

selain itu, Anda mungkin ingin melihat serialize () ;


13

Saya menggunakan ini:

Plugin jQuery

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

Formulir HTML

<form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

Dapatkan Data

var myData = $("#myForm").getFormData();

Perhatikan bahwa plugin ini tidak berfungsi untuk kasus di mana terdapat beberapa entri input formulir dengan nama yang sama. Entri terakhir akan menggantikan yang sebelumnya sedangkan perilaku yang diharapkan adalah untuk mendapatkan semua nilai sebagaiArray
Milli

1
Hanya catatan bahwa setahun kemudian saya sekarang berpikir ini adalah jawaban yang mengerikan dan tidak ada yang harus menggunakannya Seperti komentar sebelumnya mengatakan, hal-hal seperti tombol radio tidak akan berfungsi. Ada jawaban yang lebih baik di atas, gunakan salah satunya.
Dustin Poissant

11

Berikut ini adalah implementasi hanya JavaScript yang berfungsi dengan benar menangani kotak centang, tombol radio, dan slider (mungkin tipe input lain juga, tapi saya hanya menguji ini).

function setOrPush(target, val) {
    var result = val;
    if (target) {
        result = [target];
        result.push(val);
    }
    return result;
}

function getFormResults(formElement) {
    var formElements = formElement.elements;
    var formParams = {};
    var i = 0;
    var elem = null;
    for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
            case 'submit':
                break;
            case 'radio':
                if (elem.checked) {
                    formParams[elem.name] = elem.value;
                }
                break;
            case 'checkbox':
                if (elem.checked) {
                    formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
                }
                break;
            default:
                formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
    }
    return formParams;
}

Contoh kerja:

    function setOrPush(target, val) {
      var result = val;
      if (target) {
        result = [target];
        result.push(val);
      }
      return result;
    }

    function getFormResults(formElement) {
      var formElements = formElement.elements;
      var formParams = {};
      var i = 0;
      var elem = null;
      for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
          case 'submit':
            break;
          case 'radio':
            if (elem.checked) {
              formParams[elem.name] = elem.value;
            }
            break;
          case 'checkbox':
            if (elem.checked) {
              formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
            }
            break;
          default:
            formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
      }
      return formParams;
    }

    //
    // Boilerplate for running the snippet/form
    //

    function ok() {
      var params = getFormResults(document.getElementById('main_form'));
      document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' ');
    }

    (function() {
      var main_form = document.getElementById('main_form');
      main_form.addEventListener('submit', function(event) {
        event.preventDefault();
        ok();
      }, false);
    })();
<form id="main_form">
  <div id="questions_wrapper">
    <p>what is a?</p>
    <div>
      <input type="radio" required="" name="q_0" value="a" id="a_0">
      <label for="a_0">a</label>
      <input type="radio" required="" name="q_0" value="b" id="a_1">
      <label for="a_1">b</label>
      <input type="radio" required="" name="q_0" value="c" id="a_2">
      <label for="a_2">c</label>
      <input type="radio" required="" name="q_0" value="d" id="a_3">
      <label for="a_3">d</label>
    </div>
    <div class="question range">
      <label for="a_13">A?</label>
      <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl">
      <datalist id="q_3_dl">
        <option value="0"></option>
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option value="7"></option>
        <option value="8"></option>
        <option value="9"></option>
        <option value="10"></option>
      </datalist>
    </div>
    <p>A and/or B?</p>
    <div>
      <input type="checkbox" name="q_4" value="A" id="a_14">
      <label for="a_14">A</label>
      <input type="checkbox" name="q_4" value="B" id="a_15">
      <label for="a_15">B</label>
    </div>
  </div>
  <button id="btn" type="submit">OK</button>
</form>
<div id="results_wrapper"></div>

edit:

Jika Anda mencari implementasi yang lebih lengkap, maka lihatlah bagian dari proyek yang saya buat ini . Saya akan memperbarui pertanyaan ini pada akhirnya dengan solusi lengkap yang saya buat, tetapi mungkin ini akan membantu seseorang.


1
Solusi yang bagus :) Saya menemukan satu bug, dengan fungsi setOrPush. Itu tidak termasuk pemeriksaan untuk melihat apakah target sudah array, menyebabkan pembuatan array bersarang dalam kasus beberapa kotak centang dicentang dengan nama yang sama.
Wouter van Dam

@KyleFalconer Bagus! Mengapa Anda tidak menggabungkan kotak saklar untuk radio dan kotak centang - mereka akan bekerja dengan benar (saya kira).
Ethan

@ Ethan Itu karena kotak centang dapat memiliki beberapa nilai yang dipilih dan radio hanya dapat memiliki satu nilai yang dipilih, jadi cara saya menyimpan perubahan nilai.
Kyle Falconer

@KyleFalconer Ya, saya mengerti itu. Kode untuk menangani 'kotak centang' juga menangani pilihan tunggal yang mungkin untuk 'radio', berdasarkan rutinitas 'SetOrPush'.
Ethan

@ Ethan Oh saya rasa saya tahu apa yang Anda katakan. Itu bisa dilakukan dengan cara apa pun, tapi saya pikir saya melakukannya dengan cara ini hanya karena saya ingin hanya satu nilai, bukan array nilai.
Kyle Falconer

9

Jika Anda menggunakan jQuery, berikut adalah sedikit fungsi yang akan melakukan apa yang Anda cari.

Pertama, tambahkan ID ke formulir Anda (kecuali jika itu adalah satu-satunya formulir pada halaman, maka Anda bisa menggunakan 'formulir' sebagai permintaan dom)

<form id="some-form">
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
    var out = {};
    var s_data = $(dom_query).serializeArray();
    //transform into simple data/value object
    for(var i = 0; i<s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData('#some-form'));
</script>

Outputnya akan terlihat seperti:

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}

7

Anda juga bisa menggunakan Objek FormData ; Objek FormData memungkinkan Anda mengkompilasi satu set pasangan kunci / nilai untuk dikirim menggunakan XMLHttpRequest. Ini terutama dimaksudkan untuk digunakan dalam mengirim data formulir, tetapi dapat digunakan secara independen dari formulir untuk mengirimkan data kunci.

        var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);

Terima kasih, tetapi bagaimana jika Anda tidak memiliki ID? Bagaimana jika Anda memiliki formulir sebagai objek JQuery? var form = $ (this) .closest ('form'); ? Haruskah var formElement = document.getElementById (form [0]); bekerja sebagai gantinya baris pertama Anda? Yah itu tidak berfungsi, sayangnya. Apa kamu tahu kenapa?
Yevgeniy Afanasyev

Sebenarnya FormData tidak didukung oleh semua browser :( jadi lebih baik gunakan pendekatan yang berbeda
numediaweb

Terima kasih. Saya menggunakan chrome terbaru dan masih tidak berfungsi. Jadi saya pergi dengan jawaban #neuront dari atas sana.
Yevgeniy Afanasyev

6

Ini akan menambahkan semua bidang formulir ke objek JavaScript "res":

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})

Mungkin karena jawaban yang sama persis ini sudah diposting pada tahun 2010.
nathanvda

Saya tidak tahu itu. Untuk jawaban sesingkat ini, ini tidak mengejutkan. Meski begitu, di mana rujukannya?
gamliela

Serius? Anda tidak percaya komentar saya tanpa referensi dan Anda bahkan tidak bisa melihat daftar jawaban untuk melihat apakah mereka sama? stackoverflow.com/a/2276469/216513
nathanvda

Saya pikir Anda bermaksud menjawab pertanyaan lain. Saya tidak ingat sekarang detail dan alasan saya; mungkin karena itu tidak persis sama
gamliela

1
Jawaban sempurna untuk seseorang yang menginginkannya berfungsi untuk input, pilih beberapa dan textarea. Karena, menggunakan serialisasi Anda tidak akan mendapatkan semua item yang dipilih dalam tag pilih. Tapi, menggunakan .val () Anda akan mendapatkan apa yang Anda inginkan sebagai array. Sederhana, jawaban langsung ke depan.
Sailesh Kotha

6

Saya telah menyertakan jawaban untuk juga memberikan kembali objek yang diperlukan.

function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};

$.map(rawJson, function (n, i) {
    model[n['name']] = n['value'];
});

return model;
}

Ini tidak akan menangani array sama sekali; foo[bar][] = 'qux'harus bersambung ke { foo: { bar: [ 'qux' ] } }.
amphetamachine

6

Berdasarkan respons neuront, saya membuat metode JQuery sederhana yang mendapatkan formulir data dalam pasangan nilai kunci tetapi berfungsi untuk multi-seleksi dan untuk input array dengan nama = 'example []'.

Beginilah cara ini digunakan:

var form_data = $("#form").getFormObject();

Anda dapat menemukan contoh di bawah ini tentang definisi dan cara kerjanya.

// Function start
$.fn.getFormObject = function() {
    var object = $(this).serializeArray().reduce(function(obj, item) {
        var name = item.name.replace("[]", "");
        if ( typeof obj[name] !== "undefined" ) {
            if ( !Array.isArray(obj[name]) ) {
                obj[name] = [ obj[name], item.value ];
            } else {
               obj[name].push(item.value);
            }
        } else {
            obj[name] = item.value;
        }
        return obj;
    }, {});
    return object;
}
// Function ends

// This is how it's used
$("#getObject").click( function() {
  var form_data = $("#form").getFormObject();
  console.log(form_data);
});
/* Only to make view better ;) */
#getObject {
  padding: 10px;
  cursor:pointer;
  background:#0098EE;
  color:white;
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id="form">
  <input type="text" name="text" value="Hola amigo" /> 
  
  <input type="text" name="text_array[]" value="Array 1" /> 
  <input type="text" name="text_array[]" value="Array 2" /> 
  <input type="text" name="text_array[]" value="Array 3" /> 
  
  <select name="multiselect" multiple>
    <option name="option1" selected> option 1 </option>
    <option name="option2" selected> option 2 </option>
  </select>
  
  <input type="checkbox" name="checkbox" value="checkbox1" checked/>
  <input type="checkbox" name="checkbox" value="checkbox2" checked/>
  
  <input type="radio" name="radio" value="radio1" checked/>
  <input type="radio" name="radio" value="radio2"/>

</form>

<div id="getObject"> Get object (check the console!) </div>


5
var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});

4
function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        if(indexed_array[n['name']] == undefined){
            indexed_array[n['name']] = [n['value']];
        }else{
            indexed_array[n['name']].push(n['value']);
        }
    });

    return indexed_array;
}

4

Anda dapat menggunakan fungsi ini untuk memiliki objek atau JSON dari formulir.

untuk menggunakannya:

var object = formService.getObjectFormFields("#idform");

 function  getObjectFormFields(formSelector)
        {
            /// <summary>Função que retorna objeto com base nas propriedades name dos elementos do formulário.</summary>
            /// <param name="formSelector" type="String">Seletor do formulário</param>

            var form = $(formSelector);

            var result = {};
            var arrayAuxiliar = [];
            form.find(":input:text").each(function (index, element)
            {
                var name = $(element).attr('name');

                var value = $(element).val();
                result[name] = value;
            });

            form.find(":input[type=hidden]").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });


            form.find(":input:checked").each(function (index, element)
            {
                var name;
                var value;
                if ($(this).attr("type") == "radio")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    result[name] = value;
                }
                else if ($(this).attr("type") == "checkbox")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    if (result[name])
                    {
                        if (Array.isArray(result[name]))
                        {
                            result[name].push(value);
                        } else
                        {
                            var aux = result[name];
                            result[name] = [];
                            result[name].push(aux);
                            result[name].push(value);
                        }

                    } else
                    {
                        result[name] = [];
                        result[name].push(value);
                    }
                }

            });

            form.find("select option:selected").each(function (index, element)
            {
                var name = $(element).parent().attr('name');
                var value = $(element).val();
                result[name] = value;

            });

            arrayAuxiliar = [];
            form.find("checkbox:checked").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = arrayAuxiliar.push(value);
            });

            form.find("textarea").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });

            return result;
        }


2
Meskipun tautan ini dapat menjawab pertanyaan, lebih baik untuk memasukkan bagian-bagian penting dari jawaban di sini dan memberikan tautan untuk referensi. Jawaban hanya tautan dapat menjadi tidak valid jika halaman tertaut berubah. - Dari Ulasan
Wahyu Kristianto

Tetapi tautan ini memiliki fungsi untuk membantu (saya kira). Tapi saya akan meletakkan kode waktu berikutnya.
Marcos Costa

3

Saya menulis perpustakaan untuk mengatasi masalah ini: JSONForms . Dibutuhkan formulir, melewati setiap input dan membangun objek JSON yang dapat Anda baca dengan mudah.

Katakanlah Anda memiliki formulir berikut:

<form enctype='application/json'>
  <input name='places[0][city]' value='New York City'>
  <input type='number' name='places[0][population]' value='8175133'>
  <input name='places[1][city]' value='Los Angeles'>
  <input type='number' name='places[1][population]' value='3792621'>
  <input name='places[2][city]' value='Chicago'>
  <input type='number' name='places[2][population]' value='2695598'>
</form>

Melewati formulir ke metode penyandian JSONForms mengembalikan Anda objek berikut:

{
  "places": [
    {
      "city": "New York City",
      "population": 8175133
    },
    {
      "city": "Los Angeles",
      "population": 3792621
    },
    {
      "city": "Chicago",
      "population": 2695598
    }
  ]
}

Ini demo dengan formulir Anda.


Terlihat dan bekerja dengan baik, terima kasih. Hanya satu hal, versi minified yang memanggil file peta, harus berupa imo opsional.
adi518

2

$( "form" ).bind( "submit", function(e) {
    e.preventDefault();
    
    console.log(  $(this).serializeObject() );    

    //console.log(  $(this).serialize() );
    //console.log(  $(this).serializeArray() );

});


$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();

    $.each( a, function() {
        if ( o[this.name] !== undefined) 
        {
            if ( ! o[this.name].push ) 
            {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        }
        else 
        {
            o[this.name] = this.value || '';
        }
    });

    return o;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<form>

    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />

    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
    </select>

    <input type="submit" value="Submit" />

</form>

Codepen


2

Bagi Anda yang lebih suka yang Objectbertentangan dengan string serial (seperti yang dikembalikan oleh $(form).serialize(), dan sedikit perbaikan $(form).serializeArray()), jangan ragu untuk menggunakan kode di bawah ini:

var Form = {
    _form: null,
    _validate: function(){
        if(!this._form || this._form.tagName.toLowerCase() !== "form") return false;
        if(!this._form.elements.length) return false;
    }, _loopFields: function(callback){
        var elements = this._form.elements;
        for(var i = 0; i < elements.length; i++){
            var element = form.elements[i];
            if(name !== ""){
                callback(this._valueOfField(element));
            }
        }
    }, _valueOfField: function(element){
        var type = element.type;
        var name = element.name.trim();
        var nodeName = element.nodeName.toLowerCase();
        switch(nodeName){
            case "input":
                if(type === "radio" || type === "checkbox"){
                    if(element.checked){
                        return element.value;
                    }
                }
                return element.value;
                break;
            case "select":
                if(type === "select-multiple"){
                    for(var i = 0; i < element.options.length; i++){
                        if(options[i].selected){
                            return element.value;
                        }
                    }
                }
                return element.value;
                break;
            case "button":
                switch(type){
                    case "reset": 
                    case "submit": 
                    case "button":
                        return element.value;
                        break;
                }
                break;
        } 
    }, serialize: function(form){
        var data = {};
        this._form = form;

        if(this._validate()){
            this._loopFields(function(value){
                if(value !== null) data[name] = value;
            });
        }
        return data;
    }
};

Untuk menjalankannya, cukup gunakan Form.serialize(form)dan fungsinya akan mengembalikan yang Objectserupa dengan ini:

<!-- { username: "username", password: "password" } !-->
<input type="text" value="username">
<input type="password" value="password">

Sebagai bonus, itu berarti Anda tidak perlu menginstal seluruh bundel jQuery hanya untuk satu fungsi serialisasi.


1

Saya menulis fungsi yang menangani beberapa kotak centang dan beberapa pilihan. Dalam kasus itu mengembalikan array.

function getFormData(formId) {
    return $('#' + formId).serializeArray().reduce(function (obj, item) {
        var name = item.name,
            value = item.value;

        if (obj.hasOwnProperty(name)) {
            if (typeof obj[name] == "string") {
                obj[name] = [obj[name]];
                obj[name].push(value);
            } else {
                obj[name].push(value);
            }
        } else {
            obj[name] = value;
        }
        return obj;
    }, {});
}

1

menampilkan kolom isian form input dan file input untuk mengirimkan form Anda tanpa me-refresh halaman dan ambil semua nilai dengan file yang termasuk di dalamnya

<form id="imageUploadForm"   action="" method="post" enctype="multipart/form-data">
<input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" >
<input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name">
<input type="number" name='phoneno'  class="form-control" id="phoneno" placeholder="Phone Number">
<textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea>
<input type="file" name="file" id="file" >
<input type="submit" id="sub" value="Registration">					   
</form>
pada tombol Kirim halaman akan mengirimkan permintaan ajax ke file php Anda.
$('#imageUploadForm').on('submit',(function(e) 
{
     fname = $('#fname').val();
     lname =  $('#lname').val();
     address =  $('#address').val();
     phoneno =  $('#phoneno').val();
     file =  $('#file').val();
     e.preventDefault();
     var formData = new FormData(this);
     formData.append('file', $('#file')[0]);
     formData.append('fname',$('#fname').val());
     formData.append('lname',$('#lname').val());
     formData.append('phoneno',$('#phoneno').val());
     formData.append('address',$('#address').val());
     $.ajax({
		type:'POST',
                url: "test.php",
                //url: '<?php echo base_url().'edit_profile/edit_profile2';?>',

                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data)
                {
                     alert('Data with file are submitted !');

                }

     });

}))


Apa perlunya FormData baru di sini?
Sahu V Kumar

1
@VishalKumarSahu saya mengunggah file jadi itu sebabnya saya menggunakan formData untuk itu.
Mohsin Shoukat

1
$(form).serializeArray().reduce(function (obj, item) {
      if (obj[item.name]) {
           if ($.isArray(obj[item.name])) {
               obj[item.name].push(item.value);
           } else {
                var previousValue = obj[item.name];
                obj[item.name] = [previousValue, item.value];
           }
      } else {
           obj[item.name] = item.value;
      }

     return obj;
}, {});

Ini akan memperbaiki masalah: tidak dapat bekerja dengan multiselek.


0

Anda semua tidak sepenuhnya benar. Anda tidak dapat menulis:

formObj[input.name] = input.value;

Karena dengan cara ini jika Anda memiliki daftar multiselect - nilainya akan ditimpa dengan yang terakhir, karena ditransmisikan sebagai: "param1": "value1", "param1": "value2".

Jadi, pendekatan yang benar adalah:

if (formData[input.name] === undefined) {
    formData[input.name] = input.value;
}
else {
    var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
    $.merge(inputFieldArray, [input.value]);
    formData[input.name] = $.merge([], inputFieldArray);
}

0

Metode ini harus melakukannya. Ini membuat cerita berseri data formulir dan kemudian mengubahnya menjadi objek. Mengurus kelompok kotak centang juga.

function getFormObj(formId) {
  var formParams = {};
  $('#' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}

Bekerja untuk kotak centang, tetapi tidak untuk tombol radio di mana kontrol berbagi nameatribut.
Kyle Falconer

0

Berikut adalah fungsi JS vanilla yang bagus yang saya tulis untuk mengekstrak data formulir sebagai objek. Ini juga memiliki opsi untuk memasukkan tambahan ke objek, dan untuk membersihkan bidang input formulir.

const extractFormData = ({ form, clear, add }) => {
  return [].slice.call(form.children).filter(node => node.nodeName === 'INPUT')
  .reduce((formData, input) => {
    const value = input.value
    if (clear) { input.value = '' }
    return {
      ...formData,
      [input.name]: value
    }
  }, add)
}

Berikut ini adalah contoh penggunaannya dengan permintaan pos:

submitGrudge(e) {
  e.preventDefault()

  const form = e.target
  const add = { id: Date.now(), forgiven: false }
  const grudge = extractFormData({ form, add, clear: true })

  // grudge = {
  //  "name": "Example name",
  //  "offense": "Example string",
  //  "date": "2017-02-16",
  //  "id": 1487877281983,
  //  "forgiven": false
  // }

  fetch('http://localhost:3001/api/grudge', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(grudge)
  })
    .then(response => response.json())
    .then(grudges => this.setState({ grudges }))
    .catch(err => console.log('error: ', err))
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.