How to fix ajax request to the form handler file from the WordPress plugin. (I am developing a plugin myself)

Question

everyone!I'm creating WordPress plugin. The main goal of this plugin is creating form, and after user will fill out this form data from the form will be written to the database. I made the part of the plugin that is responsible for creating the database and displaying the form using a shortcode. But faced with a problem. How to send data from a form to a database using the ajax method.

After activating the plugin, a table is created in the database:

if ( ! function_exists ( 'jal_install' ) ) {
function jal_install (){
    global $wpdb;
    require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
    $table_name = $wpdb->prefix . "liveshoutbox";
    $charset_collate = $wpdb->get_charset_collate();
        if($wpdb->get_var("SHOW TABLES LIKE '{$table_name}'") !== $table_name){
            $sql = "CREATE TABLE $table_name (
            id mediumint(9) NOT NULL AUTO_INCREMENT,

            client_name tinytext NOT NULL,
            client_mail varchar(55) DEFAULT '' NOT NULL,

            PRIMARY KEY  (id)
            ) $charset_collate;";
        dbDelta( $sql );
    }   
  }
}

The form on the page is displayed with a shortcode:

function form_shortcode() {
        ob_start(); ?>

      <form class="main_form" method="POST" action="">
            <input type="text" name="user_name">
            <input type="text" name="user_mail">
            <button type="submit">Subnit</button>
      </form>
      <div class="main_form__success">Greate Worck!</div>
         
    <?php 
      return ob_get_clean();
    }

    add_shortcode('form-shortcode', 'form_shortcode');

For adding data from the form to the database, there is a file: form_action.php I placed it in the main plugin directory. And for initiating the work of this file I use the form_ajax.js

$("form.main_form").submit(function() {
      var th = $(this);
      $.ajax({
        type: "POST",
        url: "/form_action.php",
      }).done(function() {
        $(th).find('.main_form__success').addClass('active').css('display', 'flex').hide().fadeIn();
        setTimeout(function() {
          $(th).find('.main_form__success').removeClass('active').fadeOut();
          th.trigger("reset");
        }, 3000);
      });
      return false;
    });

As a result, I cannot get to this form_action.php file. And I have an error. The code tries to find it in the root of the site, but not in the root of the plugin. I do not understand how to fix it, tell me how to do it please.

Answer 1

this is a basic syntax for ajax jquery request

here , in the data field , you have to specify your form using id ,name or tag

$.ajax({
  url: "/../form_action.php",
  type: "POST",
  data:$('form').serialize(),
  success: function (data) {
    .....
  }
});