How do I add an invisible AJAX submit on my form triggered by input field updates, while also preserving the natural submit?

Question

Greetings kind community of wise developers !! It's my first time writing and I've looked around but alas, am stuck and need some assistance. I would be very grateful to any kind souls who can help.

My form needs to do 2 things :

1) Behave like a normal form, and submit rows of Product names, unit prices and quantities, when the Submit button is pressed (this is already in place).

2) Submit the rows of Product names, unit prices, and quantities behind the scenes (jQuery? AJAX?), triggered by any change in any of the Product rows, then use the JSON response to update some display output on the bottom of the page. The JSON response comes from the server. This "action" URL is different that that in (1).

I just need to know how to set up the bindings or ready function(s) or listener(s) or whatever you kids call them these days, to make this work.

Any help would be GREATLY appreciated and would save me from the huge black sinking pit I am struggling in right now.

Thank you !!

Cheers,

Gene

Answer 1

This should be easy to do, but I see one big problem: Submitting the form the normal way leads to the page being unloaded. Any AJAX request issued at the same time could not have got through yet, you have no way to tell.

Plus, when the form is submitted normally, there will be no bottom of the page left to display anything, as you are already underway to the next page.

Is there any way you can stay on the same page for both actions? You could do the normal submission into an invisible IFRAME for example, if you don't want to Ajaxify it.

Answer 2

I would submit the data first via AJAX then the normal form submit. Something like this in jQuery:

<form method="POST" action="action.php" id="myform">
 <input type="text" name="product_name" value="" />
 ... Other form elements ...
 <input type="submit" id="submit_button" value="Submit" />
</form>

<script>
 $('#myform').submit(function() {
  // Disable the submit button.
  $('#submit_button').attr('disabled', 'disabled');
  var data = new Array();
  ... Iterate form values to submit to secondary action and add to data ...
  // action2.php also accepts form data, encoded as JSON, XML, etc.
  $.post('action2.php', data, function() {
   // Submit the form _for real_ in the callback function.
   $('#myform').submit();
  });
  return false;  // prevents normal form submission
 });
</script>

This gives the rough idea of what would be required. Showing a 'loading' animation during the submit to action2.php would be a good idea.

Answer 3

This function below can be called by the onChange() trigger of the input fields in the form.

<script> 

    function update_subtotals_display () {

     $.post(
      'update_subtotals_display_action_page.php', // alt action target
      $('#form').children(),  // sends over the form's inputs
      function(result) { // what to do with the result from the target output
       alert(result); // rest of it needs to be fleshed out here
      }
     );

    }

</script>