web-dev-qa-db-ja.com

jQueryのform.serializeを使用して空のフィールドを除外するには

GETを介して送信する多数のテキスト入力とドロップダウンを含む検索フォームがあります。検索の実行時にクエリ文字列から空のフィールドを削除することで、よりクリーンな検索URLが欲しいです。

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

JQueryを使用してこれをどのように行うことができますか？

javascriptjqueryformsserializationinput
104
Tom Viner

jQuery docs を見てきましたが、 selectors を使用してこれを1行で実行できると思います。

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

明らかに#myFormはid "myForm"の要素を取得しますが、最初はspace characterが#myFormと： descendant 演算子として入力します。

：input は、すべての入力、テキストエリア、選択、ボタン要素に一致します。

[value！= ''] は属性が等しくないフィルターです。奇妙な（そして役立つ）ことは、all：input要素タイプには、選択やチェックボックスなどの値属性もあるということです。

最後に、値が「。」であった入力も削除します（質問で述べたように）：

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

この場合、並置、つまり 2つの属性セレクターを並べて配置する は、ANDを意味します。 コンマを使用 はORを意味します。それがCSSの人々に明らかな場合は申し訳ありません！

164
Tom Viner

トムのソリューションを機能させることはできませんでした（？）が、空のフィールドを識別する短い関数で.filter()を使用してこれを行うことができました。 jQuery 2.1.1を使用しています。

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

これは私のために働く：

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

あなたは正規表現でそれを行うことができます...

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

テストケース：

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
7
nickf

私は上記のソリューションを使用しましたが、私にとってはうまくいきませんでした。だから私は次のコードを使用しました

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

誰かに役立つかもしれない

3
Rajan Rawal

私はjQueryのソースコードを見ます。最新バージョンの3287行目。

「serialize2」および「serializeArray2」関数を追加する場合があります。もちろん、それらに意味のある名前を付けます。

または、より良い方法は、serializedFormStrから未使用の変数を引き出すために何かを書くことです。中間の文字列で=＆で終わる=を探している正規表現

PDATE：私はrogeriopvlの答えが好きです（+1）...特に良い正規表現ツールが今のところ見つからないので。

1
BuddyJoe

Coffeescriptで、これを行います：

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