0

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>
  • 1
    Did you add the calculation() function you admin-ajax.php? You’re not supposed to edit core files. Your code should be in functions.php of your theme. – Jacob Peattie Mar 5 at 5:15
0

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');
| improve this answer | |
  • Nothing change still got same error – Rika Mar 5 at 5:24
  • I have tested your code and made above changes and it is working fine. can you tell me where did you include Admin-ajax.php file in your theme ??? I have add Admin-ajax.php file code in my theme's functions.php file. – Chetan Vaghela Mar 5 at 5:29
  • 1
    @Rika Did you modify core Admin-ajax.php file ? or Admin-ajax.php file is your custom file in theme ? you can use calculation() code of Admin-ajax.php file code in your theme's functions.php file. – Chetan Vaghela Mar 5 at 5:41
  • 1
    You’re not supposed to edit wp-admin->admin-ajax.php file as @JacobPeattie it is core file. Remove code from admin-ajax.php file and Add that code in your active theme's functions.php file instead of wp-admin->admin-ajax.php. – Chetan Vaghela Mar 5 at 6:00
  • 1
    guys thank you so much help me.it's work now – Rika Mar 5 at 6:21
0

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();
  }
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.