How to call ajax function multiple time on same page with different url

June 9, 2022

Hı gusy!
I am trying to drop ajax post function to one and use it on whole site with different url on each page.

This is my original function and how it works :

<button type="button"class="submit">send</button>

$(document).ready(function (){
   $('.submit').on("click", function(e){
        e.preventDefault();
      var form = $(this).closest('form');
        $.ajax({
            type:'POST',
            url:'ActionPage.php',
            data:form.serialize(),
            success:function(vardata){
             var json = JSON.parse(vardata);
              if(json.status == 101){
               alert(json.msg);
                window.location.replace("/");
                } else {
                 alert(json.msg);
                 console.log(json.msg);
                }
            }
        });
    });
});

Exp: I have multiple forms in some pages, so I need to use $(this).closest('form'); to post each form.

This is what I want to do, original function will be in scripts and included in page :

  function ajaxLoader(url) {
    var form = $(this).closest("form");
        $.ajax({
        type:"POST",
        "url" : url, 
        data:form.serialize(),
          success:function(vardata){
            var json = JSON.parse(vardata);
            if(json.status == 101){
              alert(json.msg);
              window.location.replace("/");
            } else {
              alert(json.msg);
              console.log(json.msg);
            }
        }
    });
}

And on the page I want to call it like this :

$(document).ready(function (){
  $('.submit').on("click", function(e){
      e.preventDefault(); 
      ajaxLoader("ActionPage.php", true);
  });
});

I getting undefined message on all cases when I click send button, when I move $(this).closest("form"); to second function then I get undefined form error.

I have searched on site there are similar question but none of them has usefull answer. example : this one

>Solution :

How this is scoped is based on the context of how it is called. You can change what this is with call/apply/bind. Basic example below.

function ajaxLoader(url) {
  console.log(this, url)
  var form = $(this).closest("form");
  console.log(form[0]);
}


$(document).ready(function (){
  $('.submit').on("click", function(e){
      e.preventDefault(); 
      ajaxLoader.call(this, "ActionPage.php");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="foo">
  <button class="submit">Click</button>
</form>