mysql - Issue developing an AJAX form with Wordpress|Programmer puzzle solving

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">&times;</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();

};

Programmer puzzle solving

mysql - Issue developing an AJAX form with Wordpress

Articles related to this article

comment list (0)