Problem with inserting data to custom table using ajax in wordpress plugin

Question

I am trying to insert data in custom table in wordpress while creating plugin using AJAX. But I failed to do. here is the code of contact.php where I register scripts

    add_action('wp_enqueue_scripts', 'setting_up_scripts_contact_form_wp');
function setting_up_scripts_contact_form_wp() {
    wp_register_style( 'contact-custom-style',plugins_url('public/css/style.css', __FILE__) );
    wp_enqueue_style( 'contact-custom-style');
    wp_enqueue_script( 'cfajax-con', plugins_url('includes/submit-form.js', __FILE__),array(),false,true  );
    // wp_enqueue_script( 'wpforajax_con_test', plugins_url('public/js/test.js', __FILE__) );
    // wp_register_script('wpforajax_con_test', plugin_dir_url(__FILE__) . 'test.js', true);
    wp_localize_script(
        'jsforcon-frontend-js',
        'jsforcon_globals',
        [
          'ajax_url'    => admin_url( 'admin-ajax.php' ),
          'nonce'       => wp_create_nonce( 'jsforcon_insert_nonce' )
        ]
      );
}

contact form is

<div class="container">
    <div class="row display_big justify-content-center">Contact Us</div>
        <div class="row justify-content-center">
            <div class="col-md-6 ">
            <form>
           <input type="text" id="conName" class="txt_trans txt_full " name="conName" placeholder="Name" required><br><br>
           <input type="text" id="conMail" name="conMail" class="txt_trans txt_full" placeholder="Mail" required><br><br>
           <small id="emailHelp" class="form-text text-muted p-0 m-0">We takes your mail id for sending reply to you.</small> 
           <textarea id="conContant" class="txt_a_trans txt_full " name="conContant"cols="30" rows="10" placeholder="content" required></textarea>
           <div class="con_error_msg"></div>
           <button type="button" class="btn_submit" id="saveContact" value="load data" >Contact Us</button><br><br><br><br> 
           </form> 
           </div> </div></div>

<?php echo "<script type='text/javascript'>var ajaxurl = '".admin_url('admin-ajax.php')."'</script>"; ?>

and the insert.php file is here

<?php

function my_contact_form(){

require( dirname(__FILE__).'/wp-load.php' );
global $wpdb;
$table_name = 'wp_contact_form';

  $wpdb->insert( 
    $table_name, 
    array( 
        'con_name' => $your_name, 
        'con_main' => $your_mail, 
        'contant' => $your_content, 
        'con_status' => 'unview',
        'con_rep_status' => 'notReplied',
        'con_date' => time()
    ), 
    array( 
        '%s', 
        '%s',
        '%s',
        '%s',
        '%s',
        '%s'
    ) 
 );
}
?>

javascript code for implementing ajax

    var cf_saveContact =  document.getElementById("cf_saveContact");
  cf_saveContact.addEventListener('click', function() {
  var conName =  document.getElementById("conName").value;
  var conMail =  document.getElementById("conMail").value;
  var conContant =  document.getElementById("conContant").value;
   
       if(conName == "" || conMail == "" || conContant == ""){
              document.querySelector(".con_error_msg").innerHTML = "<p style='color:red'>all fields are required</p>";
            }else{
                var action = "jsforcon-insert";
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET",jsforwp_globals.ajax_url+"?action="+action+"&_ajax_nonce="+jsforcon_globals.nonce+"&name="+conName+"&mail="+conMail+"&content="+conContant,true);
                xmlhttp.send();
                xmlhttp.onreadystatechange = function(){
                    if(this.readyState == 4 && this.status == 200){
                        conName =  document.getElementById("conName").value = "";
                        conMail =  document.getElementById("conMail").value = "";
                        conContant =  document.getElementById("conContant").value = "";
                        document.querySelector(".con_error_msg").innerHTML = "<p style='color:green'>Successfully Sent</p>";
                    } } }
});

I use the ajax code outside wordpress work but in wordpress not works. I just want to insert data using ajax in wordpress table. If you have any other method than suggest.

@Bhautik my code is in the plugin folder and ajax file in plugin/contact/public/js and I declare ajax script in plugin/contact/contact.php — Pankaj Singh Rana
– Pankaj Singh Rana, Commented Apr 7, 2021 at 2:32
@Bhautik I think I am wrong in providing the url in ajax call, this ajax code working outside the wordpress — Pankaj Singh Rana
– Pankaj Singh Rana, Commented Apr 7, 2021 at 2:33
What response did you get? did you get any errors? did you check the error logs? — Bhautik
– Bhautik, Commented Apr 7, 2021 at 6:57

Bhautik · Accepted Answer · 2021-04-08 10:16:13Z

You added the wrong handler name to wp_enqueue_script for submit-form.js.

add_action('wp_enqueue_scripts', 'setting_up_scripts_contact_form_wp');
function setting_up_scripts_contact_form_wp() {
    wp_register_style( 'contact-custom-style',plugins_url('public/css/style.css', __FILE__) );
    wp_enqueue_style( 'contact-custom-style');
    wp_enqueue_script( 'jsforcon-frontend-js', plugins_url('includes/submit-form.js', __FILE__),array(),false,true  );
    // wp_enqueue_script( 'wpforajax_con_test', plugins_url('public/js/test.js', __FILE__) );
    // wp_register_script('wpforajax_con_test', plugin_dir_url(__FILE__) . 'test.js', true);

    wp_localize_script(
        'jsforcon-frontend-js',
        'jsforcon_globals',
        [
          'ajax_url'    => admin_url( 'admin-ajax.php' ),
          'nonce'       => wp_create_nonce( 'jsforcon_insert_nonce' )
        ]
      );
}

And change jsforwp_globals.ajax_url to jsforcon_globals.ajax_url

var cf_saveContact =  document.getElementById("cf_saveContact");
cf_saveContact.addEventListener('click', function() {
    var conName =  document.getElementById("conName").value;
    var conMail =  document.getElementById("conMail").value;
    var conContant =  document.getElementById("conContant").value;
   
    if(conName == "" || conMail == "" || conContant == ""){
        document.querySelector(".con_error_msg").innerHTML = "<p style='color:red'>all fields are required</p>";
    }else{
        var action = "jsforcon-insert";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET",jsforcon_globals.ajax_url+"?action="+action+"&_ajax_nonce="+jsforcon_globals.nonce+"&name="+conName+"&mail="+conMail+"&content="+conContant,true);
        xmlhttp.send();
        xmlhttp.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                conName =  document.getElementById("conName").value = "";
                conMail =  document.getElementById("conMail").value = "";
                conContant =  document.getElementById("conContant").value = "";
                document.querySelector(".con_error_msg").innerHTML = "<p style='color:green'>Successfully Sent</p>";
            } 
        } 
     }
});

Paul Swarthout · Accepted Answer · 2021-04-06 19:18:59Z

0

You say you're doing this in an AJAX call? Are you writing out the response from the AJAX call to be sure that you're not getting errors? Always check the XMLHttpRequest's status and response for errors before proceeding.

answered Apr 6, 2021 at 19:18

Paul Swarthout

1799 bronze badges

Collectives™ on Stack Overflow

Problem with inserting data to custom table using ajax in wordpress plugin

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related