¿Cómo puedo hacer que un campo de entrada sea de solo lectura pero aún así enviar datos a un formulario?

3 minutos de lectura

avatar de usuario
UCC

Tengo un campo de entrada:

<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" />

Quiero que el campo se muestre en mi formulario, pero no quiero que el usuario pueda editar el campo. Cuando el usuario hace clic en enviar, quiero que el valor del formulario se envíe de vuelta al servidor.

Es posible. Probé diferentes combinaciones de disabled = "disabled", readonly = "readonly". Parece que siempre no me devuelven nada para el campo.

avatar de usuario
petah

Agregar un campo oculto con el mismo nombre enviará los datos cuando se envíe el formulario.

<input type="hidden" name="my_name" value="blablabla" />
<input type="text" name="my_name" value="blablabla" disabled="disabled" />

  • Esto no funciona en absoluto. Si lo desactiva, no se enviará con el formulario. En su lugar, deberá usar solo lectura.

    – Donato

    16/10/2014 a las 19:33

  • @DanStayntouch el campo deshabilitado no envía los datos, el oculto sí.

    – Petaj

    17 de octubre de 2014 a las 0:13

  • Tan simple y sin embargo tan efectivo. ¡Estoy un poco avergonzado de no haber pensado en eso yo mismo! 🙂

    – siete instrumentos

    17 mayo 2017 a las 12:55

Suponiendo que está utilizando un script para crear el formulario, le sugiero que utilice <input type="hidden" /> que enviará la variable con el formulario, pero también usará un <input type="text" readonly="readonly" /> para mostrar la variable al usuario. Esto no enviará el valor, obviamente, pero voluntad hacerlo visible (mientras que el hidden input enviará el valor, pero no mostrar el valor).

También puedes hacer esto con JavaScript:

var theForm = document.getElementsByTagName('form')[0];
var inputs = document.getElementsByTagName('input');

for (i=0; i<inputs.length; i++){
    if(inputs[i].type == 'hidden'){
        var newInput = document.createElement('input');
        newInput.type="text";
        newInput.setAttribute('disabled');
        newInput.value = inputs[i].value;
        theForm.appendChild(newInput);
    }
}

Demostración torpe de JS Fiddle.

Con el navegador Chrome en Windows 10, solo tiene name=”your_name” y los atributos de solo lectura funcionan bien: el cliente no puede cambiar un valor, pero se envía al servidor.

  • Lo mismo para IE 11 y Edge en Windows 10.

    – Edwin Stoler

    1 de noviembre de 2018 a las 9:17

alternativamente, puede hacer una pequeña manipulación con javascript, eliminar la propiedad deshabilitada antes de enviar el formulario

<form action="target.php" method="post">
<input type="text" id="anu" name="anu" value="data anu" disabled="disabled" />
<button onclick="document.getElementById('anu').disabled=''">send</button>

<script type="text/javascript"> 
    function myFn(event) { 
        event.stopPropagation(); event.preventDefault(); 
    } 
</script> 

<input onkeydown="myFn(event)" >

  • Si bien este código puede responder la pregunta, proporcionar contexto adicional sobre cómo y/o por qué resuelve el problema mejoraría el valor a largo plazo de la respuesta.

    – Ethan

    04/06/2018 a las 19:51

  • Este código funciona porque detiene la acción predeterminada para el evento del teclado (está escribiendo char)

    – Vasil Petrov

    9 de agosto de 2018 a las 8:55

avatar de usuario
Ronith RN

Puede agregar ‘readonly’=’true’ en el elemento de entrada. Con esto, el usuario no puede editar y también enviar el valor al servidor.

<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" readonly='true' />

  • Si bien este código puede responder la pregunta, proporcionar contexto adicional sobre cómo y/o por qué resuelve el problema mejoraría el valor a largo plazo de la respuesta.

    – Ethan

    04/06/2018 a las 19:51

  • Este código funciona porque detiene la acción predeterminada para el evento del teclado (está escribiendo char)

    – Vasil Petrov

    9 de agosto de 2018 a las 8:55

Deberías considerar usar la entrada tipo = “oculto” al enviar campos de solo lectura. De lo contrario, si aún necesita que el valor del campo de entrada sea visible, debe crear otra entrada (tipo = texto) con un nombre diferente.

<input cid="Topic_Created" name="Topic.Created" type="hidden" value="6/5/2011 8:22:45 AM" />
<!--This is visible: -->
<input cid="Topic_Created" name="doesntmatter" size="25" type="text" value="6/5/2011 8:22:45 AM" />

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad