Append JSON data to POST request

Question

I have an AJAX form that submits correctly and that sends a complete model into the controller. What I want is to add a JSON to be sent with the Request. I have managed to intercept the POST like this:

$(document).ready(function() {
    $("form").submit(function(e) {
        if (e.originalEvent.explicitOriginalTarget.id == "submit") {
        }
    });

What I don't know is how to send my JSON data, while also keeping the data sent initially on the form submission. I had a thought at adding a hidden field, setting its value to the JSON string and then de-serializing it on the server, but that seems rather wrong.

Answer 1

If you cannot use AJAX, you will have to use a hidden field to store the JSON data inside the form. Otherwise your JSON will never be sent to the server. The HTML specification clearly states the rules: only the values contained in input fields inside the form are sent to the server when this form is submitted.

Answer 2

Feel free to use jQuery my function:

$.fn.addHiddenInputData = function(data) {          
      var keys = {};          
      var addData = function(data, prefix) {          
          for(var key in data) {
              var value = data[key];
              if(!prefix) {
                var nprefix = key;                                            
              }else{
                var nprefix = prefix + '['+key+']';
              }
              if(typeof(value) == 'object') {                                    
                  addData(value, nprefix);
                  continue;
              }
              keys[nprefix] = value;
          }          
      }          
      addData(data);          
      var $form = $(this);      
      for(var k in keys) {
          $form.addHiddenInput(k, keys[k]);
      }

}
$.fn.addHiddenInput = function(key, value) {      
      var $input = $('<input type="hidden" name="'+key+'" />')
      $input.val(value);
      $(this).append($input);

}

Usage:

// click event is fired before submit event
$('#form input[type="submit"]').click(function(){

  // add some JSON data before submit
  $('#form').addHiddenInputData({
    'foo': 123,
    'bar': 456,
    'foo2': {
      'bar': 123
    }
  });
});

No need to use ajax.