Form values in a list item

Question

Here is the site mock-up I'm working on for my job: http://dev.arm.gov/~noensie/dqhands/cgi-bin/explorer. I'm still a novice in web developing and I need help with placing form values in a list item to pass on to another page.

I'd rather not go in great detail the purpose of this website, but in terms of its basic use, select the parameters in the middle column for a request and add it to the list on the right column by pressing on "add request" button when it appears. After the list have been populated, a user would submit the selected requests, which will direct them to another page based on the requests selected (or added to the list, same thing).

That last sentence is where I'm having a problem. Right now, each of request in the list in the right column are <li> elements and I assign them attribute values that needed to be passed on to the next page. I tried inserting a hidden input with same values, but I'm still not sure how to utilize that; I'm not even sure using the hidden input is the correct way.

Also the "submit request" button is located outside the <form> block. I was going to utilize javascript and jQuery to enable the button to serialize the values in the <form> block, but I don't know quite how to do that.

Go ahead and take a look at my javascript code (index.js) and slay me, or, I mean, my code. It's still pretty elementary and short (~260 lines, that's short right?). I will take any help for this problem (as the matter of fact, if you see any other problems or a better way of implementation of something, go ahead and mention that too); tips, advice, code samples, or whatever else you can contribute, it will be greatly appreciated.

Tri

EDIT: I am using python as the server-side language

Answer 1

You should use hidden input fields.

It depends on what server side language you fancy using, but I'd go for the following naming scheme for your hidden fields:

request[][site]
request[][datastream]
request[][facility]
request[][date]

The "[]" notation places the data in an array (for PHP at least). The posted data could therefore be iterated as follows:

foreach($_POST as $request) {
    $theSiteForThisRequest = $request["site"];
    $theDatastreamForThisRequest = $request["datastream"];
    $theFacilityForThisRequest = $request["site"];
    $theDateForThisRequest = $request["date"];
}

Try and get the submit button inside the <form> if you can, but if not you can do the following:

$('#yourSubmitButton').bind('click', function () {
    $('#yourForm').submit();
});