How can I call a jQuery function AFTER a form is submitted?

How do I call a jQuery function AFTER a form is submitted?

I know how to call a function ON submit, but I want to call it after the post is submitted and details are put into the database with PHP.

I'm making a website where the user can put items into a cart. This works fine. However, AFTER a product is posted and added into the cart I want to display a popup-box displaying the cart. Hence I need the function to be called AFTER the submit has completed.

> Hence I need the function to be called AFTER the submit has completed.

You can do that from done(), for example, assuming your form and Ajax request are like this:

<form id="target" action="#">
  <input type="text" id="id" value="1">
  <input type="submit" value="Go">
</form>
$( "#target" ).on( "submit", function( event ) {
    event.preventDefault(); 
    var theId = $("input[name='id']",this).val();   
    var request = $.ajax({
      url: "script.php",
      method: "POST",
      data: { id : theId },
      dataType: "json"
    });
     
    request.done(function( serverData ) {
      showCart(serverData);
    });
     
    request.fail(function( jqXHR, textStatus ) {
      alert( "Request failed: " + textStatus );
    });
});
//....
function showCart(dataForCart) {
    //Use dataForCart if needed and show cart
}

Since Ajax requests are asynchronous by default and should be, showCart() will be called when the Ajax request has succeeded.

For more details, check the documentation.