400 Bad Request getting on AJAX Call

Question

I try, when click the submit button then pass the ajax request with some values then calculate that values and return.

My Problem : when I make custom Ajax Call then I get 400 error from admin-ajax.php. Please help me to find my mistake or best way to do this.

Ajax Call - footer.php(theme footer)

 <script>
    $(function() {

       $("#calc_form").on("submit", function(e) { 
        //   alert("submit");
            e.preventDefault();

            $.ajax({
                method: "POST",
                url: "/wp-admin/admin-ajax.php",
                data: {
                    action: 'calculation',
                    message_id: $('#tot_tax_three_month_Input').val()
                },
                dataType: 'json',
                success: function (output) {

                }

            });
       });

    });
</script>

Admin-ajax.php

// handle the ajax request
 function calculation() {
     $value = $_REQUEST['message_id'];

     echo json_encode(array("value" => $value));
     die();
 }

     // register the ajax action for authenticated users
     add_action('wp_ajax_calculation', 'calculation');

     // register the ajax action for unauthenticated users
     add_action('wp_ajax_nopriv_calculation', 'calculation');

test.php

  <form id="calc_form">
    <table class="table">
      <thead>
        <tr>
          <th style="width: 40%" scope="col"></th>
          <th scope="col">Per month LKR</th>
          <th scope="col">For 3 months period* LKR</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="2" class=" text-danger"><b>Tax amount for 3 months</b></td>
          <td><input type="text" name="" id="tot_tax_three_month_Input" class="form-control "  /></td>
        </tr>
        <tr>
          <td colspan="2"></td>
          <td>
            <button type="submit" id="btnCalculate" class="btn btn-success">Calculate</button>
            <button type="button" id="btnReset" class="btn btn-secondary">Reset</button>
          </td>
        </tr>
      </tbody>
    </table>
  </form>

Answer 1

Your have to use full url of ajax function. I have use ajax_url in your Ajax Call - footer.php(theme footer) file code.

<script>
    var ajax_url = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
    jQuery(function() {

       jQuery("#calc_form").on("submit", function(e) { 
        //   alert("submit");
            e.preventDefault();

            jQuery.ajax({
                method: "POST",
                url: ajax_url,
                data: {
                    action: 'calculation',
                    message_id: jQuery('#tot_tax_three_month_Input').val()
                },
                dataType: 'json',
                success: function (output) {

                }

            });
       });

    });
</script>

Remove code from wp-admin->admin-ajax.php file and Add that code in your active theme's functions.php file instead of wp-admin->admin-ajax.php

// handle the ajax request
 function calculation() {
     $value = $_REQUEST['message_id'];

     echo json_encode(array("value" => $value));
     die();
 }

 // register the ajax action for authenticated users
 add_action('wp_ajax_calculation', 'calculation');

 // register the ajax action for unauthenticated users
 add_action('wp_ajax_nopriv_calculation', 'calculation');

Answer 2

I change files like @Chethan and @Jacob mention.I edit active theme's functions.php file instead of wp-admin->admin-ajax.php.Then change ajax URL

footer.php

  <script>
var ajax_url = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
jQuery(function() {

   jQuery("#calc_form").on("submit", function(e) { 
    //   alert("submit");
        e.preventDefault();

       jQuery.ajax({
            method: "POST",
            url: ajax_url,
            data: {
                action: 'calculation',
                message_id: jQuery('#tot_tax_three_month_Input').val()
            },
            dataType: 'json',
            success: function (output) {
                console.log(output);
            }

        });
   });

});
</script>

function.php before admin-ajax.php

   // register the ajax action for authenticated users
   add_action('wp_ajax_calculation', 'calculation');

  // register the ajax action for unauthenticated users
  add_action('wp_ajax_nopriv_calculation', 'calculation');

  // handle the ajax request
  function calculation() {
     $value = $_REQUEST['message_id'];
     $value = 1 + 1;
     echo json_encode(array("value" => $value));
     die();
  }