skip to Main Content

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.

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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>";
                } 
            } 
         }
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search