Ajax function is not working in Wordpress

Question

I am creating a plugin for CMS Wordpress, in it I have a script that runs perfectly until the part to make the request ajax to record some data in the database. The code works until the part displaying the text inside the div passo2form which initially becomes empty and after clicking the button the text is inserted inside it. However the data is not written in the database. My code is like this:

Main html:

<div class='principal-form'>

        <input type='text' name='nome' id='nome' class='campo-form' placeholder='Nome' maxlength='50'><br>
        <input type='email' name='email' id='email' class='campo-form' placeholder='Email' maxlength='120'/>
        <button type='submit' id='enviarform' class='botao-enviar'>Efetuar Simulação</button>

</div>

<div id='passo2form' class='passo2form'></div>

Javascript file that runs:

jQuery('#enviarform').click(function(){
        var nome = document.getElementById('nome').value;
        var email = document.getElementById('email').value;

        jQuery( "#passo2form" ).html("<div class='col-md-35 padding-top-15'><div class='texto-ola'><p>Olá <span class='cor-vermelho'>" + nome + "</span>,</p><p>Estaremos enviando em breve sua cotação para o email <span class='cor-vermelho'>" + email + " </span></p></div></div>");




var formData = {
        'nome'              : jQuery('input[name=nome]').val(),
        'email'             : jQuery('input[name=email]').val()
    };

    // process the form
    jQuery.ajax({
        type        : 'POST',
        url         : 'processa.php',
        data        : formData,
        dataType    : 'json',
        encode      : true
    })
        .done(function(data) {

            console.log(data); 

        });

});

I tested the file processes.php and works perfectly by inserting the data into the database. But it follows the code:

<?php
include_once($_SERVER['DOCUMENT_ROOT'].'/wordpress/wp-config.php' );

global $wpdb;

$nome = trim($_POST['nome']);
$email = trim($_POST['email']); 

$wpdb->insert(
        wp_formclientes,
        array(
            'nome'    => $_POST['nome'],
            'email'   => $_POST['email']
        )
    );

$wpdb->show_errors();

?>

Answer 1

I managed to fix it. First I added a function in the plugin’s main file, like this:

function addCustomer(){

global $wpdb;

$nome = trim($_POST['nome']);
$email = trim($_POST['email']); 

if($wpdb->insert('wp_formclientes',array(
'nome'=>$nome,
'email'=>$email
))===FALSE){

echo "Error";
}
else {
    //mensagem de sucesso
}
add_action('wp_ajax_addCustomer', 'addCustomer');
add_action('wp_ajax_nopriv_addCustomer', 'addCustomer');

And this was in my.js processing file:

var urlsite = jQuery('#urlsite').val();
var urlsitenova = urlsite + "/wp-admin/admin-ajax.php";

jQuery('#cadastraForm').submit(ajaxSubmit);

function ajaxSubmit(){

    var newCustomerForm = jQuery(this).serialize();

    jQuery.ajax({
    type:"POST",
    url: urlsitenova,
    data: newCustomerForm,
    success:function(data){
    jQuery("#feedback").html(data);
    }
});

return false;
}

Answer 2

Ah, I’ll make a copy of your code using the basic functions of Jquery, you could test and see if it makes a difference:

$('#enviarform').click(function(){
        var nome = $('#nome').val();
        var email = $('#email').val();

        $( "#passo2form" ).html("<div class='col-md-35 padding-top-15'><div class='texto-ola'><p>Olá <span class='cor-vermelho'>" + nome + "</span>,</p><p>Estaremos enviando em breve sua cotação para o email <span class='cor-vermelho'>" + email + " </span></p></div></div>");




var formData = {
        'nome'              : $(nome).val(),
        'email'             : $(email).val()
    };

    // process the form
    $.ajax({
        type        : 'POST',
        url         : 'processa.php',
        data        : formData,
        dataType    : 'json',
        encode      : true
    })
        .done(function(data) {

            console.log(data); 

        });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='principal-form'>

        <input type='text' name='nome' id='nome' class='campo-form' placeholder='Nome' maxlength='50'><br>
        <input type='email' name='email' id='email' class='campo-form' placeholder='Email' maxlength='120'/>
        <button type='submit' id='enviarform' class='botao-enviar'>Efetuar Simulação</button>

</div>

<div id='passo2form' class='passo2form'></div>