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.

Answer 1

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>";
            } 
        } 
     }
});