Zatrzymaj przesyłanie pola wejściowego w formularzu

Piszę trochę javascript (greasemonkey / userscript), który wstawi niektóre pola do formularza na stronie internetowej.

Rzecz w tym, że nie chcę, aby te pola wejściowe w jakikolwiek sposób wpływały na formularz, nie chcę, aby były przesyłane podczas przesyłania formularza, chcę, aby mój javascript miał tylko dostęp do ich wartości.

Czy jest jakiś sposób, żebym mógł dodać niektóre pola wejściowe w środku formularza i nie mieć ich przesłanych podczas przesyłania formularza?

Oczywiście idealnym rozwiązaniem byłoby, gdyby pola wejściowe nie znajdowały się w elemencie formularza, ale chcę, aby układ mojej strony wynikowej zawierał wstawione pola wejściowe między elementami pierwotnego formularza.

Możesz wstawić pola wejściowe bez atrybutu „nazwa”:

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

Lub możesz je po prostu usunąć po przesłaniu formularza (w jQuery):

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

Najłatwiej byłoby wstawić elementy z disabledatrybutem.

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

W ten sposób nadal możesz uzyskać do nich dostęp jako elementy podrzędne formularza.

Wyłączone pola mają tę wadę, że użytkownik nie może w ogóle wchodzić z nimi w interakcję - więc jeśli masz disabledpole tekstowe, użytkownik nie może zaznaczyć tekstu. Jeśli masz disabledpole wyboru, użytkownik nie może zmienić jego stanu.

Możesz również napisać skrypt javascript, który będzie uruchamiany podczas przesyłania formularza, aby usunąć pola, których nie chcesz przesyłać.

Prosta próba usunięcia atrybutu nazwy z elementu wejściowego.
Więc to musi wyglądać

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

Chciałem tylko dodać dodatkową opcję: W swoim wejściu dodaj tag formularza i podaj nazwę formularza, który nie istnieje na twojej stronie:

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

Możesz napisać procedurę obsługi zdarzeń, onsubmitktóra usuwa nameatrybut ze wszystkich pól wejściowych, których nie chcesz uwzględniać w przesyłanym formularzu.

Oto szybki, nieprzetestowany przykład:

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;

Wiem, że ten post jest stary, ale i tak odpowiem. Najłatwiejszym / najlepszym sposobem, jaki znalazłem, jest po prostu ustawienie pustej nazwy.

Umieść to przed przesłaniem:

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

Podsumowując, Twoja funkcja przesyłania może wyglądać następująco:

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

Spowoduje to przesłanie formularza ze wszystkimi innymi polami, ale nie spowoduje przesłania formularza bez nazwy.

Dodaj disabled = "disabled" na wejściu i podczas gdy jquery usuń atrybut wyłączony, jeśli chcesz go przesłać za pomocą .removeAttr ('disabled')

HTML:

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

jQuery:

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

Wszystkie powyższe odpowiedzi mówiły już wszystko o (nie) nazywaniu formantów formularza lub programowym usuwaniu ich przed faktycznym wysłaniem formularza.

Chociaż w trakcie moich badań znalazłem jedno inne rozwiązanie, którego nie widziałem, wspomniane w tym poście:
Jeśli hermetyzujesz kontrolki formularza, które chcesz, aby były nieprzetworzone / nie wysyłane, wewnątrz innego <form>tagu bez methodatrybutu ani path(i oczywiście bez kontroli typu przesyłania jak przycisk lub zagnieżdżone w nim dane wejściowe), a przesłanie formularza nadrzędnego nie będzie obejmować tych hermetyzowanych formantów formularza.

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

Wartość kontrolna [name = "notSent"] nie będzie przetwarzana ani wysyłana do punktu końcowego POST serwera, ale ta z [name = "sent"] będzie.

To rozwiązanie może być anegdotyczne, ale nadal zostawiam je potomności ...

Obsługuj przesyłanie formularza w funkcji za pomocą onSubmit () i wykonaj coś takiego jak poniżej, aby usunąć element formularza: Użyj getElementById()DOM, a następnie użyj[object].parentNode.removeChild([object])

załóżmy, że Twoje pole ma kod identyfikatora „my_removable_field”:

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

Dzięki temu uzyskasz dokładnie to, czego szukasz.

Czy w ogóle potrzebujesz ich jako elementów wejściowych? Możesz użyć Javascript do dynamicznego tworzenia elementów div, akapitów, elementów listy lub czegokolwiek, co zawiera informacje, które chcesz przedstawić.

Ale jeśli element interaktywny jest ważny i trudno jest umieścić te elementy poza <form>blokiem, powinno być możliwe usunięcie tych elementów z formularza po przesłaniu strony.

Musisz dodać onsubmit w swoim formularzu:

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

A skrypt będzie wyglądał następująco:

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

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

To działa na mnie za każdym razem :)