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ón
Prueba` 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>