Zatrzymaj przesyłanie pola wejściowego w formularzu

114

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.

Żołądź
źródło
2
jaki jest problem, jeśli zostaną przesłane? Możesz wybrać, które pola mają być przetwarzane w języku po stronie serwera.
Sarfraz
6
Nie wierzę, że nienazwane elementy formularza pojawiają się po przesłaniu formularza - jeśli możesz napisać swój JS, aby odwoływać się do nich za pomocą identyfikatora, możesz pozostawić ich nazwy puste, skutecznie uniemożliwiając ich przesłanie.
gddc
2
pozostaw pole atrybutu nazwy puste
deostroll
@Sarfraz Ahmed: Piszę skrypt greasemonkey, więc nie mam kontroli nad witryną.
Żołądź
11
Zgodnie z w3: do dołączenia do przesłania formularza. pole (element formularza) musi być zdefiniowane w elemencie formularza i musi mieć atrybut nazwy. Elementy bez nazwy lub niezawarte w formularzu nie są przesyłane na serwer.
kennebec

Odpowiedzi:

159

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();
});
Gal
źródło
7
Pominięcie nazwy uniemożliwia jej przesłanie? Fajnie, nie wiedziałem tego. Czy to działa we wszystkich przeglądarkach? Czy jest to część standardu, czy też dziwactwo implementacyjne?
BlairHippo
2
@Acorn Nie jestem do końca pewien, ale warto o tym poczytać. Zasadniczo, jeśli pominiesz wartość atrybutu „name”, nie możesz uzyskać dostępu do tej wartości żadną metodą ... więc może się zdarzyć, że wartość zostanie po prostu odrzucona przez przeglądarkę. Jeśli kluczowe znaczenie ma dla Ciebie bezpieczeństwo, wybierz opcję jquery / javascript (pamiętaj tylko, że pola ZOSTANĄ przesłane, gdy javascript zostanie łatwo wyłączone - więc nie polegaj na tym żadnym ze swoich mechanizmów bezpieczeństwa).
Gal
17
Testowałem pomijanie atrybutu nazwy w chrome, firefox, safari i wygląda na to, że pola formularza są przesyłane na serwer z pustym ciągiem dla nazwy. Sprawdziłem dane postu za pomocą WebScarab i stwierdziłem, że dane są wysyłane. Na razie myślę, że będę musiał wyłączyć pola, aby uniemożliwić ich przesyłanie.
kldavis4
1
@ kldavis4 - wydaje się, że zarówno pasek (stripe.js), jak i Braintree (braintree.js) [link] braintreepayments.com/docs/python/guide/getting_paid używają koncepcji atrybutu „ pomijanie nazwy”, aby zatrzymać dane trafiające na serwery zmniejszając w ten sposób potrzebę zgodności ze standardem „PCI”… jeśli mówisz, że wysyłane są „dane”, czy są one błędne?
Rahul Dighe
57

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

Johrn
źródło
Chodzi o to, aby moje wstawione pola były użyteczne, aby użytkownik mógł zmieniać pola wyboru itp., A następnie przesyłać je do mojego javascript.
Żołądź
3
Wyłączone może nadal działać, jeśli wyłączysz pola tylko przy przesłaniu lub na podstawie zaznaczonego pola wyboru. W ten sposób nie wyrzucasz po prostu namemajątku, którego możesz chcieć zatrzymać, jeśli chcesz, aby był używany później.
JMTyler
Jest to świetne, gdy musisz przesłać formularz za pomocą AJAX i nie chcesz usuwać danych wejściowych z formularza ani usuwać ich nameatrybutu.
Nolonar,
15

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">
Lesha Pipiev
źródło
To powinna być odpowiedź :))
Máxima Alekz
1
Działa to w przypadku pól wyboru. Należy jednak pamiętać, że spowoduje to przerwanie automatycznego usuwania zaznaczenia drugiego przycisku opcji, gdy jest używany z przyciskami opcji.
2017
10

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" />
farvgnugn
źródło
1
podczas gdy to prawdopodobnie działa (nie zostało przetestowane), chyba że faktycznie zdefiniujesz fakeFormgdzie indziej (nie ma potrzeby przesyłania), skutkuje to nieprawidłowym HTML.
Brian H.
1
Jeśli nie chcesz dodawać javascript i potrzebujesz danych wejściowych w formularzu podczas interakcji z użytkownikiem. Z mojej perspektywy jest to zdecydowanie najprostsze rozwiązanie.
yannisalexiou
1
UWAGA: To rozwiązanie nie działa z IE . Sprawdź tutaj
Harvey,
@Harvey Yikes! Dzięki za ostrzeżenie!
Joshua Pinter
9

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;
Jacob Relkin
źródło
2

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.

Będzie
źródło
Proste i zrozumiałe. Lubię to!
pbarney
2

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

Pikka pikka
źródło
2

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

Delfshkrimm
źródło
Ciekawa obserwacja, ale czy przetestowałeś to w różnych przeglądarkach? Zastanawiam się, czy jest to zgodne z projektem, specyfikacją, czy po prostu dziwactwem zachowania przeglądarki. Czy będzie to niezawodna metoda na przyszłość, gdy zmieniają się przeglądarki?
scipilot
1

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.

posiadacz pierścienia
źródło
0

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.

BlairHippo
źródło
Tak, potrzebuję ich jako elementów wejściowych, ponieważ próbuję uzyskać dane wejściowe użytkownika.
Żołądź
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
źródło
Niestety atrybut formularza nie działa w IE / Edge. caniuse.com/#search=form%20attribute
George Helyar
0

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

Vasilakakis Anastasios
źródło