Ajax Form Submission

<script type="text/javascript">
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>
<script>
jQuery(document).ready(function($){
$('form.ajax').on('submit', function(e){
   e.preventDefault();
   var that = $(this),
   url = that.attr('action'),
   type = that.attr('method');
   var name = $('.name').val();
   var email = $('.email').val();
   var message = $('.message').val();
   $.ajax({
      url: ajaxurl,
      type:"POST",
      dataType:'type',
      data: {
         action:'set_form',
         name:name,
         email:email,
         message:message,
    },   success: function(response){
        $(".success_msg").css("display","block");
     }, error: function(data){
         $(".error_msg").css("display","block");      }
   });
$('.ajax')[0].reset();
  });
});
</script>
<div class="ajax-form">
  <div class="container">
    <div class=row>
      <div class="col-md-6 col-md-offset-3 form-box">
       <form action="" method="post" class="ajax" 
enctype="multipart/form-data">
         <h1>Ajax Form</h1>
         <label><b>Name</b></label>
          <input type="text" placeholder="Enter Your Name" name="name" 
required class="name">
         <label><b>Email</b></label>
         <input type="email" placeholder="Enter your Email" name="email" 
required class="email">
         <label><b>Message</b></label>
          <input type="textarea" placeholder="Message" name="message" 
required class="message"><hr>
            <div id="msg"></div>
              <input type = "submit" class="submitbtn" value="submit">
<div class="success_msg" style="display: none">Message 
Sent Successfully</div>
                  <div class="error_msg" style="display: none">Message 
Not Sent, There is some error.</div>
    </form>
   </div>
 </div>
</div>

Functions.php File

function ajax_form_scripts() {
	$translation_array = array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    );
    wp_localize_script( 'main', 'cpm_object', $translation_array );
}
add_action( 'wp_enqueue_scripts', 'ajax_form_scripts' );

// THE AJAX ADD ACTIONS
add_action( 'wp_ajax_set_form', 'set_form' );    //execute when wp logged in
add_action( 'wp_ajax_nopriv_set_form', 'set_form'); //execute when logged out
function set_form(){
	$name = $_POST['name'];
	$email = $_POST['email'];
	$message = $_POST['message'];
	$admin = get_option('admin_email');
	
	if (!empty($_POST)) {
        global $wpdb;
        $table = wpi7_ajaxform;
        $data = array(
            'Name' => $_POST['name'],
            'Email' => $_POST['email'],
			'Message' => $_POST['message']
        );
        $format = array(
            '%s',
            '%s'
        );
        $wpdb->insert( $table, $data, $format );
        // if($success){
         //   echo 'data has been save' ; 
      //  }
    } //else {
        
    //} 
	
	// wp_mail($email,$name,$message);  main sent to admin and the user
	if(wp_mail($email, $name, $message)  &&  wp_mail($admin, $name, $message) )
       {
           echo "mail sent";
   } else {
          echo "mail not sent";
   }
	die();
}

Leave a Reply