webentwicklung-frage-antwort-db.com.de

Stoppen Sie das Senden eines Eingabefelds in einem Formular

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 ist es ideal, wenn die Eingabefelder nicht im Formularelement enthalten sind. Ich möchte jedoch, dass das Layout meiner Ergebnisseite meine eingefügten Eingabefelder zwischen Elementen des ursprünglichen Formulars erscheinen lässt.

96
Acorn

Sie können Eingabefelder ohne "name" -Attribut 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();

});
141
Gal

Am einfachsten ist es, die Elemente mit dem Attribut disabled einzufügen.

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

Auf diese Weise können Sie als Kinder des Formulars immer noch darauf zugreifen.

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

Sie können auch ein Javascript schreiben, das bei der Formularübermittlung ausgelöst wird, um die Felder zu entfernen, die Sie nicht senden möchten.

44
Johrn

Versuchen Sie einfach, das name attribute aus dem Eingabeelement zu entfernen.
So muss es aussehen 

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

Sie können einen Ereignishandler für onsubmit schreiben, der das name-Attribut aus allen Eingabefeldern entfernt, die nicht in die Formularübergabe aufgenommen werden sollen.

Hier ist ein schnelles ungeprüftes 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;
8
Jacob Relkin

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

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

Füge disabled = "disabled" in die Eingabe ein und entferne jquery das deaktivierte Attribut, wenn du es mit .removeAttr ('disabled') übermitteln möchtest.

HTML:

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

jquery:

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

3
Pikka pikka

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

Fügen Sie dies vor dem Absenden ein:

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

Alles in allem könnte Ihre Submit-Funktion so aussehen:

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

Das Formular wird trotzdem mit allen anderen Feldern gesendet, das Formular jedoch nicht ohne Namen.

1
Will

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

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

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

Das funktioniert immer für mich :)

Behandeln Sie das Senden des Formulars in einer Funktion über onSubmit () und führen Sie zum Entfernen des Formularelements wie folgt aus: Verwenden Sie getElementById() des DOM und verwenden Sie dann [object].parentNode.removeChild([object]).

angenommen, Ihr Feld hat ein ID-Attribut "my_removable_field" code:

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

So bekommen Sie genau das, wonach Sie suchen.

0
ring bearer

Benötigen Sie sie überhaupt als Eingabeelemente? Sie können Javascript verwenden, um Divs, Absätze oder Listenelemente oder andere Elemente, die die Informationen enthalten, die Sie präsentieren möchten, dynamisch zu erstellen.

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. 

0
BlairHippo
$('#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>
0
Denis Lukyanov