Ajax function is not working on Wordpress

Question

I am creating a plugin for Wordpress, I have a script that runs perfectly to part to make ajax request to write some data in the database. The code works until the part to display the text within the `` divpasso2form which is initially empty and after clicking on the text button is inserted into it. But the data are not recorded in the database. My code looks 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'
})
    .done(function(data) {

        console.log(data); 

    });

});

I tested the processa.php file and works perfectly making the insertion of data in the database. But the following 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

Try like this Main HTML:

<form class="home_footer" method="post" id="home_conct_form" action="">
    <input type="text" name="fname"  class="txt" />
    <input type="text" name="lname"  class="txt" />
    <input type="button" name="home_submit" id="home_submit"  value="Get In Touch"/>
</form>

Add on same page:

<script>
$('#home_submit').click(function(){ 
  var formData = $("#home_conct_form").serialize()      
  $.ajax({
     type: 'POST',
     url: '<?php echo home_url('/'); ?>wp-admin/admin-ajax.php?action=footerFrm',
     data: formData,
     beforeSend: function(){
         $('.progloader').show();
         $('#home_submit').hide();
     },
     success:function(data) {
        console.log(data);
     }
 });       
});
</script>

Add blow code in Function.php

add_action('wp_ajax_footerFrm' , 'footerFrm');
add_action('wp_ajax_nopriv_footerFrm' , 'footerFrm');
function footerFrm() {
   print_r($_POST);
   die();
}

Answer 2

That not really the right to do it with WordPress (wp_localize_script, admin_url, wp_ajax_no_priv...).

But with you method, it's easy to adapt:

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

Add this at the top of processa.php

define('WP_USE_THEMES', false);
require ('../wp-blog-header.php'); // be carrefull to get your right path

You file can now use WordPress globals, functions...