JQuery - capturar valores de un formulario

 
Vista:
sin imagen de perfil

capturar valores de un formulario

Publicado por mario (23 intervenciones) el 01/01/2014 14:53:48
hola amigos tengo el siguiente codigo que me muestra al principio todos los datos de una tabla llamada empleados y al lado de cada registro un boton enviar que cuando lo pulso me muestra ese registro. la duda es la siguiente, como puedo hacer para que me muestre el registro que selecciono, ya que siempre me muestra el primero. gracias.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?php
 $bd_host = "localhost";
  $bd_usuario = "root";
  $bd_password = "";
  $bd_base = "ajax";
 
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);?>
 
<!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 type="text/javascript"  src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
 
function extraer()
{
	nombre=$("#nombre").val();
	apellido=$("#apellido").val();
	$("#resul").load("muestro.php",{nombre:nombre,apellido:apellido});
 
	}
</script>
 
</head>
 
<body>
<style type="text/css">
#resul{
 
	float:right;
	margin-top:15px;
	margin-right:100px;
	}
 
 
</style>
<!--  muestro solo el empleado seleccionado -->
<table id='resul' width="100" border="1"> </table>
 
 
<!--    muestro los datos de la tabla empleados -->
 
<table id='tabla' width="188" border="1">
<?php
 
$sql="SELECT * FROM empleados";
$sacar=mysql_query($sql);
 
while ($row=mysql_fetch_array($sacar))
{
?>
 
  <tr>
   <td width="65"><input id='nombre'value="<?php echo $row['nombre'] ?>"  /></td>
    <td width="49"><input id='apellido' value="<?php echo $row['apellido'] ?>" /></td>
    <td width="52"><input name='enviar' type='button' value='enviar' onclick="extraer()"/></td>
   </tr>
  </tr>
<?php   }?>
</table>
 
</body>
</html>


/*********************** muestro.php ***********************/

1
2
3
4
5
6
<table width="100" border="1">
  <tr>
    <td><?php echo $_POST['nombre'] ?></td>
    <td><?php echo $_POST['apellido'] ?></td>
  </tr>
</table>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

capturar valores de un formulario

Publicado por xve (673 intervenciones) el 02/01/2014 09:17:35
Hola Mario, me parece que aqui tienes un pequeño problema con los id's... me explico...

En una pagina web, no debería haber ningún id repetido, ya que los id's deberían ser únicos.
En tu bucle while(), repites los id's una y otra vez, por cada iteración del bucle.

La manera correcta de coger los valores desde jquery, seria quitando los id's y haciendo referencia al boton enviado... algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".btnEnviar").click(function(){
                var apellido=$(this).parent().prev().find("input").val();
                var nombre=$(this).parent().prev().prev().find("input").val();
                $("#result").html(nombre+" "+apellido);
            })
        });
    </script>
</head>
 
<body>
<table id='tabla' width="188" border="1">
    <tr>
        <td width="65"><input id='nombre' value="nombre1"></td>
        <td width="49"><input id='apellido' value="apellido1"></td>
        <td width="52"><input name='enviar' type='button' value='enviar' class="btnEnviar"></td>
    </tr>
    <tr>
        <td width="65"><input id='nombre' value="nombre2"></td>
        <td width="49"><input id='apellido' value="apellido2"></td>
        <td width="52"><input name='enviar' type='button' value='enviar' class="btnEnviar"></td>
    </tr>
</table>
 
<div id="result"></div>
 
</body>
</html>

Espero que te sirva... coméntanos, ok?

P.D. ten cuidado que cierras dos veces el </tr>...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar