How to get the data of a DB and put them in the input to be able to modify them with Ajax and PHP

Question

How to get the data of a DB and put them in the input to be able to modify them with Ajax and PHP

Navigation

#1 by (0 votes)

0

$('tbody').on('click', '.modificarBtn', function(){	 	
	 	var vidToUpdate = $(this).data('idest');
	 	$.ajax({
		 	url: 'update.php',
		 	type: 'POST',
		 	data: {vidToUpdate: vidToUpdate},
		 	success:function(data){
		 		$('tbody').html('');
		 		$.each(data, function(index, value){
		 			var fila = '<tr id="'+value['id']+'"><td>'+ value['Nombre'] +'</td><td>'+ value['Apellidos'] +'</td><td>'+value['cedula']+'</td><td><button class="btn btn-danger eliminarBtn" data-idest = "'+value['id']+'"><i class="glyphicon glyphicon-remove"></i></button> <button class="btn btn-primary modificarBtn" data-idest = "'+value['id']+'"><i class="glyphicon glyphicon-pencil"></i></button></td></tr>';
		 			$('tbody').append(fila);
		 			$('#contador').html($('tbody tr').length);
		 		});
		 		$('#contador').html($('tbody tr').length);		 		
		 	},
		 	dataType: 'json',
		 });
	 });
});

<!DOCTYPE html>
<html>
<head>
	<title>Consolidacion</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="script.js"></script>
</head>
<body>


<div class="row" style="margin-top: 150px;">
	<div class="col-lg-1"></div>
	<div class="col-lg-5">
		<div class="form-group">
			<label for="nombre"> Nombre:</label>
			<input type="text col-lg-12" id="nombre">
		</div>
		<div class="form-group">
			<label for="apellido"> Apellido:</label>
			<input type="text" id="apellido">
		</div>
		<div class="form-group">
			<label for="cedula"> Cedula:</label>
			<input type="text" id="cedula">
		</div>
		<button class="btn btn-primary" id="adiconarTbl"> Adicionar</button>
	</div>
	<div class="col-lg-6">
		<button class="btn btn-warning" > Cantidad en tabla: <span class="badge" id="contador">0</span> </button>

		<table class="table" border="1">
			<thead>
				<th>Nombre</th>
				<th>Apellidos</th>
				<th>Cedula</th>
				<th>Accion</th>
			</thead>
			<tbody>
				
			</tbody>  						
		</table>
	</div>
</div>	
</body>
</html


/Codigo Update

<?php 

$servername = "localhost";
$username = "root";
$password = "";
$db = "data_estudiantes";

// Create connection
$conn = new mysqli($servername, $username, $password, $db);

// Check connection
if ($conn->connect_errno) {
    die("Connection failed: " . mysqli_connect_error());    
}

$didToUpdate = $_POST['idToUpdate'];

$sql = "select from estudiantes where id = " . $didToUpdate;
$resultado = $conn->query($sql);

$estudiantes =conn_fetch_array($resultado);
$nombre=$estudiantes['nombre'];
$apellidos=$estudiantes['apellidos'];
$cedula=$estudiantes['cedula'];

echo json_encode('nombre' => $nombre, 'apellidos' => $apellidos, 'cedula' => $cedula);
?>

mysql jquery php ajax

asked by V.Rocha 28.09.2017 в 05:25

source

1 answer

Problem to process the data of a query with Laravel JPA Query to login

score 0 · Answer 1

With jquery you can access the html elements by means of their id and load the data sent to ajax with the jquery val () function:

$('tbody').on('click', '.modificarBtn', function(){     
    var vidToUpdate = $(this).data('idest');
    $.ajax({
        url: 'update.php',
        type: 'POST',
        data: {vidToUpdate: vidToUpdate},
        success:function(data){
            $('input#nombre').val(data.value) #en vez data.value pones el valor que le quieres asignar a cada input, yo utilice data.value como ejemplo pero no se si funciona
        },
        dataType: 'json',
     });
 });

I recommend you not create unnecessary variables, if you already have: $resultado = $conn->query($sql); for which you use $estudiantes =conn_fetch_array($resultado); ? test with $nombre=$resultado.nombre; and if it works remove $estudiantes =conn_fetch_array($resultado); , take it as advice