3

Buen dia, tengo un formulario donde hay el siguiente select con el atributo disabled , al presionar un checkbox se quita el atributo . Pero el select no es obligatorio. Lo que sucede cuando envio el POST a traves de ajax es que me aparece un error : variable uucmay no definida, pero cuando hago la prueba sin el atributo disabled todo opera bien. ¿Como puedo resolverlo, o que alternativa podría hacer?




                      <div class="form-group" >

                        <label>A</label>

                        <select name="uucmay" class="form-control formx " disabled id="secq" onchange="tokcal()"> 
                          <option value="0" selected>... </option>
                          <option value="1">Cuarto</option>
                          <option value="2">Media/o</option>
                          <option value="3">Un/a</option>
                          <option value="4">Dos</option>
                          <option value="5">Tres</option>
                        </select>
                      </div>


 $(function(){
        $("#formnprod").on("submit", function(e){
            e.preventDefault();
            var f = $(this);
            var formData = new FormData($("#formnprod")[0]);
            formData.append("dato", "valor");
            //formData.append(f.attr("name"), $(this)[0].files[0]);

            $.ajax({
                url: "corp/func/subir.php",
                type: "post",
                data: formData,
                contentType: false,
                  processData: false,
              
                success: function(datos){
                  alert('hey'+datos);
            
                },
            });

 


        });
    });



//el post en la pagina de llegada 
 $umay= $_POST['uucmay'];
//luego la variable $umay la sanitizo y filtro, pero bajo variables de distinto nombre.

EDITADO ->

Estuve leyendo cada una de sus respuestas y muchas gracias. Las probé , pero lo pensé bien y para lo que necesito decidí implementar el cambio de estilos, luego mediante php validaré los input y su contenido antes de enviarlo a sql. Gracias por sus respuestas, será de mucha ayuda para otros con problemas similares.

2
  • ¿Dónde te dice variable uucmay no definida en el cliente o en el servidor? Si ese dato es opcional, debes usar isset() o empty() en el servidor para verificar si está o no, no intentar acceder a él sin más.
    – A. Cedano
    el 18 feb. 2021 a las 23:48
  • Creo que lo ideal sería que del lado del servidor se obtenga directamente el valor que no se debe modificar, ya sea de base de datos o cualquier otra fuente. Es la única justificación entendible para deshabilitar un campo; si no se hace la validación desde el servidor, cualquier usuario con mínimos conocimientos del navegador puede modificar el código y enviar valores que no corresponden.
    – Triby
    el 19 feb. 2021 a las 15:57

3 respuestas 3

2

Un <input>, <select> o <textarea> no se envía por POST si este posee el atributo disabled. Pero puedes ponerle en vez de dicho atributo una clase que simule su comportamiento.

Creé una clase y le puse la propiedad pointer-events: none para que no se pueda interactuar con él. El resto de propiedades son estéticas para asemejarlo al aspecto de un <select> con disabled.

Si inspeccionadas la pestaña network de las herramientas de desarrollador del navegador al pulsar en el submit de mi ejemplo, podrás ver que el valor del primer <select> no se está enviando, sin embargo el de los otros dos sí.

.disabled {
  pointer-events: none;
  opacity: 0.7;
  border-color: rgba(118, 118, 118, 0.3);
  color: -internal-light-dark(graytext, rgb(170, 170, 170));
}
<form>
  <select name="select1" disabled>
    <option>1A</option>
    <option>1B</option>
  </select>

  <select name="select2" class="disabled">
    <option>2A</option>
    <option>2B</option>
  </select>

  <select name="select3">
    <option>3A</option>
    <option>3B</option>
  </select>
  
  <input type="submit" value="enviar">
</form>

EDIT

The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form.

Referencia: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled

4
  • Si es para mandar los datos por Ajax, no hace falta recurrir a soluciones oscuras, simplemente recoges el dato en Javascript y lo pasas a la petición Ajax. Si usa FormData (en caso de que no recoja el dato directamente, cosa que no he probado) lo puede agregar con append. Con Ajax y con APIs modernas como FormData no hay que andar haciendo trampa para mandar datos :), eso era hace dos décadas quizá ¿? De todos modos la pregunta no es clara, ni siquiera OP explica dónde ocurre el undefined ni qué es lo que quiere hacer exactamente. Por esos 2 motivos tendré que votar contra tu respuesta.
    – A. Cedano
    el 19 feb. 2021 a las 0:01
  • 2
    En la pregunta se entendía perfectamente que el problema era que no se estaba recibiendo el valor de un campo disabled, en cambio al quitarle el atributo si que se recibía. Mi respuesta ilustra este hecho. Si no quieres que se interactúe con un elemento pero si que sus datos se envíen, no uses un disabled porque no están pensandos para eso. Usa un readonly si el campo te lo permite o si no lo restringes con CSS. Los campos disabled tienen esta peculiaridad por algo.
    – phpMyGuel
    el 19 feb. 2021 a las 7:50
  • No me parece una buena práctica recurrir a procedimientos oscuros para resolver un problema que podría estar a otro nivel. Si lo que interesa es mandar los datos por Ajax estos pueden recogerse de una forma más simple. Sigo pensando que el problema que se plantea aquí es debido a un enfoque erróneo, aunque cada uno es libre de programar como quiera. Nada de esto es necesario para recoger unos datos y mandarlos por Ajax. Simplemente se está recargando el código y haciendo complicado algo muy simple, a mi entender.
    – A. Cedano
    el 19 feb. 2021 a las 9:59
  • No creo que se debata en lo que el código se puede mejorar o no. La pregunta es concisa y mi respuesta también. Pregunta: No se está enviando un campo con el atributo disabled. Solución: No lo uses. Si lo que quieres evitar es que el usuario interactúe con tu elemento hay muchas otras soluciones que no pasan por afectar al comportamiento nativo de un atributo. Me parece mucho más oscuro manipular con JS dicho comportamiento. Si inspecciono el HTML de una página y veo un elemento con disabled no me espero que se vaya a enviar junto con el formulario.
    – phpMyGuel
    el 19 feb. 2021 a las 10:05
1

Si por algún motivo justificado necesitas tener elementos disabled que deberían ser enviados vía Ajax, no es necesario recurrir a procedimientos oscuros para simular como disabled algo que no está disabled. Simplemente agrega ese elemento con .append(). Y, si son varios elementos, hay varias formas de agregarlos de forma automática, por ejemplo recorriéndolos por su misma propiedad disabled o de otro modo.

En el siguiente ejemplo se agrega el valor que tendría el select y éste se enviaría con los datos al servidor, sin importar que el select esté disabled o no:

$(function() {
  $("#formnprod").on("submit", function(e) {
    e.preventDefault();
    var formData = new FormData($("#formnprod")[0]);
    formData.append("dato", "valor");
    formData.append("uucmay", $("#secq").val());
    
for (var pair of formData.entries()) {
   console.log(`Llave: ${pair[0]} - Valor: ${pair[1]}`);
}
    //formData.append(f.attr("name"), $(this)[0].files[0]);
    /*
                $.ajax({
                    url: "corp/func/subir.php",
                    type: "post",
                    data: formData,
                    contentType: false,
                      processData: false,
                  
                    success: function(datos){
                      alert('hey'+datos);
                
                    },
                });
    */



  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<form id="formnprod">
  <label>A</label>

  <select name="uucmay" disabled class="form-control formx "  id="secq" >
    <option value="0" selected>... </option>
    <option value="1">Cuarto</option>
    <option value="2">Media/o</option>
    <option value="3">Un/a</option>
    <option value="4">Dos</option>
    <option value="5">Tres</option>
  </select>
  
  <input type="submit" />
  </form>
</div>

Recomendaciones

  • Por experiencia, cuando algo empieza a hacerse complicado y tienes que recurrir a trucos y soluciones oscuras para resolver algo simple, plantéate si el problema no está a otro nivel, por ejemplo, en la lógica que estás siguiendo para resolver un problema.

  • En tu código Javascript se aprecia una mala práctica que consiste en usar funciones in line. Me refiero a esto en tu select: onchange="tokcal()". Esta práctica es desaconsejada, porque hace que el código Javascript sea dependiente del contenido HTML, violando uno de los principios del paradigma conocido como Javascript no intrusivo. Dicho principio recomienda que haya una Separación de estructura y comportamiento.

    Las ventajas son enormes. Imagina por ejemplo una aplicación con miles de archivos HTML donde has puesto in line la función onchange="tokcal()". El código evoluciona y ahora se requiere que tokcal() reciba un parámetro. Te quiero ver hurgando entre miles de archivos para modificar tus onchange(). Si por el contrario, esa escucha del evento la haces desde un archivo Javascript que incluirías en todos los HTML que deban usarla, simplemente añadarías el parámetro en ese solo archivo, no en miles de archivos donde deberías cuidar de que no se te escape alguno, produciendo error en algún contexto.

  • Las funciones success y error de las peticiones Ajax de jQuery son obsoletas desde la versión 3. Deberías cambiarlas por done y fail. Igualmente, el parámetro type de las peticiones Ajax es obsoleto, deberías cambiarlo por method.

7
  • Aunque estoy de acuerdo con la mayoría de tus recomendaciones, no lo estoy con la de manipular el comportamiento de un atributo que tiene una función determinada. Al igual que no estaría de acuerdo en permitir que un formulario que posee un campo required y vacío se enviara al hacer el submit desde la función que envía el formulario por AJAX. Esto es ir en contra del objetivo de ambos atributos. De ahí mi voto negativo en tu respuesta.
    – phpMyGuel
    el 19 feb. 2021 a las 11:02
  • Añado que para hacer esto que mencionas: "no es necesario recurrir a procedimientos oscuros para simular como disabled algo que no está disabled" existe un atributo propio que es readonly, hace precisamente lo que necesitaba el OP (un elemento con el que no se puede interactuar pero que sin embargo se sigue enviando su información a través del formulario: developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly No lo usé en mi respuesta porque no está disponible para las etiquetas <select>.
    – phpMyGuel
    el 19 feb. 2021 a las 11:07
  • @phpMyGuel Cuando hablo de procedimiento oscuro me refiero a meterse a manipular la apariencia de los elementos para hacer que se comporten como algo que no son. Esto me parece más grave que simplemente mandar en una petición Ajax un elemento que está disabled. Esto, a mi juicio, no contradice ningún principio, aunque como bien dices, lo propio podría ser poner ese elemento como readonly, o no. Pensemos por ejemplo en un botón que tiene un valor que te interesa enviar y no quieres que el usuario haga click sobre él, podrías tenerlo disabled y enviar su valor como he explicado.
    – A. Cedano
    el 19 feb. 2021 a las 11:11
  • @phpMyGuel sea como sea, como dije en mi primera recomendación, estoy casi seguro que aquí lo que hay es un problema de lógica a otro nivel. De nada sirve ir parcheando código cuando tienes un problema de lógica. Tarde o temprano tendrás que volver atrás, replantear las cosas y casi seguro volver a re-escribir miles de líneas de código. Por eso yo insisto aquí en algunas preguntas en ir un poco más lejos, tratando de hacer ver que muchas veces el problema no está en nuestras narices, sino un poco más allá, en algo que planteaste mal en otro punto del programa.
    – A. Cedano
    el 19 feb. 2021 a las 11:14
  • No juzgo que quieras ir más allá de lo que la pregunta del OP expone (eso entra dentro de lo que cada uno desee responder y hasta donde quiera definir su alcance). Lo que he juzgado es la perversión que provoca tu respuesta sobre un atributo que tiene unas funciones muy determinadas. Al igual que no haría que un <input type="hidden"> fuese visible, tampoco haría que un <input disabled> se pudiese enviar. Lo de hacer que un elemento se parezca a otro se lleva haciendo en la maquetación desde siempre: botones que se asemejan a enlaces, ul que simulan comportamientos de selects...
    – phpMyGuel
    el 19 feb. 2021 a las 11:19
1

No deberías enviar por formulario un campo deshabilitado, en todo caso, se deben hacer las validaciones pertinentes en el servidor, usando asignación ternaria, aplicando un valor por defecto cuando el campo no se haya recibido:

$umay = isset($_POST['uucmay']) ? $_POST['uucmay'] : 'Valor por defecto';

De hecho, sería conveniente que hagas esto para todos los campos, de forma que siempre tengas opción para validar y hacer lo posible por garantizar que un usuario malintencionado no modifique cosas que no debe.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.