I have been working at this for weeks without success. I’ve figured out problem after problem with the code, but none of the corrections seem to fix my core problem. The form doesn’t insert anything into the database and I don’t know why. all my data’s passed in the ajax call but it doesn’t insert in the data in the database.

I’m new to ajax and to WordPress plugins so I might be missing something obvious. Please help me know where I am going wrong. Thanks in advance.

My widget form plugin code

public function widget( $args, $instance ) {


    if ( ! isset( $args['widget_id'] ) ) {

        $args['widget_id'] = $this->id;
        
        }

        $title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Contact' );

        $title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
        
        
         ?>
    <?php
        if ( $title ) {
           echo '<h2 class="widget-title">'.$args['before_title'] . $title . $args['after_title'].'</h2>';
          
        }
       ?>

    <form  class="form-group" method="POST" id="form" action="">
        <label>Name</label><br>
        <input class="form-control" type="text" id="name" name="name" ><br>
        <label>Mobile</label><br>
        <input type="text" class="form-control" id="mobileno" name="mobileno" required><br>
        <label>Email</label><br>
        <input class="form-control"  type="email" id="email" name="email" ><br>
        <label>Message</label><br>
        <textarea class="form-control" id="message" name="message"  maxlength="10" onKeyPress="lengthcheck()"></textarea><br><br>
        <button  class="btn btn-warning" type="submit" id="submit">Send Message</button>
    </form>
<?php } 

This is my enqueue methods:

add_action( 'wp_enqueue_scripts', 'vs_con_enqueue_scripts' );

function vs_con_enqueue_scripts(){
 wp_register_script( 
   'ajaxHandle', 
   plugins_url('valid.js', __FILE__), 
   array('jquery'), 
   false, 
   true 
 );
 wp_enqueue_script( 'ajaxHandle');
 wp_localize_script( 
   'ajaxHandle', 
   'ajax_object', 
   array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) 
 );
 wp_enqueue_style( 'bootstrap-style','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

}


add_action( "wp_ajax_contact", "vs_contact_form" );
add_action( "wp_ajax_nopriv_contact", "vs_contact_form" );


function vs_contact_form(){

   global $wpdb;

       $name = $_POST["name"];
       $email = $_POST["email"];
       $mobileno = $_POST["mobileno"];
       $messsage = $_POST["messsage"];
       
       $tablename = $wpdb->prefix.'contactdetails';
       $insert_row = $wpdb->insert( 
         $tablename, 
           array( 
               'name' => $name, 
               'email' => $email, 
               'mobileno' => $mobileno,
               'messsage' => $messsage 
           )
         );
           // if row inserted in table
        if($insert_row){
           echo json_encode(array('res'=>true, 'message'=>__('Message Sent Successfully')));
       }else{
          echo json_encode(array('res'=>false, 'message'=>__('Something went wrong. Please try again later.')));
       }
       wp_die();
}

Here this is my form submit jquery ajax call function

valid.js

jQuery(document).ready(function($){
    $('form#form').on('submit', function(e){
       e.preventDefault();
       var name =jQuery('#name').val();
       var email = jQuery('#email').val();
       var mobileno = jQuery('#mobileno').val();
       var message = jQuery('#message').val();
       debugger;
       var text;
       if(name.length < 5){
         text = "Please Enter valid Name";
        alert(text);
         return false;
       }
       if(isNaN(mobileno) || mobileno.length != 10){
         text = "Please Enter valid mobileno Number";
         alert(text);
         return false;
       }
       if(email.indexOf("@") == -1 || email.length < 6){
         text = "Please Enter valid Email";
         alert(text);
         return false;
       }
       
       $.ajax({
          url: ajax_object.ajaxurl,
          type:"POST",
          dataType:'json',
          data: {
             action:'contact',
             name: name,
             email: email,
             mobileno: mobileno,
             message: message
        },   success: function(data){
            if (data.res == true){
                alert(data.message);    // success message
            }
         }, error: function(data){
            if (data.res == false){
                alert(data.message);    // success message
            }   
        }
       });
    $('#form')[0].reset();
      });
    });

please help me to find out where I am wrong?