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
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.
You added the wrong handler name to
wp_enqueue_script
for submit-form.js.And change
jsforwp_globals.ajax_url
tojsforcon_globals.ajax_url