it-swarm.com.de

So verhindern Sie das Senden des Eingabefeldwerts des HTML-Formulars, wenn es leer ist

Ich habe ein HTML-Formular mit Eingabefeldern. Einige Eingaben können leer sein, d. H. Der Wert ist "".

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

Gerade jetzt, wenn das Feld commentary nicht festgelegt ist, wird es in der Übergabe-URL wie folgt angezeigt: &commentary=

Wie kann ich leere Eingaben aus der Sende-URL entfernen? Wenn also die commentary-Eingabe leer ist, wird sie überhaupt nicht übergeben.

Vielen Dank.

Aktualisieren

Dank minitech answer konnte ich das Problem lösen. Der JavaScript-Code befindet sich unten:

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

Der einzige Grund, warum ich Feldname mit "empty_" vorangestellt habe, ist, dass IE ohnehin einen leeren Namen in URL übergibt.

34
nonezumi

Soweit ich weiß, kann dies nur über JavaScript erfolgen. Wenn Sie sich also auf diese Funktionalität verlassen, müssen Sie sie umstrukturieren. Die Idee ist ohnehin, das name-Attribut aus Eingaben zu entfernen, die nicht enthalten sein sollen:

jQuery:

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

Keine 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 = '';
        }
    }
});

Sie können das Formular auch nachträglich zurücksetzen, wenn Sie einen Listener verwenden und abbrechen.

39
Ry-

Sie möchten wahrscheinlich keine Optionsfelder verwenden. Und wenn das Formular Select-Elemente enthält, müssen Sie diese ebenfalls anpassen.

Mit jQuery können Sie etwa Folgendes verwenden:

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

Verwenden Sie anstelle einer Eingabe vom Typ submit- eine Eingabe vom Typ button- für die Formularübermittlung. Der JavaScript-Handler für die Eingabe vom Typ button- sollte die submit()-Methode des Formulars aufrufen, nachdem überprüft wurde, dass der Kommentar nicht leer ist. Sie sollten den Benutzer auch auf seinen Fehler aufmerksam machen (besser mit einem roten Text auf der Seite als mit dem von alert() erzeugten Popup).

Denken Sie daran, dass Sie only nicht auf die clientseitige Eingabeüberprüfung vertrauen sollten. Das Formular kann jedoch immer von einer geänderten Seite oder direkt in HTTP gesendet werden.

3
Adam Zalcman

Vielen Dank @Ryan

Dies ist meine vollständige Lösung für diese ... Ich verwende Jersey und @BeanParam und dies behebt das Problem der Eingabe von Nullen

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