1

¿Cómo puedo pasar una variable de input html a una variable de php?. Este es mi código:

<input disabled  id="txtUser2" name="txtUser2" class="form-control" style="height:36px;">

Quiero capturar el valor del input, y almacenarlo en una variable php para luego comparar el campo.

El input es dinámico porque toma el valor de una base de datos.

Y pasarlo a un botón donde recoja esa variable y compararla para que desactive el botón:

button type="button" id="btnEliminar" ?php echo ($_SESSION['user']!=$Variable?"disabled":"")?
        class="btn btn-danger" Eliminar /button

Todo el código esta en un modal, el input txtUser2 toma el valor del usuario que haya hecho un registro, y lo puede eliminar, modificar lo que quiero es que si el input que toma el usuario del registro no es igual al usuario logueado que deshabilite los botones.


Quiero pasar el valor en mi misma pagina que se llama index.php, lo que quiero resumiendo es capturar el valor del input para luego pasarlo a un boton que compare donde la session del usuario sea diferente a ese boton, que lo deshabilite

5
  • Si tienes código, ¿php puedes subir la parte donde quieres recibir la variable?. Commented el 15 abr. 2019 a las 15:16
  • Quiero pasarlo aqui: <button type="button" id="btnEliminar" <?php echo ($_SESSION['user']!=$Variable?"disabled":"")?> class="btn btn-danger">Eliminar</button>
    – Jan Lewis
    Commented el 15 abr. 2019 a las 15:20
  • Donde $Variable, es la variable del input
    – Jan Lewis
    Commented el 15 abr. 2019 a las 15:20
  • Pulsa el boton editar, bajo tu pregunta, y agrega el código ahí :D Commented el 15 abr. 2019 a las 15:20
  • Lo mejor para lo que quieres hacer es usar Ajax. Te permite enviar cualquier dato al servidor (PHP), sin importar que ese dato esté en un formulario o no. Además lo puedes hacer sin recargar la página, y actualizar cualquier cosa de forma dinámica en base a la respuesta del servidor. Ni siquiera necesitarías un modal para esto, es más, los modales ya están pasados de moda :-), por más que algunos insisten en usarlos, sólo sirven para complicar la interfaz de usuario y el mismo código. Si aprendes a usar Ajax terminarás concluyendo que un modal tiene poco sentido hoy día. Saludos.
    – A. Cedano
    Commented el 15 abr. 2019 a las 15:42

3 respuestas 3

4

Si lo que quieres es usar ese input para pasar los valores como post necesitar quitarle el "disabled" porque los que estan deshabilitados el navegador no los toma en cuenta para pasarlos como POST.

El input tiene que estar dentro de un formulario para poder hacer submit o bien hacerlo con javascript.

Si lo que quieres es que no se edite el campo puedes intentar en vez de disabled, con un atributo que se llama readonly, con ese no pueden editar pero si se toma en cuenta para enviarlo al post.

5
  • serías tan amable de compartirme una referencia respecto al tema que mencionas de que disabled no se puede enviar por POST?
    – user75901
    Commented el 15 abr. 2019 a las 15:12
  • Mira entra a este post. stackoverflow.com/questions/7357256/… Commented el 15 abr. 2019 a las 15:15
  • hey muchas gracias por el dato, lo desconocía
    – user75901
    Commented el 15 abr. 2019 a las 15:16
  • Pero como paso esa variable a una en php? :/
    – Jan Lewis
    Commented el 15 abr. 2019 a las 15:35
  • mmm puedes utilizar un hidden, justo debajo del input que tienes deshabilitado, y le pasas el valor de la base de datos, asi ya puedes mandarlo por post aunque el otro input este deshabilitado. <input type="hidden" value="$valordelabd" name="txtUser2"> Commented el 15 abr. 2019 a las 20:32
3

Te doy la bienvenida a Stackoverflow.

La dificultad para resolver tu problema creo yo que se debe a que no estás usando la herramienta adecuada.

Primero voy a mostrar lo fácil que es recoger el valor de un elemento cualquiera, esté desactivado o no, oculto o no, sea de sólo lectura o no.

Aquí, por medio de Javascript, podemos con suma facilidad obtener el valor del input, sin importar su estado o sus características.

OJO, así como mandamos un simple input podemos mandar formularios completos con decenas o centenas de datos (de forma muy simple, serializando) y procesarlos de forma transparente en el servidor.

var ibxUserTwo=document.getElementById('txtUser2');
var toPost=ibxUserTwo.value;
console.log(toPost);
<input disabled  id="txtUser2" name="txtUser2" class="form-control" style="height:36px;" value="Test" />

Eso es lo que interesa ¿no?, el valor del input en este caso. Pues ya he mostrado una forma de obtenerlo.

Ahora surge la otra pregunta: ¿cómo lo envío al servidor? La palabra mágica aquí es ¡Ajax!. Que crea una comunicación bidireccional entre el cliente y el servidor. O sea, que por Ajax puedes enviar el valor del input, procesarlo, mandar una respuesta y en base a esa respuesta actualizar de nuevo la página que envió los datos. O sea, ¡ni siquiera haría falta un modal! o que la página se recargue.

Lo que debe quedar claro es que, cuando usas Ajax, habrá dos archivos:

  • archivoCliente: el que manda los datos (donde está tu input). Puede ser un archivo PHP, HTML, etc.
  • archivoServidor: el que recibe y procesa los datos, que debe ser un archivo PHP sí o sí. Ese archivo es sólo un utilitario, debes controlarlo muy bien y no sacar por pantalla nada más que lo que se espere archivoCliente que hizo la petición.

Veamos un ejemplo sencillo de Ajax, donde recogeremos el valor de tu input y lo pasaremos al servidor.

archivoCliente

Javascript

Usarmos un Ajax basado en la librería jQuery, porque es más simple. Ajax puede usarse también con Javascript puro o se puede usar fetch, pero es un poco más complejo, sobre todo al principio.

Para que este funcione debes agregar en el encabezado de tu archivo cliente la librería Ajax si no lo has hecho ya. Sugiero que uses la versión más moderna.

$(function() {
    /*Este bloque se lanzará cuando se presione el botón*/
    $('#btnEnviar').on('click', function(e) {
      e.preventDefault();
      /*Referencia al elemento input*/
      var ibxUserTwo = document.getElementById('txtUser2');
      var toPost = ibxUserTwo.value;
      /*URL del archivo que recibirá los datos que se manden al servidor*/
      var mUrl = 'archivoServidor.php';
      /*Datos que se mandarán al servidor, se pueden mandar varios datos*/
      var mData = { userTwo: toPost };
      var mAjax = $.ajax({
        url: mUrl,
        method: 'POST',
        data: mData,
        dataType: 'html'
      });

      /*
         Esta parte se ejecuta cuando la petición tiene éxito
         Aquí response será el contenido de lo que responda el servidor
         Simplemente lo pondremos en el contenedor cuyo id es txtOutput
         Se pueden hacer cosas más complejas, como responder un JSON desde el servidor
         y evaluarlo en esta parte, mostrando diferente tipo de contenido
      */
      mAjax.done(function(response) {
        $("#txtOutput").html(response);
      });
      /* Esta parte controla los posibles fallos*/
      mAjax.fail(function(jqXHR, textStatus) {
        alert("Falló la petición: " + textStatus);
      });

    });
});

HTML

Aquí tenemos el input que ya tienes, un botón que lanzará Ajax cuando se haga clic en él y para prueba he puesto un div que será actualizado con lo que el servidor responda. El dato se cambiará dentro de la parte done de la petición Ajax.

<input disabled id="txtUser2" name="txtUser2" class="form-control" style="height:36px;" value="Test" />
<button id="btnEnviar">Enviar</button>

<div id="txtOutput">
</div>

archivoServidor.php

Este es el archivo que recibirá en el servidor los datos que mandaste desde Ajax a través de mData.

Pondré un manejo simple, que evalúa si existe en la clave en el POST o no y en base a eso manda un mensaje. La intención es que aprendas lo básico de Ajax y cómo funciona. A partir de ahí, podrás resolver los problemas más enrevesados y complicados en la comunicación cliente servidor.

Lo importante de este archivo es que no sea un archivo loco, que imprima datos a diestra y siniestra, aquí debes controlar el código y sacar por pantalla un único dato que es lo que espera la petición Ajax.

En escenarios más complicados puedes usar un solo archivo para manejar diferentes peticiones, respondiendo según el caso con simple texto HTML, con un JSON, con un XML, etc. Aquí he ido a lo más simple para no complicarte.

$mUserTwo=!empty($_POST["userTwo"]) ? $_POST["userTwo"] : NULL;
if ($mUserTwo) {
     $txtOutput= ($mUserTwo=="Test") ? "Usuario correcto" : "Usuario incorrecto";
}else{
     $txtOutput="No se postearon datos para userTwo";
}
echo $txtOutput;

¿Ya está? Sí. Para algo simple basta con esto. Cuando pulses el botón Enviar en tu archivoCliente, el archivo de servidor buscará lo que hay en $_POST. Hemos usado primero un ternario para ver si se posteó un valor para userTwo: a. si se posteó, luego usaremos otro ternario para determinar si esa valor es igual a Test. Si lo es, $txtOutput adquirirá un valor y si no adquirirá otro. b. Si no se posteó, la variable de salida adquirirá el valor No se postearon datos para userTwo. Finalmente, el servidor imprimirá el valor de $txtOutput. Ajax recogerá el dato (en el done) y lo mostrará en el div indicado.

Es así de simple como Ajax funciona. Espero que en base a esto aprendas a usarlo, te ahorrará muchos dolores de cabeza y te permitirá construir aplicaciones impresionantemente prácticas, deshaciéndote de los modales y demás historias que son propias de los años 90, cuando Windows 3 era el boom de la informática. Estamos ya en otra época. Si tienes alguna duda, tienes el área de comentarios para pedir aclaraciones.

Saludos.

PD: Ejemplo funcionando

Aquí te dejo un ejemplo que funciona en línea, basado en la API de Github. Aquí al cambiar de usuario en el select se lanzará una petición Ajax a la API de Github (servidor), la API devolverá un JSON que será leído en el done de Ajax, se sacarán algunos datos del JSON para cambiar de forma dinámica el valor de los ´inputy también cuando el valor del login sea uno de los usuarios, el botónPrueba` será desactivado.

Como ves, el ejemplo aumenta un poco más la complejidad de cosas que se pueden hacer y todo se actualiza y maneja de forma totalmente transparente para el usuario.

$(function() {
  $('#selGithub').on('change', function(e) {
    e.preventDefault();
    var userGithub = $('#selGithub').val();
    var mUrl = 'https://api.github.com/users/';
    
    var mAjax = $.ajax({
      url: mUrl + userGithub,
      method: 'GET',
      //data: mData, */En este caso no se manda nada desde el cliente*/
      dataType: 'json'
    });

    mAjax.done(function(response) {
      $('#ibxID').val(response.id);
      $('#ibxUrl').val(response.url);
      var btnStatus=response.login==='padrecedano';
      $('#btnGithub').prop("disabled", btnStatus);
    });

    mAjax.fail(function(xhr, textStatus, err) {
      alert('Error: ' + textStatus);
    });

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="selGithub">
    <option value="0" selected>--Seleccione un usuario--</option>
    <option value="fabpot">Fabien Potencier</option>
    <option value="andrew">Andrew Nesbitt</option>
    <option value="taylorotwell ">Taylor Otwell</option>
    <option value="padrecedano">Cedano</option>
  </select>
</div>
<div>
  ID:<input type="text" id="ibxID" name="ibxID">
</div>
<div>
  Github URL: <input type="text" id="ibxUrl" name="ibxUrl" size="50">
</div>
<button id="btnGithub" value="github">Prueba</button>

3
  • Siempre dando respuestas con fundamentos y bien explicadas, congratz! :D Commented el 15 abr. 2019 a las 16:45
  • 1
    Gracias @VickMuñoz. Recuerdo muy bien lo perdido que estaba cuando supe que Ajax existía y empecé a usarlo, y los beneficios que he sacado de esta herramienta, las horas de trabajo que te ahorra y lo fácil que te hace cosas complicadas. Por eso trato de ayudar a que sea comprendida y usada. Saludos.
    – A. Cedano
    Commented el 15 abr. 2019 a las 16:52
  • Sin duda @A.Cedano que usar AJAX te facilita muchísimas cosas, yo lo utilizo con JS puro, pero una vez que lo entiendes de esta forma, lo puedes usar con jQuery sin problemas, saludos. Commented el 15 abr. 2019 a las 17:00
1

Aquí un pequeño ejemplo donde capturas tu variable desde el input.

   <?php
    $cumple = false;
    if(isset($_POST['add']))
    {
        $numero=$_POST['numero'];
        if($numero >= 5){
            echo "mayor a 5";
            $cumple = true;
        }
        if($numero < 5){
            echo "menor a 5";
        }
   }
   ?>
   <form action="" method="post">
     <table width="330" height="135" border="0" class="text">
         <tr>
             <td><label>User Name</label></td>
             <td><input type="text" name="numero" id="numero"></td> 
         </tr>

         <tr>
             <td align="center">
                <button type="submit" id="boton" name="add"  <?php if ($cumple) { echo 'disabled="disabled"';}?>>Verificar</button>
             </td>
         </tr>
     </table>
  </form>

En este caso compara si el valor es mayor o menor a 5, ingresando el valor 7, el resultado te da lo siguiente y además se deshabilita el botón de verificar:

introducir la descripción de la imagen aquí

Tu Respuesta

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

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