Manejo para formulario mediante script
Tengo el siguiente problemilla y no ce muy bien como solucionar
La idea básicamente es esta
Existente 2 archivos.
-> procesa.php
-> form.html
En el archivo form.html existente 2 cosas, un formulario para enviar datos así
<form>
<input type="text" name="campo1">
<input type="text" name="campo2">
<input type="text" name="campo3">
<input type="submit">
</form>
<table>
<tr>
<td>campo1</td>
<td>campo2</td>
<td>campo3</td>
</tr>
</table>
<script>
Aquí esta el problema, este script debe enviar el formulario sin recargar la página e inmediatamente actualizar la tabla con los datos que se acabaron de enviar (todo esto sin recargar la página), la parte del manejo php la tengo así:
- Si se recibe un $_POST toma los datos los mete a la base de datos y retorna un true o false según sea el caso
- Si se recibe un variable asociada a la url así
procesa.php?solicitud=datos
Hace la consulta y retorna un array con los valores
</script>
Quedo atento a cualquier comentario o idea para resoler esto :)
2 Respuestas
Para hacer esto debes hacer uso de la llamada jquery $. Ajax
Primero le debemos poner id's a los elementos que necesitamos acceder desde javascript:
<form action="procesa.php" method="POST"> <input type="text" name="campo1" id="campo1"> <input type="text" name="campo2" id="campo2"> <input type="text" name="campo3" id="campo3"> <input type="submit" id="submitbutton"> </form> <table> <tr> <td id="valorCampo1"></td> <td id="valorCampo2"></td> <td id="valorCampo3"></td> </tr> </table>
El script debe controlar el click del botón, obtener los valores de los inputs, lanzar la llamada $.ajax y, en la vuelta, modificar el valor de los td's:
<script>
$(document).ready(function() {
$("#submitButton").on("click", function() {
var campo1 = $("#campo1").val();
var campo2 = $("#campo2").val();
var campo3 = $("#campo3").val();
var solicitud = {campo1: campo1, campo2: campo2, campo3: campo3};
$.ajax({
type: 'POST',
url: 'procesa.php',
data: JSON.stringify({solicitud: solicitud }),
}).done(function(resultado){
if(resultado == true) {
$("#valorCampo1").html(campo1);
$("#valorCampo2").html(campo2);
$("#valorCampo3").html(campo3);
} else {
alert("Ocurrió un erro al guardar los datos");
}
});
});
})
</script>Según tu infraestructura el POST a "procesa.php" devuelve true o false, por eso en el callback de la llamada ajax comprobamos el resultado del servidor para modificar el valor de los td's con lo puesto en los inputs.
Es un ejemplo muy básico y muy mejorable pero espero que te sirva para que puedas seguir investigando a partir de aquí.
Hola ostheneo, ¿te fue útil mi respuesta? Si necesitas cualquier otra cosa coméntamelo e intentaré ayudarte y si te sirvió recuerda valorarla.
Yo lo hago así:
<form action="procesa.php" method="POST">
<input type="text" name="campo1" id="campo1">
<input type="text" name="campo2" id="campo2">
<input type="text" name="campo3" id="campo3">
<input type="submit" id="submitbutton">
</form>
<table>
<tr>
<td id="valorCampo1"></td>
<td id="valorCampo2"></td>
<td id="valorCampo3"></td>
</tr>
</table>
$insert= "INSERT INTO n_de_la_tabla (id_de_la_tabla, , campo1_de_la_tabla, campo2_de_la_tabla, campo3_de_la_tabla) VALUE (NULL, '$_POST[campo1]', '$_POST[campo2]', '$_POST[campo3]')"; conecta = (mysql_connect ($host, $usuario, $pass)) or die (mysql_error()); mysql_select_db ($base, $this->conecta)or die (mysql_error()); $result= mysql_query($insert, $conecta); Echo "<meta http-equiv=\"refresh\" content=\"1\">";
Se puede hacer todo en mismo archivo.
Quiero corregir un error mío. Se trata de la última sentencia:
Echo "<meta http-equiv=\"refresh\" content=\"1\">";
Esta, tal y como la puse, lo puede hacer es dos cosa. Que haga un bucle infinito y que te llene la tabla del mismo registro, o que te grabe el registro y en la segunda vuelta te dé error.
En este caso, la forma correcta de utilizar esta sentencia es:
Si quieres cargar el listado donde tienes todo los registros...
Echo "<meta http-equiv=\"refresh\" content=\"1\ url=listado.php">";
O si quieres que vuelva al formulario inicial para insertar un nuevo registro...
Echo "<meta http-equiv=\"refresh\" content=\"1\ url=form.html">";
Perdone el fallo