web-dev-qa-db-ja.com

jquery：送信する前にフォームから空白のフィールドを削除するにはどうすればよいですか？

APIテストに使用する一連のフォームを含むページがあります。説明する価値がない理由で、私は通常、サーバーへの送信に空のフィールドを含めたくありません。送信する前にデータから空のフィールドを削除するにはどうすればよいですか？

たとえば、fooとbarの2つのフィールドを持つフォームがあり、ユーザーがbarを空白のままにした場合、サーバーは送信がフィールドだけがfooであるかのように表示する必要があります。

私の最初の試みは、jqueryを使用してフィールドをループすることでした

$("form").submit(function() {
    $(this).children(':input').each(...)
}

そして、フィールドを削除します。しかし、それはa）機能しませんでした、そしてb）それは私が望むものではないページ上の可視フォームからフィールドを削除するようです。

別のアプローチとして、フィールドをループし、 ""以外の値を持つフィールドを使用して送信文字列を手動で作成する方法があります。うまくいきますか？より良いアイデアはありますか？

jqueryform-submit
28
Dave Orr

1つの方法は、これらのフィールドに「無効」属性を設定することです。これにより、それらの値がシリアル化されてサーバーに送信されるのを防ぎます。

$(function()
{
    $("form").submit(function()
    {
        $(this).children(':input[value=""]').attr("disabled", "disabled");

        return true; // ensure form still submits
    });
});

クライアント側の検証がある場合は、検証が失敗した場合にこれらのフィールドを再度有効にすることもできます。

$(':input').removeAttr("disabled");

編集：バグを修正しました

40
Luke Dennis

ここでの回答と、 空の入力の検索に関するこの質問を組み合わせて 私はこの解決策にたどり着きました。

$(function() {
   $("form").submit(function() {
      $(this).find(":input").filter(function(){ return !this.value; }).attr("disabled", "disabled");
      return true; // ensure form still submits
    });
});

したがって、フォーム@Lukeのソリューションを開始し、子の代わりに検索を使用するという彼の提案を追加し（私のフォームはテーブル内にあります）、次に@gdoronのフィルター技術を使用して空の要素を分離します。

18
ReggieB

私は通常、@ Lukeに同意するだけですが、以下の解決策は、それが入力タグであるかどうかにかかわらず、空の値を処理する必要があります。シリアル化したい場合は、すべてのフォームの子要素に名前プロパティを追加することを忘れないでください。 ;

HTML：

<form action="yourUrl.php" name="myForm" id="myForm">
input1: <input type="text" name="field1" /><br /><br />
input2: <input type="text" name="field2" /><br /><br />
input3: <input type="text" name="field3" /><br /><br />
input4: <input type="text" name="field4" /><br /><br />
select: <select name="selectField">
    <option value="">empty value</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
</select><br /><br />
<input type="submit" name="submit" value="submit" />
</form>

JQuery：

$("#myForm").submit (function (e) {
    e.preventDefault();
    var _form = $(this);
    var data = {};
    var formData = _form.serializeArray();
    $.each(formData, function (index, value) {
        var data_name = formData[index].name;
        var data_value = formData[index].value;
        if (data_value !== "") {
            data[data_name] = data_value;
        }
    });
    // now with ajax you can send the sanitize data object
    $.post(_form.attr("action"), data, function(res, textStatus, jqXHR) {
        // do something
    });
});
5
Ady Ngom

送信時に空のフィールドを削除する

_$(function() {
    $('form').submit(function () {
        var $empty_fields = $(this).find(':input').filter(function () { 
            return $(this).val() === '';
        });
        $empty_fields.prop('disabled', true);
        return true;
    });
});
_

特にいくつかの機能と主観的なスタイルを組み合わせる：

  • .find()は、.children()よりも deeper になります。
  • .val() === ''は textarea および changed 属性で機能しますが、_[value=""]_は機能しません。
  • .prop()over.attr()。
1
Bob Stein

上位投票の回答は私にとってはうまくいきませんでした。セレクターは十分具体的ではなかったと思います。これが私のために働いたものです：

$(function() {
  $("#myForm").submit(function() {
    $("#myForm *").filter(":input").each(function(){
      if ($(this).val() == '')
        $(this).prop("disabled", true);
    });

    return true; // ensure form still submits
  });
});
1
Ken Brockert

多分最善の解決策ではないかもしれませんが、これはあなたが望んでいることを達成するための迅速かつ簡単な方法でなければなりません

$("form").submit(function() {
    $(this).children('input[value=""]').each(function(){
        // Rename the name attribute to something else if the value is "" to it isn't submitted
        $(this).attr('blank', $(this).attr('name'));
        $(this).removeAttr('name');

    });
}

次に、vlient side validationを使用している場合、またはajaxを介して投稿している場合は、次の送信が正しく機能するようにname属性を設定し直す必要があります...

$(this).attr('name', $(this).attr('blank'));
$(this).removeAttr('blank');
0
Dean North