I have a form in html
which I want to send post
to a file to make an update in the database with that data (forgive the redundancy) that arrives through the post
, only I have no idea what is the best way to do it, if you could help me I would appreciate it, I leave the form in HTML
and the filePHP
HTML
<form action="/Jomar/users_control/controller/ControlAsisController.php?action=guardarInser" onsubmit="return validarCampos()" name="formRegistro" method="POST">
<div class='container justify-content-center shadow p-5 mb-1 mt-n1 bg-white rounded' style= "width: 800px">
<div id="errores" class="alert-danger"></div>
<div class="form-g align-content-centerroup row ml-1 justify-content-center">
<label for="fecha" class="col-form-label">Fecha:</label>
<div class='col-sm-4 mr-3'>
<input type="date" class="form-control" onchange="llenarEmpleados()" value="<?php echo date("Y-m-d") ?>" max="<?php echo date("Y-m-d") ?>" id="fecha" name="fecha">
</div>
<label for="sede" class="col-form-label">Sede:</label>
<div class='col-sm-4'>
<select type="text" class="custom-select" onchange="llenarEmpleados()" id="sede" name="sede" >
<option value="0">Seleccionar sede</option>
<?php
for ($i=0; $i < count($sedes); $i++) {
echo "<option value='{$sedes[$i]['id_sede']}'>{$sedes[$i]['sede']}</option>";
}
?>
</select>
</div>
</div>
<br>
<div class="form-group row ml-1 justify-content-center">
<label for="empleado" class="col-form-label">Empleado:</label>
<div class='col-sm-4 mr-3'>
<select type="text" class="custom-select" id="empleado" name="empleado" disabled="disabled">
<option value="0">Seleccionar empleado</option>
<?php
for ($i=0; $i < count($empleados); $i++) {
echo "<option value='{$empleados[$i]['id_empleado']}'>{$empleados[$i]['nombres']} {$empleados[$i]['apellidos']}</option>";
}
?>
</select>
<div id="mascara" onclick="empleadoIsEmpty()"></div>
</div>
<label for="asistencia" class="col-form-label">Asistencia:</label>
<div class='col-sm-4'>
<select type="text" class="custom-select" id="asistencia" name="asistencia">
<option value="0">Seleccionar asistencia</option>
<?php
for($i=0; $i < count($asistencias); $i++){
echo "<option value='{$asistencias[$i]['id_asistencia']}'>{$asistencias[$i]['siglas']}</option>";
}
?>
</select>
</div>
</div>
<br>
<div class="form-group row ml-1 justify-content-center">
<label for="nota" class="col-form-label">Nota:</label>
<div class='col-sm-5 mr-3'>
<textarea name="nota" id="nota" class="form-control" cols="40" rows="3"></textarea>
</div>
</div>
<div class="form-group row justify-content-center">
<div class="justify-content-center">
<button class="btn btn-primary mr-4 btn-md" style="width: 150px" type="submit">Registrar</button>
<a class="btn btn-danger btn-md" role="button" style="width: 150px" href="/Jomar/users_control/controller/ControlAsisController.php?action=todos" >Cancelar</a>
</div>
</div>
<div class="row justify-content-end">
<button class="btn btn-info btn-md" onclick="setTimeout('llenarEmpleados()', 1)" type="reset">Limpiar</button>
</div>
</div>
</form>
PHP
where do i get thepost
public function guardarInser(){
$controlAsis = new ControlAsistencia();
$controlAsis->fecha = $_POST["fecha"];
$controlAsis->empleado = $_POST["empleado"];
$controlAsis->asistencia = $_POST["asistencia"];
$controlAsis->administrador = $_SESSION["usuario"]["id_admin"];
$res = $controlAsis->insertarControl();
if($res){
$msg = "Se ha insertado correctamente";
}else{
$msg = "No se ha podido insertar";
}
}
I leave a request that I have previously made in Ajax but I do not know if it is done in the same way with the form
AJAX y JQUERY
function llenarEmpleados(){
var sede = $("#sede").val();
var fecha = $("#fecha").val();
var parametros = {
'sede' : sede,
'fecha' : fecha
};
if(sede != 0 && fecha != ""){
$.ajax({
data: parametros,
url: '/Jomar/users_control/controller/ControlAsisController.php?action=llenarEmpleados',
type: 'post',
success: function (response){
$("#empleado").html(response);
console.log(response);
$("#empleado").attr("disabled", false);
}
});
}else{
$("#empleado").attr("disabled", "disabled");
}
}
Previously I was doing it the simple way, which is by redirecting to the file and from there it sends it back with the response and prints it on the screen and so on, but it's bad since the file remains in the link, and I've already accommodated that so it doesn't look like that, but now I prefer to do it with jquery and ajax, which is much easier and the results are much better Thanks for your help
The first thing you should know when sending the data of a
form
porAJAX
is that the attributesaction
andmethod
will no longer be of any use to us, you can remove them without any problem.After that, to execute the event that will trigger the
AJAX
you don't need to execute the eventsubmit
of theform
, you could also add an eventclick
to the submit button. In case you want to use the eventsubmit
ofform
then you will have to use ae.preventDefault();
to override its default behavior.In your form code I've removed the
action
andmethod
del attributesform
, I've also changed the type of the register button from asubmit
to abutton
to prevent the del eventsubmit
from runningform
.I can see that you have a field validation when executing the
submit
delform
, that validation code you can pass to the new function that is going to be fired with the eventclick
to the register button.Regarding your shipping method, I see that you use this method:
This form is correct, the data is sent correctly but imagine that you have a large form with about 50 fields in it...Would you capture the value of each field one by one? Obviously not, so the best way is to use the .serialize() method of
jQuery
, what this method does is create a text stringURL
encoded by the serialization of the form values, you can see it in the following example:Then once the data is serialized you can proceed with the sending:
In your PHP you can receive them in the same way that you are already doing it.
You can do the following: