JS - Advice on how to merge multiple user input to one form field design

Question

I have a page that allows users to enter a lot of information about them (metadata) they can then click on a icon which opens a modal window containing a googlemap which allows them to add locations, and a title for that location.

Using mootools I can pass the value of a form field back to the original form, using onclose. The main page form then has a single hidden input field, which goes into the database as one field, serialised.

The problem is a user can add as many locations as they want, there are also 3 types of location. Each with its own set of co-ordinates, which can be single or multiple!

So I want to know the best way to handle all of this data, is it possible to load it into one form and then use Moo to submit that form to a single form field, or can I use moo to just append all the information into a single hidden input field, but if I do that, how does user input come into it. Im stumped and looking at some suggestions on how to set this up in the 'best' possible way.

Currently I have a table, and each item is added as a new row, by JS when a user clicks on the map, it creates a new row with the details about the click, item and then a user input field.

If its a single location then its added as 'placemark', a user input field for the name and then the co-ordinates go into a 3rd table cell. However if its a shape, then the first cell contains 'shape', user input field for name/description, and the third cell contains a list of co-ordinates one for each point, this is the same for lines.

The problem I have is I could write it all to a single form field, but then how do I allow for user input of the titles, I need to use a form field for that? The other option is to take each row from a table and input it into the single form field, seperated by a pipe or similar, but then im not sure if I can read from other form fields.

I hope the above makes some sense!! All feedback welcome!

Im using mootools for this, but providing I can get my head around the layout then that should not really be an issue.

Answer 1

I would suggest that you use an object to maintain all of the location data while the user is making their selections. When, when the form is submitted, serialize that data into a hidden field as a JSON object.

So, when the user clicks in the map window, you record the info in the object, in addition to the table. The populated object would 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 into a plain string suitable for saving in the DB, and when you get that string back out, you can use JSON.parse() to turn it into an object again.

As for handling the user input, you could write the table to the page just as your do now (or base it on the above object). Then when the user enters something in one of the fields, copy the value into the usersLocations object. So have an onBlur event handler on the input field that updates the data structure (something like this) :

        usersLocations.locations[0]["type"] = "<what the user typed>";

Answer 2

Hey thats a great help thanks.

But how do I incorporate user input boxes, ie the user will be able to name each type with a input box.

Any suggestions

Answer 3

are you looking for something like this?

usersLocations.locations[0]["name"] = document.getElementById("location0name").value;