Verhindern Sie, dass ein Eingabefeld in einem Formular gesendet wird

Ich schreibe ein Javascript (ein Greasemonkey / Userscript), das einige Eingabefelder in ein Formular auf einer Website einfügt.

Die Sache ist, ich möchte nicht, dass diese Eingabefelder das Formular in irgendeiner Weise beeinflussen, ich möchte nicht, dass sie gesendet werden, wenn das Formular gesendet wird, ich möchte nur, dass mein Javascript Zugriff auf ihre Werte hat.

Gibt es eine Möglichkeit, einige Eingabefelder in die Mitte eines Formulars einzufügen und sie nicht senden zu lassen, wenn das Formular gesendet wird?

Natürlich wäre es ideal, wenn sich die Eingabefelder nicht im Formularelement befinden, aber ich möchte, dass im Layout meiner resultierenden Seite meine eingefügten Eingabefelder zwischen Elementen des ursprünglichen Formulars angezeigt werden.

Sie können Eingabefelder ohne das Attribut "Name" einfügen:

<input type="text" id="in-between" />

Oder Sie können sie einfach entfernen, sobald das Formular gesendet wurde (in jQuery):

$("form").submit(function() {
   $(this).children('#in-between').remove();
});

Am einfachsten wäre es, die Elemente mit dem disabledAttribut einzufügen .

<input type="hidden" name="not_gonna_submit" disabled="disabled" value="invisible" />

Auf diese Weise können Sie weiterhin als untergeordnete Elemente des Formulars darauf zugreifen.

Deaktivierte Felder haben den Nachteil, dass der Benutzer überhaupt nicht mit ihnen interagieren kann. Wenn Sie also ein disabledTextfeld haben, kann der Benutzer den Text nicht auswählen. Wenn Sie ein disabledKontrollkästchen haben, kann der Benutzer seinen Status nicht ändern.

Sie können auch Javascript schreiben, um beim Senden des Formulars ausgelöst zu werden und die Felder zu entfernen, die Sie nicht senden möchten.

Einfach versuchen zu entfernen name Attribut von Eingabeelement.
Also muss es so aussehen

<input type="checkbox" checked="" id="class_box_2" value="2">

Ich wollte nur eine zusätzliche Option hinzufügen: Fügen Sie in Ihrer Eingabe das Formular-Tag hinzu und geben Sie den Namen eines Formulars an, das auf Ihrer Seite nicht vorhanden ist:

<input form="fakeForm" type="text" readonly value="random value" />

Sie können einen Ereignishandler schreiben onsubmit, der das nameAttribut aus allen Eingabefeldern entfernt, die nicht in die Formularübermittlung aufgenommen werden sollen.

Hier ist ein kurzes ungetestetes Beispiel:

var noSubmitElements = [ 'someFormElementID1', 'someFormElementID2' ]; //...
function submitForm() {
    for( var i = 0, j = noSubmitElements.length; i < j; i++ ) {
        document.getElementById(noSubmitElements[i]).removeAttribute('name');
    }
}
form.onsubmit = submitForm;

Ich weiß, dass dieser Beitrag uralt ist, aber ich werde trotzdem antworten. Der einfachste / beste Weg, den ich gefunden habe, besteht darin, den Namen einfach auf leer zu setzen.

Stellen Sie dies vor Ihre Übermittlung:

document.getElementById("TheInputsIdHere").name = "";

Alles in allem könnte Ihre Übermittlungsfunktion folgendermaßen aussehen:

document.getElementById("TheInputsIdHere").name = "";
document.getElementById("TheFormsIdHere").submit();

Dadurch wird das Formular weiterhin mit allen anderen Feldern gesendet, jedoch nicht ohne Namen.

Fügen Sie disabled = "disabled" in die Eingabe ein und entfernen Sie während der Abfrage das Attribut deaktiviert, wenn Sie es mit .removeAttr ('disabled') senden möchten.

HTML:

<input type="hidden" name="test" value="test" disabled='disabled'/>

jquery:

$("input[name='test']").removeAttr('disabled');

Alle oben genannten Antworten sagten bereits alles über das (Nicht-) Benennen der Formularsteuerelemente oder das programmgesteuerte Entfernen aus, bevor Sie Ihr Formular tatsächlich abschicken.

Während meiner Recherche habe ich jedoch eine andere Lösung gefunden, die ich in diesem Beitrag nicht erwähnt habe:
Wenn Sie die Formularsteuerelemente kapseln, möchten Sie unverarbeitet / nicht gesendet werden, in einem anderen <form>Tag ohne methodAttribut noch path(und offensichtlich ohne Steuerelement für den Übermittlungstyp) Wie eine Schaltfläche oder eine darin verschachtelte Eingabe) enthält das Senden des übergeordneten Formulars nicht die gekapselten Formularsteuerelemente.

<form method="POST" path="/path">
  <input type="text" name="sent" value="..." />
  <form>
    <input type="text" name="notSent" value="..." />
  </form>
  <input type="submit" name="submit" value="Submit" />
</form>

Der Steuerwert [name = "notSent"] wird weder verarbeitet noch an den POST-Endpunkt des Servers gesendet, der von [name = "sent"] jedoch.

Diese Lösung mag anekdotisch sein, aber ich überlasse sie immer noch der Nachwelt ...

Behandeln Sie das Senden des Formulars in einer Funktion über onSubmit () und führen Sie die folgenden Schritte aus, um das Formularelement zu entfernen: Verwenden Sie getElementById()das DOM und verwenden Sie dann[object].parentNode.removeChild([object])

Angenommen, Ihr fragliches Feld hat den ID-Attributcode "my_removable_field":

var remEl = document.getElementById("my_removable_field");
if ( remEl.parentNode && remEl.parentNode.removeChild ) {
remEl.parentNode.removeChild(remEl);
}

So erhalten Sie genau das, wonach Sie suchen.

Müssen sie überhaupt als Eingabeelemente dienen? Sie können Javascript verwenden, um dynamisch Divs oder Absätze oder Listenelemente oder was auch immer zu erstellen, die die Informationen enthalten, die Sie präsentieren möchten.

Wenn das interaktive Element jedoch wichtig ist und es schwierig ist, diese Elemente außerhalb des <form>Blocks zu platzieren, sollte es möglich sein, diese Elemente aus dem Formular zu entfernen, wenn die Seite gesendet wird.

Sie müssen onsubmit in Ihrem Formular hinzufügen:

<form action="YOUR_URL" method="post" accept-charset="utf-8" onsubmit="return validateRegisterForm();">

Und das Skript wird so aussehen:

        function validateRegisterForm(){
        if(SOMETHING IS WRONG)
        { 
            alert("validation failed");
            event.preventDefault();
            return false;

        }else{
            alert("validations passed");
            return true;
        }
    }

Das funktioniert bei mir jedes Mal :)