Wyłączone dane wejściowe formularza nie pojawiają się w żądaniu

340

Mam pewne wyłączone dane wejściowe w formularzu i chcę je wysłać na serwer, ale Chrome wyklucza je z żądania.

Czy istnieje jakieś obejście tego problemu bez dodawania ukrytego pola?

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />

    <!-- this does not appear in request -->
    <input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

</form>
hazzik
źródło
2
@Liam to bardzo dziwna próba zamknięcia na korzyść mniej uczęszczanych pytań o niższej jakości odpowiedzi.
hazzik
Starszy mniej uczęszczanej pytanie. Technicznie pytanie to powinno zostać zamknięte jako duplikat, gdy zostało zadane. Oflagowałem go za pomocą modu do potencjalnego scalenia, może się nie zdarzyć. To zależy od nich.
Liam,
@Liam w rzeczywistości pytania są różne, nawet niektóre odpowiedzi wyglądają podobnie. Pytam o to, jak zrobić pole „wyłączone”, aby przesyłać wartości, a kolejne pytanie dotyczy „powodów”
hazzik
Dotarłem tu dopiero po kilku godzinach próbowania rozwiązania. Ehhh ..
Matechek

Odpowiedzi:

729

Elementy z disabledatrybutem nie są przesyłane lub można powiedzieć, że ich wartości nie są publikowane (zobacz drugi punkt pod krokiem 3 w specyfikacji HTML 5 na temat tworzenia zestawu danych formularza ).

To znaczy,

<input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

Do Twojej wiadomości, zgodnie z 17.12.1 w specyfikacji HTML 4:

  1. Wyłączone elementy sterujące nie są aktywowane.
  2. Wyłączone elementy sterujące są pomijane w nawigacji po kartach.
  3. Wyłączonych elementów sterujących nie można pomyślnie opublikować.

Możesz użyć readonlyatrybutu w swoim przypadku, robiąc to, będziesz mógł opublikować dane swojego pola.

To znaczy,

<input type="textbox" name="Percentage" value="100" readonly="readonly" />

Do Twojej wiadomości, według 17.12.2 w specyfikacji HTML 4:

  1. Elementy tylko do odczytu są aktywowane, ale użytkownik nie może ich modyfikować.
  2. Elementy tylko do odczytu są zawarte w nawigacji po kartach.
  3. Elementy tylko do odczytu zostały pomyślnie opublikowane.
Samiec alfa
źródło
8
Aby odpowiedzieć na moje pytanie: Nie, readony działa tylko dla <input /> form control of type = 'text' i type = 'password' oraz dla <textarea />. Tylko do odczytu uniemożliwia użytkownikowi zmianę wartości kontrolnych. Zapobieganie zmianie wartości pola wyboru (lub wprowadzania typu radia) przez użytkownika nie ma większego sensu ...
Muleskinner,
3
@ danielson317 Możesz zachować element wyboru „wyłączony”, ale także dodać kolejne ukryte dane wejściowe o tej samej wartości.
AlphaMale
1
@AlphaMale Ale ukryty element nie może mieć tej samej nazwy (lub nie powinien). Przeszedłem przez to, pozwalając elementowi być pustym i po prostu pulsując pierwotną wartością ze stanu zapisanego formularza. Warto tylko zauważyć, że readonly nie działa na wybranych elementach formularza.
danielson317
2
Czy kiedykolwiek coś odkrywasz i myślisz: „Co do cholery sprawiło, że pomyśleli, że to będzie oczywiste?” Jeśli mam problem z włączeniem pola wejściowego, które może zostać wyłączone, oznacza to, że nie chcę, aby użytkownik go zmienił, a nie, aby działało tak, jakby nigdy nie zostało zadeklarowane!
Nick Bedford,
1
Dziękuję, to było pomocne i zarówno odpowiedź, jak i odpowiedź.
user1449249
25

Używając Jquery i wysyłając dane za pomocą ajax, możesz rozwiązać swój problem:

<script>

$('#form_id').submit(function() {
    $("#input_disabled_id").prop('disabled', false);

    //Rest of code
    })
</script>
LipeTuga
źródło
+1 dobrą rzeczą w tym rozwiązaniu jest to, że nadal możesz używać czerwonej ikony wyłączania, gdy użytkownik przekroczył wejście =)
JMASTER B
5
@ArielMaduro możesz to zrobić za pomocą csscursor:not-allowed;
sricks
@ sricks oh naprawde ?? Czy możesz podać przykład?
JMASTER B
bardziej podoba się to rozwiązanie niż tylko do odczytu, ponieważ pola wyłączone nie mogą być aktywowane
Andreas
9

Aby księgować wartości z wyłączonych danych wejściowych oprócz włączonych danych wejściowych, możesz po prostu ponownie włączyć wszystkie dane wejściowe formularza podczas jego przesyłania.

<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

Jeśli wolisz jQuery:

<form onsubmit="$(this).find('input').prop('disabled', false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

W przypadku ASP.NET MVC C # Razor dodajesz procedurę obsługi przesyłania w następujący sposób:

using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
    // Re-enable all input elements on submit so they are all posted, even if currently disabled.
    new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
    <!-- form content with input elements -->
}
Tom Blodget
źródło
brakuje jednego z cytatów dotyczących opcji jquery
cagcak
8

Jeśli absolutnie musisz wyłączyć pole i przekazać dane, możesz użyć javascript, aby wprowadzić te same dane do ukrytego pola (lub po prostu ustawić również pole ukryte). Umożliwi to wyłączenie tej funkcji, ale nadal publikowanie danych, nawet jeśli będziesz publikować na innej stronie.

Chris Pierce
źródło
1
Tego rozwiązania używałem również - ale jak się właśnie dowiedziałem - własność tylko do odczytu jest znacznie lepszym rozwiązaniem
Muleskinner,
4

Aktualizuję tę odpowiedź, ponieważ jest bardzo przydatna. Po prostu dodaj tylko do odczytu.

Tak więc formularz będzie:

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />
    <input type="textbox" name="Percentage" value="100" readonly/>
</form>
Limon
źródło
4

Semantycznie wydaje się to prawidłowym zachowaniem

Zadawałbym sobie pytanie „ Dlaczego muszę podać tę wartość?

Jeśli masz wyłączone dane wejściowe w formularzu, prawdopodobnie nie chcesz, aby użytkownik zmieniał wartość bezpośrednio

Każda wartość wyświetlana w wyłączonym wejściu powinna być

  1. wyjście z wartości na serwerze, który utworzył formularz, lub
  2. jeśli formularz jest dynamiczny, można go obliczyć na podstawie innych danych wejściowych w formularzu

Zakładając, że serwer przetwarzający formularz jest taki sam, jak serwer go obsługujący, wszystkie informacje do odtworzenia wartości wyłączonych danych wejściowych powinny być dostępne podczas przetwarzania

W rzeczywistości, aby zachować integralność danych - nawet jeśli wartość wyłączonego wejścia została wysłana do serwera przetwarzania, naprawdę powinieneś ją sprawdzić. Ta walidacja wymagałaby tego samego poziomu informacji, co i tak musiałbyś odtworzyć wartości!

Niemal argumentowałbym, że dane wejściowe tylko do odczytu nie powinny być wysyłane w żądaniu

Cieszę się, że mogę to poprawić, ale wszystkie przypadki użycia, które mogę wymyślić, gdzie należy przesyłać dane tylko do odczytu / wyłączone, to tak naprawdę tylko ukryte problemy ze stylem

Arth
źródło
1
nie zapominając, że jego wartością można manipulować bezpośrednio za pomocą narzędzi programistycznych chrome
jimjim
2

Uważam, że to działa łatwiej. czytaj tylko pole wejściowe, a następnie nadaj mu styl, aby użytkownik końcowy wiedział, że jest tylko do odczytu. umieszczone tutaj dane wejściowe (na przykład z AJAX) można nadal przesyłać bez dodatkowego kodu.

<input readonly style="color: Grey; opacity: 1; ">
Erik Robinson
źródło
-6

Możesz całkowicie uniknąć wyłączenia, jest to bolesne, ponieważ format formularza HTML nie wysyła nic związanego <p>ani żadnej innej etykiety.

Możesz zamiast tego ustawić regularnie

<input text tag just before you have `/>

Dodaj readonly="readonly"

Nie wyłączyłby tekstu, ale nie zmieniłby się przez użytkownika, więc działa jak <p>i wyśle ​​wartość poprzez formularz. Po prostu usuń ramkę, jeśli chcesz uczynić ją bardziej podobną do <p>tagu

Amin MyCard
źródło