Cara menggunakan DECSENDANT pada JavaScript

Saya memiliki formulir pencarian dengan sejumlah input teks & drop down yang dikirimkan melalui GET. Saya ingin memiliki url pencarian yang lebih bersih dengan menghapus bidang kosong dari querystring saat pencarian dilakukan.

var form = $("form");  
var serializedFormStr = form.serialize();  
// I'd like to remove inputs where value is '' or '.' here
window.location.href = '/search?' + serializedFormStr

Tahu bagaimana saya bisa melakukan ini menggunakan jQuery?

Saya telah mencari di jQuery docs dan saya pikir kita bisa melakukan ini dalam satu baris menggunakan penyeleksi :

$("#myForm :input[value!='']").serialize() // does the job!

Jelas #myForm mendapatkan elemen dengan id "myForm" tetapi yang kurang jelas bagi saya pada awalnya adalah bahwa karakter spasi diperlukan antara #myForm dan: input karena merupakan operator descendant .

: input cocok dengan semua input, textarea, pilih dan elemen tombol.

[value! = ''] adalah atribut bukan filter yang sama. Yang aneh (dan bermanfaat) adalah bahwa semua: input jenis elemen memiliki atribut nilai bahkan memilih dan mencentang kotak dll.

Akhirnya untuk juga menghapus input yang nilainya '.' (sebagaimana disebutkan dalam pertanyaan):

$("#myForm :input[value!=''][value!='.']").serialize()

Dalam hal ini penjajaran, yaitu menempatkan dua penyeleksi atribut di sebelah satu sama lain , menyiratkan sebuah AND. Menggunakan koma menyiratkan OR. Maaf jika itu jelas bagi orang-orang CSS!

Saya tidak bisa mendapatkan solusi Tom untuk bekerja (?), Tapi saya bisa melakukan ini menggunakan .filter() dengan fungsi pendek untuk mengidentifikasi bidang kosong. Saya menggunakan jQuery 2.1.1.

var formData = $("#formid :input")
    .filter(function(index, element) {
        return $(element).val() != '';
    })
    .serialize();

Ini bekerja untuk saya:

data = $( "#my_form input").filter(function () {
        return !!this.value;
    }).serialize();

Anda bisa melakukannya dengan regex ...

var orig = $('#myForm').serialize();
var withoutEmpties = orig.replace(/[^&]+=\.?(?:&|$)/g, '')

Kasus uji:

orig = "a=&b=.&c=&d=.&e=";
new => ""

orig = "a=&b=bbb&c=.&d=ddd&e=";
new => "b=bbb&d=ddd&"  // dunno if that trailing & is a problem or not

Saya telah menggunakan solusi di atas tetapi bagi saya itu tidak berhasil. Jadi saya telah menggunakan kode berikut

$('#searchform').submit(function(){

            var serializedData = $(this).serializeArray();
            var query_str = '';

            $.each(serializedData, function(i,data){
                if($.trim(data['value'])){
                    query_str += (query_str == '') ? '?' + data['name'] + '=' + data['value'] : '&' + data['name'] + '=' + data['value'];
                }
            });
            console.log(query_str);
            return false;
        });

Semoga bermanfaat bagi seseorang

Saya akan melihat kode sumber untuk jQuery. Di baris versi terbaru 3287.

Saya mungkin menambahkan fungsi "serialize2" dan "serializeArray2". tentu saja menamai mereka sesuatu yang jahat.

Atau cara yang lebih baik adalah menulis sesuatu untuk menarik vars yang tidak digunakan keluar dari serializedFormStr. Beberapa regex yang mencari = & di tengah string atau berakhir di = Adakah penyihir regex di sekitar?

PEMBARUAN: Saya suka jawaban rogeriopvl lebih baik (+1) ... terutama karena saya tidak dapat menemukan alat regex yang baik saat ini.

Dalam naskah kopi, lakukan ini:

serialized_form = $(_.filter($(context).find("form.params input"), (x) -> $(x).val() != '')).serialize()

Apakah ada solusi yang lebih baik untuk mengonversi data formulir yang sudah diserialkan oleh fungsi jQuery serialize (), ketika formulir berisi beberapa input bidang Array. Saya ingin dapat mengonversi data formulir ke objek JSON untuk membuat ulang beberapa tabel informatif lainnya. Jadi katakan padaku cara yang lebih baik untuk mendapatkan string serialize dikonversi sebagai objek JSON.

<form id='sampleform'>
    <input name='MyName' type='text' /> // Raf

    <!--array input fields below-->
    <input name='friendname[]' type='text' /> // Bily
    <input name='fiendemail[]' type='text' /> // [email protected]

    <!--duplicated fields below to add more friends -->
    <input name='friendname[]' type='text' /> // Andy
    <input name='fiendemail[]' type='text' /> // [email protected]

    <input name='friendname[]' type='text' /> // Adam
    <input name='fiendemail[]' type='text' /> // [email protected]
</form>

Metode jquery diterapkan untuk mendapatkan data

var MyForm = $("#sampleform").serialize();
/** result : MyName=Raf&friendname[]=Billy&fiendemail[][email protected]&friendname[]=Andy&fiendemail[][email protected]&friendname[]=Adam&fiendemail[][email protected]
*/

bagaimana cara membuat data ini ke objek JSON? yang seharusnya memiliki contoh data JSON berikut dari formulir di atas.

{
    "MyName":"raf",
    "friendname":[
        {"0":"Bily"},
        {"1":"Andy"},
        {"2":"Adam"}
    ],
    "friendemail":[
        {"0":"[email protected]"},
        {"1":"[email protected]"},
        {"2":"[email protected]"}
    ]
}

var formdata = $("#myform").serializeArray();
var data = {};
$(formdata ).each(function(index, obj){
    data[obj.name] = obj.value;
});

Sederhana dan cepat;)

Baru-baru ini saya memiliki masalah yang tepat ini. Awalnya, kami menggunakan metode serializeArray() jQuery, tetapi itu tidak termasuk elemen formulir yang dinonaktifkan. Kami akan sering menonaktifkan elemen formulir yang "disinkronkan" ke sumber lain di halaman, tetapi kami masih perlu memasukkan data ke objek serial kami. Jadi serializeArray() keluar. Kami menggunakan pemilih :input untuk mendapatkan semua elemen input (keduanya diaktifkan dan dinonaktifkan) dalam wadah yang diberikan, dan kemudian $.map() untuk membuat objek kami.

var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
    var o = {};
    o[n.name] = $(n).val();
    return o;
});
console.log(obj);

Perhatikan bahwa agar ini berfungsi, setiap input Anda akan memerlukan atribut name, yang akan menjadi nama properti dari objek yang dihasilkan.

Itu sebenarnya sedikit dimodifikasi dari apa yang kami gunakan. Kami perlu membuat objek yang terstruktur sebagai .NET IDictionary, jadi kami menggunakan ini: (Saya berikan di sini jika berguna)

var obj = $.map(inputs, function(n, i)
{
    return { Key: n.name, Value: $(n).val() };
});
console.log(obj);

Saya suka kedua solusi ini, karena mereka adalah penggunaan sederhana dari fungsi $.map(), dan Anda memiliki kontrol penuh atas pemilih Anda (jadi, elemen mana yang Anda akhirnya termasuk dalam objek yang dihasilkan) Juga, tidak diperlukan plugin tambahan. JQuery tua polos.

Gunakan jQuery.serializeJSON plugin . Ini mengonversi bentuk menggunakan format yang sama dengan apa yang akan Anda temukan di objek params Rails, yang sangat standar dan teruji dengan baik.

Saya menggunakan plugin jQuery yang sangat kecil ini, yang telah saya perpanjang dari DocumentCloud:

https://github.com/documentcloud/documentcloud/blob/master/public/javascripts/lib/jquery_extensions.js

Ini pada dasarnya adalah dua baris kode, tetapi membutuhkan _.js (Underscore.js), karena didasarkan pada fungsi reduce.

$.fn.extend({
  serializeJSON: function(exclude) {
    exclude || (exclude = []);
    return _.reduce(this.serializeArray(), function(hash, pair) {
      pair.value && !(pair.name in exclude) && (hash[pair.name] = pair.value);
      return hash;
    }, {});
  }
});

Ekstensi:

• Ini tidak membuat serialisasi nilai input jika itu nol
• Itu dapat mengecualikan beberapa input dengan melewatkan array nama input ke argumen excludei.e. ["password_confirm"]

Solusi yang setara dengan Danilo Colasso's , dengan pro dan kontra sames dari .serializeArray() (pada dasarnya ia menggunakan .reduce alih-alih $.each).

Dengan sedikit usaha memungkinkan penerapan fitur tambahan dalam jawaban S.C tanpa memerlukan ekstensi.

$(selector).serializeArray()
    .reduce(function(accum, item) {
        // This 'if' allows ignoring some values
        if (-1 === [ 'ignoreThis', 'andThat' ].indexOf(item.name)) {
            // This allows ignoring NULL values
            if (item.value !== null) {
                accum[item.name] = item.value;
            }
        }
        return accum;
    },
    {
        // By supplying some initial values, we can add defaults
        // for, say, disabled form controls.
        preFilledName:  preFilledValue, // optional
        defaultName  :  defaultValue    // optional
    }
);

Saya pikir ada banyak jawaban bagus di sini, dan saya membuat fungsi sendiri berdasarkan jawaban ini.

function formToJSON(f) {
    var fd = $(f).serializeArray();
    var d = {};
    $(fd).each(function() {
        if (d[this.name] !== undefined){
            if (!Array.isArray(d[this.name])) {
                d[this.name] = [d[this.name]];
            }
            d[this.name].Push(this.value);
        }else{
            d[this.name] = this.value;
        }
    });
    return d;
}

//The way to use it :
$('#myForm').submit(function(){
    var datas = formToJSON(this);
    return false;
});

Baiklah saya jelaskan pada dasarnya mengapa saya lebih suka solusi ini ... Jika Anda memiliki beberapa input dengan nama yang sama, semua nilai akan disimpan dalam Array tetapi jika tidak, nilai akan disimpan langsung sebagai nilai indeks di JSON ... Di sinilah berbeda dari Jawaban Danilo Colasso di mana JSON yang dikembalikan hanya berdasarkan nilai array ...

Jadi jika Anda memiliki Formulir dengan textarea bernama content dan kelipatan penulis, fungsi ini akan kembali kepada Anda: 

{
    content : 'This is The Content',
    authors : 
        [
            0: 'me',
            1: 'you',
            2: 'him',
        ]
}

var formdata = $("#myform").serializeArray();

var data = {};

$(formdata ).each(function(index, obj){

         if(data[obj.name] === undefined)
              data[obj.name] = [];

          data[obj.name].Push(obj.value);

});

jika Anda menggunakan permintaan ajax maka tidak perlu membuatnya json-object hanya $('#sampleform').serialize() berfungsi dengan baik atau jika Anda memiliki tujuan lain di sini adalah solusi saya:

var formserializeArray = $("#sampleform").serializeArray();   
var jsonObj = {};
jQuery.map(formserializeArray , function (n, i) {
    jsonObj[n.name] = n.value;
});