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