Foros del Web » Programando para Internet » Javascript » Frameworks JS »

llamar datos de mysql de un cuadro de texto en forma dinamica

Estas en el tema de llamar datos de mysql de un cuadro de texto en forma dinamica en el foro de Frameworks JS en Foros del Web. Hola a todos la gente del foro tengo una duda y como es primera vez que hare algo asi o sea soy novato no he ...
  #1 (permalink)  
Antiguo 07/10/2010, 08:06
 
Fecha de Ingreso: octubre-2007
Mensajes: 43
Antigüedad: 17 años, 1 mes
Puntos: 0
Pregunta llamar datos de mysql de un cuadro de texto en forma dinamica

Hola a todos la gente del foro tengo una duda y como es primera vez que hare algo asi o sea soy novato no he dado con la solucion o con que lenguaje deberia hacer esto...

Tengo este codigo que me parecio muy facil de entender y muy bueno que es ir creando cajas de texto en forma dinamica se los pego de inmediato:

</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<?php

// Configura los datos de tu cuenta
$dbhost='localhost';
$dbusername='xxxx';
$dbuserpass='xxxx';
$dbname='xxxx';
// Conexión a la base de datos
$connect = mysql_connect ($dbhost,$dbusername,$dbuserpass) or die("Fallo al Conectar");

mysql_select_db($dbname,$connect);

$query="SELECT * FROM articulos ORDER BY codigo Asc";

$results=mysql_query($query) or die(mysql_error());
?>
<html><head>
<title>Agregar fila de campos DINAMICOS</title>
<script type="text/javascript">


function adicionarFila(){
var cont = document.getElementById("cont");
var filas = document.getElementById("filas");
cont.setAttribute("value", parseInt(cont.value,0)+1);
var tabla = document.getElementById("contenido").tBodies[0];
var fila = document.createElement("TR");
fila.setAttribute("align","center");

var celda1 = document.createElement("TD");
var sel = document.createElement("SELECT");
//sel.setAttribute("type","text");
sel.setAttribute("size","1");
sel.setAttribute("name","sel" + cont.value);
<?php
while ($rows=mysql_fetch_array($results)) {
extract($rows);

echo "opcioncur = document.createElement('OPTION');";
echo "opcioncur.innerHTML = '".$codigo."';";
echo "opcioncur.value = '".$descripcion."';";
echo "sel.appendChild(opcioncur);";
}
?>


celda1.appendChild(sel);

var celda2 = document.createElement("TD");
var cantidad = document.createElement("INPUT");
cantidad.setAttribute("type","text");
cantidad.setAttribute("size","20");
cantidad.setAttribute("maxlength","20");
cantidad.setAttribute("name","cantidad" + cont.value);
celda2.appendChild(cantidad);




var celda3 = document.createElement("TD");
var valorA = document.createElement("INPUT");
valorA.setAttribute("type","text");
valorA.setAttribute("size","13");
valorA.setAttribute("maxlength","3");
valorA.setAttribute("name","valorA" + cont.value);
celda3.appendChild(valorA);

var celda4 = document.createElement("TD");
var valorB = document.createElement("INPUT");
valorB.setAttribute("type","text");
valorB.setAttribute("size","13");
valorB.setAttribute("maxlength","3");
valorB.setAttribute("name","valorB" + cont.value);
celda4.appendChild(valorB);


var celda5 = document.createElement('TD');
var boton = document.createElement('INPUT');
boton.setAttribute('type','button');
boton.setAttribute('value','borrar');
boton.onclick=function(){borrarFila(this);}
celda5.appendChild(boton);

fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);

tabla.appendChild(fila);
}
function borrarFila(button){
var fila = button.parentNode.parentNode;
var tabla = document.getElementById('contenido').getElementsBy TagName('tbody')[0];
tabla.removeChild(fila);
}

</script>

</head>
<body onLoad="adicionarFila()">
<Form name="detalle" action="ej.asp" method="get">
<input name="cont" type="hidden" id="cont" value="0" >
<input name="filas" type="hidden" id="filas" value="" >
<table align=center width=20% cellpadding=0 cellspacing=0 id="contenido" border="1">
<tr align="center">
<td>Producto</td>
<td>Cantidad</td>
<td>Precio</td>
<td>Total</td>
<td></td>
<td>&nbsp;</td>
</tr>
</table>
<table align=center width=20% cellpadding=0 cellspacing=0 border="1">
<tr>
<td>&nbsp;</td>
</tr>
<tr align="center">
<td align="CENTER"><input name="enviar" type="submit" id="enviar" value="enviar" onClick="filas.value=cont.value, cont.value=0">
<input name="nueva_fila" type="button" id="nueva_fila" value="nueva fila" onClick="adicionarFila()"></td>
</tr>
</table>
</form>
</body>
</html>
<body>

Bueno tratando de hacer algo logre llamar de la tabla articulos que tengo en mysql que se compone de tres campos (codido,descripcion y precio) lo que hace este codigo es que en el primer cuadro de texto con formato SELECT coloca todo lo que hay en el campo descripcion de la tabla articulos y ahi uno puede elegir el que quiera, pero me gustaria lograr que en vez de eso pasar ese cuadro de texto de SELECT a INPUT e ingresar ahi el codigo del articulo y en en los otros cuadros de texto que estan al lado coloque al presionar enter o tab o un boton la descripcion de ese producto y el precio, pero de manera dinamica osea sin cambiar de pagina. Bueno espero sus comentarios, como siempre muchas gracias por su ayuda.

saludos...
  #2 (permalink)  
Antiguo 07/10/2010, 08:22
Avatar de egepe  
Fecha de Ingreso: diciembre-2009
Mensajes: 310
Antigüedad: 15 años
Puntos: 7
Respuesta: llamar datos de mysql de un cuadro de texto en forma dinamica

Te tengo una pregunta?

Tu quieres hacer inputs dinamicos o quieres que a partir de un código se te desplieque su descripción al lado (la misma fila siguiente columna) del codigo introducido?

Para el primer caso yo respondí eso por aquí a una pregunta que se llama campos dinamicos y para el segundo caso que es el que más se me parece a lo que dices al final tiene que usar AJAX, y es muy sencillo pero honestamente en este momento no tengo tiempo para ayudarte más, sin quieres sigues haciendo post x aquí y conversamos

Saludos
  #3 (permalink)  
Antiguo 07/10/2010, 08:33
 
Fecha de Ingreso: octubre-2007
Mensajes: 43
Antigüedad: 17 años, 1 mes
Puntos: 0
Respuesta: llamar datos de mysql de un cuadro de texto en forma dinamica

Hola egepe gracias por tu respuesta, mira lo de ingresar los datos del formulario dinamico a una tabla tambien me va a servir un monton porque tambien tengo que guardarlos en otra tabla, pero antes de hacer eso tengo que tratar de llamar los datos, como dices tu quiero que aparesca su descripcion al lado de la misma fila siguiente columna del codigo introducido, y si es sencillo eso es bueno, pero por ahora para mi todavia es complejo :(...

Espero tus comentario o de otra persona que quiera ayudarme. Muchas gracias nuevamente por tu tiempo...

Última edición por Ronyphp; 07/10/2010 a las 10:13
  #4 (permalink)  
Antiguo 12/10/2010, 10:36
 
Fecha de Ingreso: octubre-2007
Mensajes: 43
Antigüedad: 17 años, 1 mes
Puntos: 0
Respuesta: llamar datos de mysql de un cuadro de texto en forma dinamica

Hola nuevamente buscando como lograr que en la misma pagina al presionar un boton me muestre los datos de la tabla encotre un codigo que lo probe en mi servidor y me funciono :). Paso a copiar el codigo:

codigo html (llamado empleados.html):

<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<p>Consultar registros con ajax</p>

<!-- En "onsubmit" escribimos la función 'MostrarConsulta' que creamos en javascript, con su parametro que es el archivo que vamos a mostrar, en este caso 'consulta.php'-->
<form name="consulta" action="" onsubmit="MostrarConsulta('consulta.php'); return false">
<label>
<input type="submit" value="Consultar" />
</label>
</form>
<div id="resultado"></div>
</body>
</html>

codigo en ajax (llamado ajax.js):

function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

function MostrarConsulta(datos){
divResultado = document.getElementById('resultado');
ajax=objetoAjax();
ajax.open("GET", datos);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
divResultado.innerHTML = ajax.responseText
}
}
ajax.send(null)
}

codigo en php (llamado consulta):

<?php


//Configuracion de la conexion a base de datos
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "ribosomatic";

$con = mysql_connect($bd_host, $bd_usuario, $bd_password);

mysql_select_db($bd_base, $con);

//consulta todos los empleados

$sql=mysql_query("SELECT * FROM empleados",$con);

//muestra los datos consultados
echo "<p>Nombres - Departamento - Sueldo</p> \n";
while($row = mysql_fetch_array($sql)){
echo "<p>".$row['nombres']." - ".$row['departamento']." - ".$row['sueldo']."</p> \n";
}
?>

Es un codigo de Jesus Liñán que lo probe y funciono muy bien, pero como soy novato he dado vueltas y vueltas y no se como lograr que, desde un cuadro de texto al presionar el boton consultar filtrar por ejemplo por el campo sueldo, bueno muchas gracias siempre por su futura ayuda.

saludos...
  #5 (permalink)  
Antiguo 18/10/2010, 10:05
 
Fecha de Ingreso: octubre-2007
Mensajes: 43
Antigüedad: 17 años, 1 mes
Puntos: 0
Respuesta: llamar datos de mysql de un cuadro de texto en forma dinamica

Hola nuevamente despues de varios intentos he consegui capturar la variable para recargar los datos en la misma pagina :)

El codigo es el siguiente en js (funciones.js)

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
var ob=document.getElementById('boton1');
addEvent(ob,'click',presionBoton,false);
}

function presionBoton(e)
{
var ob=document.getElementById('dni');
recuperarDatos(ob.value);
}


var conexion1;
function recuperarDatos(dni)
{
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open('GET','pagina1.php?dni='+dni, true);
conexion1.send(null);
}

function procesarEventos()
{
var resultados = document.getElementById("resultados");
if(conexion1.readyState == 4)
{
var datos=eval("(" + conexion1.responseText + ")");
var salida = "Apellido:"+datos.apellido+"<br>";
salida=salida+"Nombre:"+datos.nombre+"<br>";
salida=salida+"Dirección donde debe votar:"+datos.direccion;
resultados.innerHTML = salida;
}
else
{
resultados.innerHTML = "Cargando...";
}
}

//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captur a);
return true;
}
else
return false;
}

function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;


y en php (pagina1.php):

$bd_host = "localhost";
$bd_usuario = "xxxx";
$bd_password = "xxxx";
$bd_base = "xxxx";



$con = mysql_connect($bd_host, $bd_usuario, $bd_password);

mysql_select_db($bd_base, $con);

$busqueda = $_REQUEST['dni'];

$sql=mysql_query("SELECT * FROM clientes where dni = '$busqueda'");

//$nombre='';
//$apellido='';
//$direccion='';
while($row = mysql_fetch_array($sql)){
$nombre=$row['nombre'];
$apellido=$row['apellido'];
$direccion=$row['direccion'];
}

echo "{
'nombre':'$nombre',
'apellido':'$apellido',
'direccion':'$direccion'
}";

Pero con el codigo que tengo ahora solo logro que muestre el primer registro que encuentra.

Como puedo hacer para que me muestre todos los registros que contengan el mismo campo dni? porque si fuese en el mismo php seria una cosa asi :

while($row = mysql_fetch_array($sql)){
echo "<p>".$row['nombre']." - ".$row['apellido']." - ".$row['direccion']."</p> \n";
}

Pero no se como llevar esas variables al archivo funciones.js

Bueno como siempre muchas gracias...
  #6 (permalink)  
Antiguo 18/10/2010, 10:07
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años, 6 meses
Puntos: 2135
Tema movido desde PHP a AJAX

Etiquetas: ajax, cuadro, dinamica, llamar, mysql, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:53.