Modify POST vars before post, using jQuery

Question

I have a form, and a submit handler in jQuery.

When the user submits the form, I want to modify (add) some parameters to the POST request, before it is despatched fr

Answer 1

Attach a submit() handler to the form.

$('form#myForm').submit(myPostHandlingFunction);

Then submit/ do the post from your function. The easiest thing would be to just populate a couple of hidden inputs in the form and then return true to allow the submit to happen if everything looks right.

Answer 2

High Level View:
When a form is submitted natively, it is the very last operation a browser performs, and it is executed outside of the scope of the rendering engine/javascript interpreter.

Any attempts of intercepting the actual POST or GET request via JavaScript is impossible as this traditional web request occurs exclusively between the Browser Engine and the Networking Subsystem.

Modern Solution:
It is becoming more popular for web developers to submit form data using XMLHttpRequest -- a web browser API that allows the JavaScript intepreter to access the browser networking subsystem.
This is commonly referred to as Ajax

A simple but common use of this would look something like:

/**
 * Function is responsible for gathering the form input data, 
 * adding additional values to the list, and POSTing it to the
 * server via Ajax.
 */
function processForm() {
  //Retreive the data from the form:
  var data = $('#myForm').serializeArray();

  //Add in additional data to the original form data:
  data.push({
    name: 'age',
    value: 25
  }, {
    name: 'sex',
    value: 'M'
  }, {
    name: 'weight',
    value: 200
  });

  //Submit the form via Ajax POST request:
  $.ajax({
    type: 'POST',
    url: 'myFormProcessor.php',
    data: data,
    dataType: 'json'
  }).done(function(data) {
    //The code below is executed asynchronously, 
    //meaning that it does not execute until the
    //Ajax request has finished, and the response has been loaded.
    //This code may, and probably will, load *after* any code that
    //that is defined outside of it.
    alert("Thanks for the submission!");
    console.log("Response Data" + data); //Log the server response to console
  });
  alert("Does this alert appear first or second?");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form id="myForm" onsubmit="processForm()">
  <input type="text" name="first_name" />
  <input type="text" name="last_name" />
  <input type="submit" value="Submit">
</form>

Native Approach: Before the existence of XMLHttpRequest, one solution would be to simply append any additional form data directly to the document.

Using the same form posted as above, a jQuery append method could look like:

function processForm() {
  $('<input>').attr('type', 'hidden').attr('name', 'age').attr('value', 25).appendTo('#myForm');
  $('<input>').attr('type', 'hidden').attr('name', 'sex').attr('value', 'M').appendTo('#myForm');
  $('<input>').attr('type', 'hidden').attr('name', 'weight').attr('value', 200).appendTo('#myForm');

  return true; //Submit the form now 
  //Alternatively you can return false to NOT submit the form.
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form action="myFormProcessor.php" method="POST" id="myForm" onsubmit="return processForm()">
  <input type="text" name="first_name" />
  <input type="text" name="last_name" />
  <input type="submit" value="Submit">
</form>