Question

I have a form on a page that is for the most part straight html. One part of the form generates a fairly complex multidimensional object using javascript.
Normally if I had a variable that I wanted to put into the POST request I would append a <input type="hidden" /> to the form, however if I try this by serializing the object as json, the json query is littered with inverted commas which corrupt the html of the form.

ie

<input type="hidden" name="test" value="[{"fruit":"orange", "vege":"carrot"}, {"vehicle":"bike"}]"/>

is not valid html.

I guess it is possible to escape every character and stripslashes server-side though this seems incredibly messy. Visually there is no reason to insert the data into the html. I would rather a way to append to the POST data before the form is submitted using just javascript/jQuery.

This is trivial were I submitting the form with ajax, however for various reasons the form should forward to the processing page.

Answer 1

The simplest thing to do would be to use single quotes around the value attribute, and double quotes in the JSON:

<input type="hidden" name="test" value='[{"fruit":"orange", "vege":"carrot"},     {"vehicle":"bike"}]' />

Alternatively you could do the opposite:

<input type="hidden" name="test" value="[{'fruit':'orange', 'vege':'carrot'},     {'vehicle':'bike'}]" />

However, if you use the second approach on the server side you’d have to replace the single quotes with double quotes in order for it to be valid JSON.