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

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>

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.

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>

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

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.

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>

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

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

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