how do I submit jqgrid values as formfields?

Question

I am trying to use jqGrid within a form where the user fills out traditional formfields such as username, phone, etc. The form contains a jqGrid for line items where the user can add/edit/del the rows, and when done, submit the entire form. I have the grid working as I want it to appear, I just can't get the contents of the grid submitted as part of a containing form.

Here is a pseudo-code example:

<form id="foo">
<input id="username" type="text">Your name<br>
Enter your choices in the grid below:
<!-- imagine jqGrid here -->
<input type="submit" value="Submit the form"></form>

I have searched, googled, read the docs, read the wiki, etc., but just do not see how to pass jqGrid rows and columns as formfields. Any guidance would be appreciated.

Answer 1

Probably the best way to do this would be to use a hidden form field:

<input type="hidden" name="gridData" value="" />

You would then populate the field with column data prior to form submission. You could either do this by updating the field as grid data is modified, or by calling a JavaScript function when the button is pressed to submit the form (and calling form submit from within that function).

To write the grid data out to the hidden field, you could call getRowData successively on each row of the grid, and append data for each row to an array. Or perhaps there is a better way. For example, there is a new data option that might work? Anyway, once you have the grid data you can use json2.js to serialize the data to JSON format:

JSON.stringify( myGridData );

Then on the server, you can decode the JSON from this hidden field, and process it accordingly.