Recuperar datos de una tabla a un formulario

padiuwu · 12 Junio 2020, 19:39 PM

Alguien que me pueda decir como puedo recuperar los datos de una tabla mediante un boton (usando ajax)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Serealize </title>
<script src="jquery-3.3.1.js"></script>
<script>
 //La primera linea de código hace referencia a que cuando la pagina web se cargue
 //tambien el metodo mostrar lo hará, ejecutando sus instrucciones
 $(function(){
  mostrar();
 });
 //Este método ya lo vimos
 function enviardatos(){

  var datos=$("#formDatos").serialize();
  alert (datos),
  $.ajax({
   type: "POST",
   url: "servidor.php",
   cache: false,
   data: datos,
   error:function(){
   $("#resultado").html("Error");
   },
   beforeSend:function(){
    $("#resultado").html("Cargando...");

    },
    success: function(okay){
      $("#resultado").html("Hecho");
     }

   });

  }
  //Este es una nueva función que nos permitirá mostrar los datos de nuestra BD en una tabla de html
  //Se compone de la misma estructura que la función anterior por que seguimos usando Ajax
  //Bien, ahora en el tipo, seguira siendo POST, la URL ahora cambiara, se creara un archivo llamado
  //mostrarDatos.php en donde guardaremos la consulta de mysql
  function mostrar(){
   $.ajax({
   type: "POST",
   url: "mostrarDatos.php",
   //Si el resultado de la consulta es exitoso guardaremos los datos en "resultado"
   success: function(resultado){
    //Ahora utilizaremos JSON para guardar los datos en un arreglo serializado, que es lo que vamos a serializar, pues "resultado"
    var js= JSON.parse(resultado);
    //Ahora crearemos una varible que nos servira como una cadena de caracteres para crear el body de la tabla y pegar los datos
    var tabla;
    //Con un ciclo recorremos los datos que nos arroja mysql y los vamos asignando
    for (var i = 0; i < js.length; i++) {
     tabla+= '<tr><td>'+js[i].Id+'</td><td>'+js[i].Nombre+'</td><td>'+js[i].AP+'</td><td>'
     +js[i].Pais+'</td><td>'+js[i].RFC+'</td><td><button type="button" name="btnEditar" id="btnEditar" onClick="javascript:recuperarDatos();">Editar</button></td><td><button type="button" name="btnEliminar" id="btnEliminar" onClick="">Eliminar</button></td></tr>'; //Aqui se encuentra el boton editar con el evento onclick
    }
    //Por ultimo creamos los botones eliminar y editar
    //y pegamos la cadena de caracteres en el html
    $('#tbody').html(tabla);
   }

   });

  }
</script>
</head>
<body>
<div>
 <form name="formDatos" id="formDatos" method="POST">
 <input type="hidden" id="txtId">
 <label for="txtNombre">Nombre: </label>
 <input type="text" id="txtNombre" name="txtNombre"><br><br>
 <label for="txtApellidoPaterno">Apellido Paterno: </label>
 <input type="text" name="txtApellidoPaterno" id="txtApellidoPaterno"><br><br>
 <label for="txtApellidoMaterno" >Apellido Materno: </label>
 <input type="text" name="txtApellidoMaterno"  id="txtApellidoMaterno"><br><br>
 <label for="select" >Edad: </label>
  <select name="select">
    <?php
    for($y = 18; $y <= 100; $y++){
     ?>
    <option value="<?=$y?>"><?=$y?></option>
    <?php
    }
   ?>
  </select>
 <label for="txtPais">Pais: </label>
 <input type="text" id="txtPais" name="txtPais"><br><br>
 <label for="txtRFC">RFC: </label>
 <input type="text" name="txtRFC" id="txtRFC"><br><br>
  <br><label> Sexo: </label><br>
  <label for="radioSexo"> Hombre </label><input type="radio"  name="radioSexo" id="radioSexo" value="H">
  <label for="radioSexo" > Mujer</label><input type="radio" name="radioSexo" id="radioSexo" value="M">
  <button type="button" name="btnEnviar" id="btnEnviar" onClick="javascript:enviardatos();">Enviar</button>
  </form>

</div>
<div>

<h2>Resultados</h2><br>
<div id="resultado"></div>
<?php
 //Se crea el esqueleto de la tabla
 ?>
 <table>
  <thead>
   <th>ID</th>
   <th>Nombre</th>
   <th>Apellido</th>
   <th>Pais</th>
   <th>RFC</th>
   <th>Editar</th>
   <th>Eliminar</th>
  </thead>
   <tbody id="tbody">

   </tbody>
 </table>
</div>

</body>
</html>

Tryptophan · 21 Junio 2020, 12:57 PM

Te recomiendo googlear un poco, porque eso esta mas que resuelto.

Saludos

Leguim · 23 Junio 2020, 14:53 PM

Hola!

https://www.youtube.com/watch?v=IHVQX52W-LQ

Recorda que una cosa en jquery es .html y otra es .append

con .html lo que hace es como setear el html de un elemento... reemplazarlo...
pero con append lo que se hace es agregar html a un elemento, no reemplaza agrega al final...

por ejemplo,

en un buscador dinámico te va a convenir usar .html
pero en un sistema donde al hacer scroll muestre más resultados sobre algo, ya te conviene usar append...

Mira el vídeo y me vas a entender un poco mejor capaz

Test Foro de elhacker.net SMF 2.1

Recuperar datos de una tabla a un formulario

padiuwu

Tryptophan

Leguim