JS - advice on how to combine multiple user inputs into one kind of form field
I have a page that allows users to enter a lot of information about them (metadata), after which they can click an icon that opens a mod window containing a google map that allows them to add locations and a title for that location.
Using mootools I can pass the value of the form field to the original form using onclose. The master page form then has one hidden input field that enters the database as one field, serialized.
The problem is that the user can add as many locations as they want, there are also 3 types of location. Each with its own set of coordinates, which can be one or more!
So, I want to know how best to handle all this data, is it possible to upload it into one form and then use Moo to submit that form in one form field, or can I use moo to just add all the information to one hidden input field but if I do that, how does user input enter. I'm stumped and looking at some suggestions on how to set this up in the "best" way possible.
I currently have a table and each item is added as a new row, JS when the user clicks on the card creates a new row with information about the click, the item and then the user input field.
If its one place, then it is added as "label", user input field for name and then coordinates go into cell of 3rd table. However, if its a shape, then the first cell contains a "shape", a user input field for name / description, and the third cell contains a list of coordinates, one for each point, this is the same for strings.
The problem is that I can write it all in one form field, but how can I let the user enter titles, I need to use a form field for that? Another option is to take each row from the table and enter it in one form field separated by a pipe or similar, but then I'm not sure if I can read from the other form fields.
I hope this makes sense! All feedback is appreciated!
I use mootools to do this, but providing so I can see the layout then it shouldn't be a problem.
source to share
I would assume that you are using an object to store all location data when the user makes their selection. When when the form is submitted, serialize this data into a hidden field as a JSON object.
So, when the user clicks a button in the map window, you write information to the object in addition to the table. The populated object will look like this:
var usersLocations = {"locations": [
{"type": "point", "coords": [100,200]},
{"type": "line", "coords": [[200,300],[400,500]]},
{"type": "shape", "coords": [[200,300],[400,500],[1000,1500]]}
]
};
Mootools may have some JSON methods, but if not, look at http://www.json.org/js.html for working code. You can use JSON.stringify () to convert the object to a regular string suitable for storing in the DB, and when you get that string, you can use JSON.parse () to include it back into the object.
As far as handling user input, you can write the table on the page just like you do now (or base it on the above object). Then, when the user enters something into one of the fields, copy that value into the usersLocations object. So, the onBlur event handler on the input field that updates the data structure (something like this):
usersLocations.locations[0]["type"] = "<what the user typed>";
source to share