I would like to tell you that I want to send a form by ajax
and that this data is obtained to execute the PHPMailer
function.
The problem is that from the file send _mensaje.php
I get the following errors:
Undefined index serial in .... Undefined index marks in ....
And so on with the rest of the variables.
The codes are the following:
Form
<form class="contact-form row" id="form-reportarbici">
<div class="col-md-4">
<label></label>
<input type="text" class="form-control" placeholder="Serial" id="serial" required>
</div>
<div class="col-md-4">
<label></label>
<input type="text" class="form-control" placeholder="Marca" id="marca" required>
</div><br>
Cuéntale dónde la encontraste... <br>
<div class="col-md-4">
<label></label>
<input type="text" class="form-control" placeholder="Localidad" id="localidad" required>
</div>
<div class="col-md-4">
<label></label>
<input type="text" class="form-control" placeholder="Barrio" id="barrio" required>
</div>
<div class="col-md-4">
<label></label>
<input type="text" class="form-control" placeholder="Direccion (opcional)" id="direccion">
</div>
<div class="col-md-12">
<label></label>
<textarea class="form-control" rows="9" placeholder="Mensaje adicional (opcional)" id="mensaje"></textarea>
</div>
<div class="col-md-4 col-md-offset-4">
<label></label>
<button type="submit" data-toggle="" data-target="#" class="btn btn-primary btn-block btn-lg" id="btn_reportar">Enviar <i class="ion-android-arrow-forward"></i></button>
</div>
</form>
Send by Ajax:
$(document).ready(function(){
$('#form-reportarbici').submit(reportar)
function reportar(evento){
evento.preventDefault();
alert("enviando");
var datos = new FormData($('#form-reportarbici')[0])
$.ajax({
url: 'enviar_mensaje.php',
type: 'POST',
data: datos,
contentType: false,
processData: false,
success: function(datos){
alert(datos);
}
})
}
});
Reception in PHP:
date_default_timezone_set('Etc/UTC');
require 'PHPMailer/PHPMailerAutoload.php';
require ('conexion.php');
$nombre = "";
$link = "";
$serial= $_POST['serial'];
$marca= $_POST['marca'];
$localidad= $_POST['localidad'];
$barrio= $_POST['barrio'];
$direccion= $_POST['direccion'];
$mensaje= $_POST['mensaje'];
Maybe it's good to say the jquery bookstore ... Although this one has worked quite well for me.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>