Use jQuery to attach JSON to a form and submit it

Question

Given this empty form, how would I use jQuery to attach a JSON object as params and then submit it? The form should standard submit, not AJAX.

<form action="/comments" method="post" id="comments_form">
  <submit>Post</submit>
</form>

Answer 1

Assuming your JSON object is the myData variable (and you make JSON.stringify available):

$('#comment_form').submit(function() {
    var $hidden = $("<input type='hidden' name='myData'/>");
    $hidden.val(JSON.stringify(myData));
    $(this).append($hidden);
    return true;
});

The above code creates a hidden form input on the fly and gives its value the string representation of your JSON object, then appends it to the form right before submission.