Verhindern Sie, dass ein Eingabefeld in einem Formular gesendet wird

113

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.

Eichel
quelle
2
Was ist das Problem, wenn sie eingereicht werden? Sie können auswählen, welche Felder in serverseitiger Sprache verarbeitet werden sollen.
Sarfraz
6
Ich glaube nicht, dass nicht benannte Formularelemente angezeigt werden, wenn ein Formular gesendet wird. Wenn Sie Ihre JS schreiben können, um sie anhand ihrer ID zu referenzieren, können Sie ihre Namen leer lassen und so effektiv verhindern, dass sie gesendet werden.
GDDC
2
Lassen Sie das Feld für das
Namensattribut
@Sarfraz Ahmed: Ich schreibe ein Greasemonkey-Skript, daher habe ich keine Kontrolle über die Website.
Eichel
11
Laut w3: In die Einreichung eines Formulars aufzunehmen. Ein Feld (Formularelement) muss innerhalb des Formularelements definiert sein und ein Namensattribut haben. Elemente ohne Namen oder nicht im Formular enthalten, werden nicht an den Server gesendet.
kennebec

Antworten:

158

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();
});
Gal
quelle
7
Das Weglassen des Namens verhindert, dass er übermittelt wird? Cool, das wusste ich nicht. Funktioniert das in allen Browsern? Ist es Teil eines Standards oder ist es eine Implementierungs-Eigenart?
BlairHippo
2
@Acorn Ich bin mir nicht ganz sicher, aber es lohnt sich darüber zu lesen. Wenn Sie den Attributwert "name" weglassen, können Sie über keine Methode auf diesen Wert zugreifen. Es kann also sein, dass der Wert vom Browser einfach verworfen wird. Wenn es aus Sicherheitsgründen von entscheidender Bedeutung ist, wählen Sie die Option jquery / javascript (beachten Sie nur, dass die Felder gesendet werden, wenn Javascript leicht deaktiviert werden kann - verlassen Sie sich also nicht auf einen Ihrer Sicherheitsmechanismen).
Gal
17
Ich habe getestet, das Namensattribut mit Chrome, Firefox, Safari wegzulassen, und es scheint, dass die Formularfelder mit einer leeren Zeichenfolge für den Namen an den Server gesendet werden. Ich habe die Postdaten mit WebScarab überprüft und festgestellt, dass die Daten gesendet werden. Im Moment muss ich wohl die Felder deaktivieren, um zu verhindern, dass sie gesendet werden.
kldavis4
1
@ kldavis4 - Es scheint, dass sowohl stripe (stripe.js) als auch Braintree (braintree.js) [link] braintreepayments.com/docs/python/guide/getting_paid das Attributkonzept "Auslassen des Namens" verwenden, um zu verhindern, dass Daten auf die Server gelangen Dadurch wird die Notwendigkeit der "PCI" -Konformität verringert. Wenn Sie sagen, dass die "Daten" gesendet werden, sind sie dann fehlerhaft?
Rahul Dighe
57

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.

Johrn
quelle
Die Idee ist, dass meine eingefügten Felder verwendet werden können, damit der Benutzer Kontrollkästchen usw. ändern und sie dann an mein Javascript senden kann.
Eichel
3
Deaktiviert könnte weiterhin funktionieren, wenn Sie nur die Felder beim Senden deaktivieren oder basierend auf einem aktivierten Kontrollkästchen. Auf diese Weise werfen Sie nicht nur das nameGrundstück weg , an dem Sie sich möglicherweise festhalten möchten, wenn Sie es später verwenden möchten.
JMTyler
Dies ist ideal, wenn Sie das Formular mit AJAX senden müssen und Ihre Eingaben nicht aus dem Formular entfernen oder deren nameAttribute entfernen möchten .
Nolonar
15

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

<input type="checkbox" checked="" id="class_box_2" value="2">
Lesha Pipiev
quelle
Dies sollte die Antwort sein :))
Máxima Alekz
1
Dies funktioniert für Kontrollkästchen. Beachten Sie jedoch, dass dies die automatische Abwahl des anderen Optionsfelds unterbricht, wenn es mit Optionsfeldern verwendet wird.
Anre
10

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" />
farvgnugn
quelle
1
Während dies wahrscheinlich funktioniert (nicht getestet), führt fakeFormdies zu ungültigem HTML , es sei denn, Sie definieren tatsächlich an anderer Stelle (keine Übermittlung erforderlich).
Brian H.
1
Wenn Sie kein Javascript hinzufügen möchten und die Eingabe innerhalb des Formulars mit Benutzerinteraktion benötigen. Dies ist aus meiner Sicht die mit Abstand einfachste Lösung.
Yannisalexiou
1
HINWEIS: Diese Lösung funktioniert nicht mit IE . Überprüfen Sie hier
Harvey
@ Harvey Yikes! Danke für die Warnung!
Joshua Pinter
9

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;
Jacob Relkin
quelle
2

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.

Wille
quelle
Einfach und unkompliziert. Ich mag das!
Pbarney
2

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');

Pikka pikka
quelle
2

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

Delfshkrimm
quelle
Interessante Beobachtung, aber haben Sie dies in verschiedenen Browsern getestet? Ich frage mich, ob es beabsichtigt, spezifiziert oder nur eine Eigenart des Browserverhaltens ist. Wird es in Zukunft eine zuverlässige Methode sein, wenn sich die Browser ändern?
Scipilot
1

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.

Ringträger
quelle
0

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.

BlairHippo
quelle
Ja, ich brauche sie als Eingabeelemente, weil ich versuche, Benutzereingaben zu erhalten.
Eichel
0
$('#serialize').click(function () {
  $('#out').text(
    $('form').serialize()
  );
});

$('#exclude').change(function () {
  if ($(this).is(':checked')) {
    $('[name=age]').attr('form', 'fake-form-id');
  } else {
    $('[name=age]').removeAttr('form');    
  }
  
  $('#serialize').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/">
  <input type="text" value="John" name="name">
  <input type="number" value="100" name="age">
</form>

<input type="button" value="serialize" id="serialize">
<label for="exclude">  
  <input type="checkbox" value="exclude age" id="exclude">
  exlude age
</label>

<pre id="out"></pre>
Denis Lukyanov
quelle
Leider funktioniert das Formularattribut in IE / Edge nicht. caniuse.com/#search=form%20attribute
George Helyar
0

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 :)

Vasilakakis Anastasios
quelle