Entrar

Modificar TextBox Cuando ComboBox Cambia

sinchan · · Solicitar retirada
Hola, estoy buscando la solución a un problema que aparece en muchos foros pero que aun no he hallado como resolver...

Tengo una página PHP que incluye un ComboBOx con tres o cuatro opciones y un TExtBox... necesito que el valor del TextBox cambie AUTOMATICAMENTE cuando cambia la selección en el Combo, todo sin salir de la página...

POr ahí he leído que hace falta AJAX, JQuery... si alguien sabe como hacer esto quedo muy agradecido.

Saludos
skaparate · · Solicitar retirada
Hola:

Depende de lo que necesites... si son valores extraídos de una base de datos, entonces sí necesitas jQuery (que incluye Ajax) y PHP. Por el contrario, si necesitas modificar una fecha, por ejemplo, entonces basta con jQuery. Básicamente debes hacer esto:

Sin Ajax:
$('#combo-box-id').change(function(e) {
  $('#textbox').val($(this).val());
});

Con Ajax (y por ende, PHP):
$('#combo-box-id').change(function(e) {
  var self = $(this);
  $.ajax({
    type: 'get',
    url: script.php,
    data: { comboValue: self.val() }, // En el script PHP recibirás el valor [B]comboValue[/B] por $_GET o $_POST.
    success: function( data ) {  // Esta función sólo se ejecuta si la petición al servidor funcionó:
      $('#textbox').val(data);
    },
    error: function( obj, txt, c) {
      console.log( txt );
    }
  });
});
sinchan · · Solicitar retirada
Skaparate, gracias por tu respuesta...lamentablemente dado mis pobres conocimientos no entiendo bien lo que me has escrito.
Vamos al caso que no interviene Base de Datos, sencillamente un combo y un textbox en una pagina PHP... ¿Dónde y Cómo debo incluir ese código que me dices?

El código mio sería el que sigue, cuando selecciono una flor en el combo debo pasar el nombre de la flor al TextBox...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body>
<select name="milista" id="milista">
<option value="1">ROSAS</option>
<option value="2">MARGARITAS</option>
<option value="3">LIRIOS</option>
<option value="4">ORQUIDEAS</option>
</select>
<label for="MicampoTXTO"></label>
<input type="text" name="MicampoTXTO" id="MicampoTXTO" />
</body>
</html>
skaparate · · Solicitar retirada
XD, ok... lo más simple es hacer esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin título</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function($) {
        // [B]Change[/B] es un evento que se ejecuta cada vez que se cambia el valor de un elemento (input, select, etc).
        $('#milista').change(function(e) {
          $('#micampoTXTO').val($(this).val());
        });
      });
  </head>
  <body>
    <select name="milista" id="milista">
      <option value="1">ROSAS</option>
      <option value="2">MARGARITAS</option>
      <option value="3">LIRIOS</option>
      <option value="4">ORQUIDEAS</option>
    </select>
    <label for="MicampoTXTO"></label>
    <input type="text" name="MicampoTXTO" id="MicampoTXTO" />
  </body>
</html>

En teoría debería funcionar :).
sinchan · · Solicitar retirada
Skaparate, gracias por la ayuda, el código funciona pero pasa el valor numérico y no el nombre de la flor... ¿es posible pasar al TextBox el nombre en vez del número?
skaparate · · Solicitar retirada
Hmmmm, sí, se puede (cambia lo necesario):

$('#MicampoTXTO').val($(this).find(':selected').text());

Aunque lo más simple es cambiar el valor numérico por el nombre de la flor respectiva.
sinchan · · Solicitar retirada
Skaparate, si me permites voy a abusar de tu paciencia y conocimientos... vamos a presentar ahora el caso real.

1- Un comboBox donde seleccionas un CLIENTE, al lado un TextBox vacío.
2- En el evento onchange mandamos a la función javascript el nombre o el código del cliente. Pongamos que lo recibimos en la variable CCLI.
3- Hay que ir a la base de datos y recuperar de la tabla el DNI del cliente a traves de una "select DNI from clientes where codcliente=CCLI".
4- Presentar el DNI en el TextBox.

Y si el usuario cambia de cliente, pues cambia el TextBox...

Muchísimas gracias amigo
skaparate · · Solicitar retirada
Como te dije en la primera publicación: eso se hace con JavaScript (AJAX) y PHP.
sinchan · · Solicitar retirada
De AJAX no tengo ni idea... ¿sabes algún tutorial bueno o algo para empezar?
Gracias
sinchan · · Solicitar retirada
Ya lo tengo resuelto Skaparate, entre esto que me has mandado y otra cosa que he encontrado por ahí ya tengo el problema resuelto...
Ahora me gustaría preguntarte cómo se hace para que el script php envíe de vuelta un conjunto de datos
Mira esto por favor:

El script php:

<?php
$g=$_GET['sitio'];
mysql_select_db($database_mi, $mi);
$query_Recordset2 = "SELECT * FROM procedencias WHERE P_codprocedencia=".$g." ORDER BY P_codprocedencia ASC";
$Recordset2 = mysql_query($query_Recordset2, $mi) or die(mysql_error());
$row_Recordset2 = mysql_fetch_assoc($Recordset2);
$totalRows_Recordset2 = mysql_num_rows($Recordset2);
echo $row_Recordset2['P_procedencia'];
?>


La funcion JAVASCRIPT:

function Mostrar(datos){
caja = document.getElementById('micajatexto');
ajax=objetoAjax();
ajax.open("GET", datos);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
caja.value=ajax.responseText //aqui es donde se hace que el textbox tenga el valor que ha devuelto el script php
}
}
ajax.send(null)
}

La pagina principal:

<form name="consulta" action="" onSubmit="">
<label for="Milista"></label>
<select name="Milista" id="Milista" onchange="Mostrar('script.php?sitio='+this.value); return false">

Ahora la cuestíon es como hacer si el script php tuviese que devolver un conjunto de datos y no una cadena de texto, cómo diferenciarlos una vez que vuelven a la función javascript, porque supongo que con "ajax.responseText" no se puede hacer...

Muchas gracias
skaparate · · Solicitar retirada
Es algo complejo, porque el servidor siempre devolverá texto.

Lo que debes hacer es utilizar la función json_encode, para codificar los valores devueltos en el script PHP y, en Javascript, debes utilizar un interprete de JSON:

var respuesta = JSON.parse(ajax.responseText);