Cambiar value en hidden cuando se cambia el texto de un input

Citar

Escrito el 05 Ene 2013 02:38 pm

Hola qué tal, Feliz año 2013.

Bueno, les explico, llevo rato tratando de hacer que mi formulario haga lo siguiente: al llenar el campo "ciudad" (que tiene la opcion autocomplete con JQuery o si se puede con el nuevo datalist de html5) y seleccionar la ciudad deseada, la cual se recupera de una base de datos con un ID unico, al enviar el formulario no se envie el nombre de la ciudad, si no que quiero que se envie el ID de la ciudad.

Trate con poner label = "España" value="1254", y funciona tanto en JQuery o datalist, sí, pero cuando el usuario se pasa al siguiente campo en el formulario, lo que se muestra en el input ciudad es 1254, yo quiero que se siga viendo España en el campo ciudad, por lo tanto pense que un campo input hidden que tenga el valor del ID, pero para que el cambio sea dinamico necesito hacer un script con un onChange en el input ciudad.

Y he ahí mi problema, no encuentro como hacerlo, jajaja. Con que metodo sería mejor hacerlo, un switch, un if, una combinacion de algun metodo que desconosco, tengo 2554 ciudades en mi base de datos, si alguien me pudiera guiar a como iniciarlo se lo agradeceria, no quiero que me hagan el codigo, solo que me ayuden a buscar una solucion optima a mi problema.

Gracias!

Por holler

65 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 05 Ene 2013 04:21 pm

Bueno, yo mismo respondiendo a parte de mi pregunta, cambiar el valor del campo hidden es sencillo:

Código Javascript :

<script>
function updateHidden(lab){
    document.getElementById("idCiudad").value = document.getElementById("ciudadesMexico").value;
   document.getElementById("ciudadesMexico").value= lab;
}
</script>

Código HTML :

<input list="ciudades" onChange="updateHidden(this.label)" type="search" class="ciudad" name="ciudad" id="ciudadesMexico" placeholder="Ciudad" autofocus autocomplete="off">
<input type="hidden" name="idCiudad" id="idCiudad" >

<datalist id="ciudades">
<option label=' Abal,Yuc.'  value=' 2294' />
 <option label=' Abasolo,Coah.'  value=' 33' />
 <option label=' Abasolo,Gto.'  value=' 321' />
 <option label=' Abasolo,NL'  value=' 948' />
</datalist>

Okay, eso me cambia el value en el hidden, el problema es que ahora en vez de ponerme el 2294 (o Abal,Yuc. que es lo que quiero que aparesca) en input ciudadesMexico solo me aparece undefined.

Alguna idea de como corregir esto?

Por holler

65 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 05 Ene 2013 09:10 pm

Con esto ya logro hacer lo que quiero, he aqui la respuesta correcta a mi propia pregunta, aunque genera demasiadas lineas...

Código :

<?php
require('conectar.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script>
function updateHidden(lab){
    document.getElementById("idCiudad").value = document.getElementById("ciudadesMexico").value;
      
   var valor = document.getElementById("idCiudad").value;
   
   <?php
      mysql_query("SET NAMES utf8");
        $queryMunicipios2 = mysql_query("SELECT id,NOM_MUN,NOM_ABR FROM ciudades ORDER BY id ASC")
      or die("Error al seleccionar los municipios: ".mysql_error());
      while($rowMunicipios2 = mysql_fetch_array($queryMunicipios2)){
            echo "if(valor == ".$rowMunicipios2['id']."){\n";
            echo "document.getElementById(\"ciudadesMexico\").value = \"".$rowMunicipios2['NOM_MUN'].", ".$rowMunicipios2['NOM_ABR']."\";" ;
            echo "}";
         }
      mysql_free_result($queryMunicipios2);
   ?>
   
}
</script>
</head>

<body>

<form  action="Untitled-7.php" method="post">
        <input list="ciudades" onChange="updateHidden(this.label)" type="search" class="ciudad" name="ciudad" id="ciudadesMexico" placeholder="Ciudad" autofocus autocomplete="off">
        <input  type="search" class="especialidad" name="especialidad" placeholder="Especialidad" autocomplete="off">
        <input type="hidden" name="idCiudad" id="idCiudad" >
        <button name="Buscar" type="submit" class="Buscar">Buscar</button>
        <datalist id="ciudades">
        <?php
      mysql_query("SET NAMES utf8");
        $queryMunicipios = mysql_query("SELECT id,NOM_MUN,NOM_ABR FROM ciudades ORDER BY id ASC")
      or die("Error al seleccionar los municipios: ".mysql_error());
      while($rowMunicipios = mysql_fetch_array($queryMunicipios)){
            echo " <option label='".$rowMunicipios['NOM_MUN'].",".$rowMunicipios['NOM_ABR']."'  value=' ".$rowMunicipios['id']."' />\n"; 
         }
      mysql_free_result($queryMunicipios);
      ?>
        </datalist>
</form>


</body>
</html>

Gracias, y si alguien encuentra otra forma de hacerlo podría publicarlo, a lo mejor es mas simple que la mia.

Por holler

65 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Cambiar value en hidden cuando se cambia el texto de un input

Escribe una respuesta rapida