Tengo mi view en la cual muestro un pequeño formulario para ingresar correo y Movil. Además, también paso a esta misma view resultados de consultas a mi BD y las imprimo en pantalla.
Lo que quiero lograr es que al hacer clic en el botón de enviar formulario el correo, el Num.Telefono más algunos id que paso a esta vista, se envien a un controlador y este guardara estos datos en la BD.
He logrado capturar El correo, Movil y los id que quiero, por medio de JavaScript, ya que al hacer clic en botón de submit hago un console.log y me muestra el objeto con los datos en la consola.
Investigando descubrí que con ajax se puede enviar mis variables a mi controlador y sin recargar mi página! Realice la estructura del envio con ajax pero al dar clic en enviar mis datos se muestran en la url como si se enviaran por GET, y tengo puesto el type: 'POST' y mi ruta al controlador que recibira estos datos igual esta en POST. Y no, mi controlador no recibe nada de datos ya que en mi tabla en la BD no hay datos.
Soy nuevo con ajax y ya intenté varias cosas y no funciona.
Mi formulario en mi view
<form id="formulario">
@csrf
<input type="hidden" name="IdA" value="{{ $kardex->IdA }}">
<input type="hidden" name="IdEstatus" value="S">
<input type="hidden" name="fecha" value="{{ date('Y-m-d H:i:s')}}">
<label for="email">Correo electronico</label><br>
<input type="email" id="correo" name="correo"><br>
<label for="phone">Confirma tu numero</label><br>
<input type="tel" id="cel" name="cel"><br>
<button type="submit" id="btnEnviar" class="btnout">Enviar</button>
</form>
Mi codigo JavaScript con ajax
$(document).ready(function() {
$('#btnEnviar').submit(function(event) {
// Obtener la fecha actual
event.preventDefault();
var fechaSolicitud = new Date();
var Fecha_Solicitud = fechaSolicitud.toISOString().slice(0, 19).replace("T", " ");
var csrfToken = $('meta[name="csrf-token"]').attr('content');
$('#fecha_solicitud').val(Fecha_Solicitud);
// crear objeto con los datos
var formData = {
_token: csrfToken,
IdA: kardex.IdA,
IdEstatus: 'S',
FechaSolicitud: formattedFechaSolicitud,
FechaEnvio: formattedFechaSolicitud,
CorreoElectronico: $('#correo').val(),
Movil: $('#cel').val(),
};
console.log(formData);
// Realizar la solicitud AJAX
$.ajax({
type: 'POST',
url: '/solicitudes',
data: formData,
cache: false,
success: function(response) {
console.log(response);
},
error: function(error) {
console.error(error);
}
});
});
Mi ruta en web.php
Route::post('/solicitudes', [solicitudecController::class,'guardars'])->name('solicitudes');
Mi controlador
public function guardars(Request $request){
$formData = [
$IdA = $request->all('IdA'),
$IdEstatus = $request->all('IdEstatus'),
$FechaSolicitud = $request-> all('FechaSolicitud'),
$FechaEnvio = $request-> all('FechaEnvio'),
$CorreoElectronico= $request-> all('CorreoElectronico'),
$Movil= $request->all('Movil'),
];
// dd($data);
DB::table('Solicitudes')->insert([
'IdA' => $IdA,
'IdEstatus' => $IdEstatus,
'FechaSolicitud' => $FechaSolicitud,
'FechaEnvio' =>$FechaEnvio,
'CorreoElectronico' => $CorreoElectronico,
'Movil' => $Movil,
]);
}
data: "correo="+correo+ "&movil=" + movil + "&fecha=" + fecha
Si lo quieres enviar como un objeto como lo estás haciendo, debes enviarlo como json.