Las entradas de formulario deshabilitadas no aparecen en la solicitud

339

Tengo algunas entradas deshabilitadas en un formulario y quiero enviarlas a un servidor, pero Chrome las excluye de la solicitud.

¿Hay alguna solución para esto sin agregar un campo oculto?

<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
fuente
2
@Liam es un intento muy extraño de cerrar a favor de preguntas menos atendidas con respuestas de menor calidad.
hazzik
Una pregunta anterior menos atendida. Técnicamente, esta pregunta debería haberse cerrado como un duplicado cuando se hizo. Lo he marcado con un mod para una posible fusión, puede o no suceder. Depende de ellos.
Liam
@Liam, de hecho, las preguntas son diferentes, incluso algunas respuestas son similares. Me pregunto acerca de cómo hacer campo "desactivada" para enviar los valores, y otra pregunta se refiere a "razones"
hazzik
Solo llegué aquí después de pasar unas horas tratando de resolverlo. Ehhh ..
matcheek 01 de

Respuestas:

728

Los elementos con el disabledatributo no se envían o puede decir que sus valores no se publican (vea el segundo punto en el Paso 3 en la especificación HTML 5 para construir el conjunto de datos del formulario ).

Es decir,

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

Para su información, por 17.12.1 en la especificación HTML 4:

  1. Los controles deshabilitados no reciben foco.
  2. Los controles deshabilitados se omiten en la navegación con pestañas.
  3. Los controles deshabilitados no se pueden publicar con éxito.

Puedes usar readonly atributo en su caso, al hacer esto podrá publicar los datos de su campo.

Es decir,

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

Para su información, por 17.12.2 en la especificación HTML 4:

  1. Los elementos de solo lectura reciben foco pero el usuario no puede modificarlos.
  2. Los elementos de solo lectura se incluyen en la navegación por tabulación.
  3. Los elementos de solo lectura se publican correctamente.
Macho alfa
fuente
8
Para responder mi propia pregunta: No, readony solo funciona para <input /> control de formulario de type = 'text' y type = 'password' y para <textarea />. Lo que solo hace es evitar que el usuario cambie el valor de los controles. Evitar que el usuario cambie el valor de una casilla de verificación (o entrada de tipo de radio) no tiene mucho sentido ...
Muleskinner
3
@ danielson317 Puede mantener el elemento seleccionado "deshabilitado" pero también agregar otra entrada oculta con el mismo valor.
AlphaMale
1
@AlphaMale Pero el elemento oculto no puede tener el mismo nombre (o no debería). Superé esto permitiendo que el elemento esté vacío y simplemente extrayendo el valor original del estado del formulario guardado. Vale la pena señalar que solo lectura no funciona en elementos de formulario seleccionados.
danielson317
2
¿Alguna vez has descubierto algo y piensas: "¿Qué demonios les hizo pensar que esto sería obvio?" Si me tomo la molestia de incluir un campo de entrada que puede o no estar deshabilitado, eso significa que no quiero que el usuario lo cambie, ¡no es que deba actuar efectivamente como si nunca se hubiera declarado!
Nick Bedford
1
Gracias, esto fue útil y tanto la respuesta como la respuesta.
user1449249
25

Usando Jquery y enviando los datos con ajax, puede resolver su problema:

<script>

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

    //Rest of code
    })
</script>
LipeTuga
fuente
+1 lo bueno de esta solución es que aún puede usar el ícono rojo de desactivación cuando el usuario sobrepasa la entrada =)
JMASTER B
55
@ArielMaduro puedes hacerlo con csscursor:not-allowed;
sricks
@sricks oh en serio ?? ¿Puede dar un ejemplo?
JMASTER B
me gusta esta solución más que usar solo lectura, porque los campos deshabilitados no pueden recibir foco
Andreas
9

Para publicar valores de entradas deshabilitadas además de las entradas habilitadas, simplemente puede volver a habilitar todas las entradas del formulario a medida que se envían.

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

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

Para ASP.NET MVC C # Razor, agrega el controlador de envío de esta manera:

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
fuente
faltan citas de la opción jquery
cagcak
8

Si absolutamente tiene que deshabilitar el campo y pasar los datos, puede usar un javascript para ingresar los mismos datos en un campo oculto (o simplemente configurar el campo oculto también). Esto le permitiría desactivarlo, pero aún así publicar los datos a pesar de que estaría publicando en otra página.

Chris Pierce
fuente
1
Esta solución es lo que he estado usando también, pero como acabo de aprender, la propiedad de solo lectura es una solución mucho mejor
Muleskinner
4

Estoy actualizando esta respuesta ya que es muy útil. Simplemente agregue solo lectura a la entrada.

Entonces la forma será:

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />
    <input type="textbox" name="Percentage" value="100" readonly/>
</form>
Limon
fuente
4

Semánticamente esto se siente como el comportamiento correcto

Me preguntaría " ¿Por qué debo enviar este valor? "

Si tiene una entrada deshabilitada en un formulario, presumiblemente no desea que el usuario cambie el valor directamente

Cualquier valor que se muestre en una entrada deshabilitada debe ser

  1. salida de un valor en el servidor que produjo el formulario, o
  2. si el formulario es dinámico, sea calculable a partir de las otras entradas en el formulario

Suponiendo que el servidor que procesa el formulario es el mismo que el servidor que lo sirve, toda la información para reproducir los valores de las entradas deshabilitadas debe estar disponible en el procesamiento

De hecho, para preservar la integridad de los datos, incluso si el valor de la entrada deshabilitada se envió al servidor de procesamiento, realmente debería validarlo. ¡Esta validación requeriría el mismo nivel de información que necesitaría para reproducir los valores de todos modos!

Casi argumentaría que las entradas de solo lectura no deberían enviarse en la solicitud tampoco

Feliz de ser corregido, pero todos los casos de uso en los que puedo pensar donde se deben enviar entradas de solo lectura / deshabilitadas son realmente solo problemas de estilo disfrazados

Arth
fuente
1
no hay que olvidar que se trata de valor puede ser manipulado con las herramientas para desarrolladores de Chrome directamente
jimjim
2

Me parece que esto funciona más fácil. solo lea el campo de entrada, luego dele estilo para que el usuario final sepa que es de solo lectura. las entradas colocadas aquí (de AJAX, por ejemplo) aún pueden enviarse, sin código adicional.

<input readonly style="color: Grey; opacity: 1; ">
Erik Robinson
fuente
-6

Puede evitar totalmente la desactivación, es doloroso ya que el formato de formulario html no enviará nada relacionado con <p> alguna otra etiqueta.

Entonces puedes poner regular

<input text tag just before you have `/>

Agrega esto readonly="readonly"

No deshabilitaría su texto, pero no lo cambiaría por usuario, por lo que funciona <p>y enviará valor a través del formulario. Simplemente elimine el borde si desea hacerlo más como <p>etiqueta

Amin MyCard
fuente