Ajax function is not working on Wordpress

0

I am creating a plugin for CMS Wordpress, in it I have a script that runs perfectly until the part of making the ajax request to write some data in the database. The code works until the part of displaying the text within div passo2form which initially is empty and after clicking the button the text is inserted inside it. However, the data is not written to 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',
        encode      : true
    })
        .done(function(data) {

            console.log(data); 

        });

});

I have tried the file'processa.php 'and it works perfectly by inserting the data into the database. But follow 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();

?>
    
asked by anonymous 29.09.2016 / 02:40

2 answers

0

I managed to solve it. First I added a function to 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 file processa.js:

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;
}
    
02.10.2016 / 17:24
0

Oh, I'm going to 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>
    
29.09.2016 / 02:48