web-dev-qa-db-ja.com

空の場合にHTMLフォームの入力フィールド値を送信しないようにする方法

入力フィールドを持つHTMLフォームがあります。入力の一部は空にできます。つまり、値は「」です。

<input name="commentary" value="">

ちょうど今、commentaryフィールドが設定されていない場合、送信URLに次のように表示されます：&commentary=

送信URLから空の入力を削除する方法。したがって、commentary入力が空の場合、まったく渡されません。

どうもありがとうございました。

更新

minitechのおかげで、解決できました。 JavaScriptコードは次のとおりです。

$('#my-form-id').submit(function() {
  var commentary = $('#commentary').val(); 
  if (commentary === undefined || commentary === "") {
    $('#commentary').attr('name', 'empty_commentary');
  } else {
    $('#commentary').attr('name', 'commentary');        
  }
});

フィールド名の前に「empty_」を付けた唯一の理由は、IEとにかくURLに空の名前を渡すことです。

javascripthtmlformshttp-post
35
nonezumi

私の知る限り、これはJavaScriptを介してのみ実行できるため、この機能に依存している場合は、再構築する必要があります。とにかく、あなたが含めたくない入力からname属性を削除するという考え方です：

jQuery：

$('#my-form-id').submit(function () {
    $(this)
        .find('input[name]')
        .filter(function () {
            return !this.value;
        })
        .prop('name', '');
});

JQueryなし：

var myForm = document.getElementById('my-form-id');

myForm.addEventListener('submit', function () {
    var allInputs = myForm.getElementsByTagName('input');

    for (var i = 0; i < allInputs.length; i++) {
        var input = allInputs[i];

        if (input.name && !input.value) {
            input.name = '';
        }
    }
});

リスナーを使用してキャンセルする場合は、後でフォームをリセットすることもできます。

40
Ry-

おそらく、ラジオボタンを一致させたくないでしょう。また、フォームにselectが含まれている場合は、それらも一致させる必要があります。

JQueryでは、次のようなものを使用できます。

$('#form-id').submit(function() {
    $(this).find('input[type!="radio"][value=""],select:not(:has(option:selected[value!=""]))').attr('name', '');
});
4
fduch

submit- type入力を使用する代わりに、button- type入力をフォーム送信に使用します。 button- type入力のJavaScriptハンドラーは、コメントが空でないことを確認した後、フォームのsubmit()メソッドを呼び出す必要があります。また、ユーザーに間違いを警告する必要があります（alert()によって生成されたポップアップではなく、ページ上に赤いテキストを表示することをお勧めします）。

変更されたページから、またはHTTPで直接フォームを送信することは常に可能であるため、クライアント側の入力検証にsolelyを使用しないでください。

3
Adam Zalcman

ありがとう@Ryan

これが私の完全なソリューションです。 Jerseyと@BeanParamを使用します。これにより、「」とnull入力の問題が修正されます。

$('#submitForm').click(function() {
    var url = "webapi/?";       
    var myForm = document.getElementById('myFormId');
    var allInputs = myForm.getElementsByTagName('input');

    for (var i = 0; i < allInputs.length; i++) {
        var input = allInputs[i];
        if (input.value != "" && input.name != "submitForm") {              
            url += input.name +'='+input.value+'&';
        }

    }
    console.log(url);

    $.ajax({
        method : "GET",
        url : url,

        data : {
        // data : "json",
        // method: "GET"
        },
        success : function(data) {
            console.log("Responce body from Server: \n" + JSON.stringify(data));
            $("#responce").html("");
            $("#responce").html(JSON.stringify(data));
        },
        error : function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus);

            console.log('Error: ' + errorThrown);

        }
    });
});
0
ASH