I am trying to develop a custom form working with AJAX. But there is no way to work because everytime it gives me the below message:
"POST .php 400 (Bad Request)".
I post my code:
<?php
/*
Template Name: Database Atleti
*/
?>
<?php
$link = mysqli_connect ("XXXXXXX", "XXXXXXX", "XXXXXXX", "XXXXXXX");
if (mysqli_connect_error()) {
die ("Problemi di connessione con il server. Riprovare più tardi");
};
?>
<!--JQUERY AND JQUERY UI LINKS!-->
<script
src=".3.1/jquery.min.js"></script>
<link rel="stylesheet" href=".12.1/themes/smoothness/jquery-ui.css">
<script src=".12.1/jquery-ui.min.js"></script>
<!--BOOSTRAP!-->
<link rel="stylesheet" href=".0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src=".js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src=".0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<?php get_header(); ?>
<div class="x-container max width main">
<div class="offset cf">
<div class="<?php x_main_content_class(); ?>" role="main">
<!-- BUTTON TRIGGER MODAL -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#aggiungiAlimento">Aggiungi</button>
<!-- MODAL -->
<div class="modal fade" id="aggiungiAlimento" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- MODAL FORM -->
<form action="" method="post">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Alimento</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nome e Cognome</label>
<input type="text" name="nomeecognome" id="nomeecognome" class="form-control">
<label id="lblNomeECognome" style="color:red"></label>
</div>
<div class="form-group">
<label>Età</label>
<input type="text" name="eta" id="eta" class="form-control">
<label id="lblEta" style="color:red"></label>
</div>
<div class="form-group">
<label>Data di Nascita</label>
<input type="text" name="dataNascita" id="dataNascita" class="form-control">
<label id="lblDataNascita" style="color:red"></label>
</div>
<div class="form-group">
<label>Telefono</label>
<input type="text" name="telefono" id="telefono" class="form-control">
<label id="lblTelefono" style="color:red"></label>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" id="email" class="form-control">
<label id="lblEmail" style="color:red"></label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary" id="salva">Salva</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(document).on('click','#salva',function(e) {
e.preventDefault();
var nomeecognome = $("#nomeecognome").val();
var eta = $("#eta").val();
var dataNascita = $("#dataNascita").val();
var telefono = $("#telefono").val();
var email = $("#email").val();
if (nomeecognome == "") {
$("#lblNomeECognome").html("Inserisci Nome e Cognome");
}else{
$.ajax({
type:"POST",
url:'/wp-admin/admin-ajax.php',
data:{
action : 'form_atleti_ajax',
nomeecognome : nomeecognome,
eta : eta,
dataNascita : dataNascita,
telefono : telefono,
email : email
},
success:function(data){
alert("Atleta aggiunto");
$("#aggiungiAlimento").modal('hide');
location.reload();
}
});
};
});
});
</script>
<?php while ( have_posts() ) : the_post(); ?>
<?php x_get_view( 'ethos', 'content', 'page' ); ?>
<?php x_get_view( 'global', '_comments-template' ); ?>
<?php endwhile; ?>
</div>
</div>
</div>
<?php get_footer(); ?>
Below my "function.php":
add_action('wp_ajax_form_atleti', 'form_atleti_ajax');
add_action('wp_ajax_nopriv_form_atleti', 'form_atleti_ajax');
function form_atleti_ajax() {
global $wpdb;
$nomeecognome = $_POST['nomeecognome'];
$eta = $_POST['eta'];
$dataNascita = $_POST['dataNascita'];
$telefono = $_POST['telefono'];
$email = $_POST['email'];
$wpdb->insert('wp_databaseAtleti',
array(
'Nome e Cognome' => $nomeecognome,
'Età' => $eta,
'Data di nascita' => $dataNascita,
'Cellulare' => $telefono,
'Email' => $email,
),
array(
'%s',
'%s',
'%s',
'%s',
'%s'
)
);
die();
};