JS - Советы о том, как объединить ввод нескольких пользователей в один дизайн поля формы

Question

У меня есть страница, которая позволяет пользователям вводить много информации о них (метаданные), после чего они могут щелкнуть значок, который открывает модальное окно, содержащее карту Google, которая позволяет им добавлять местоположения и заголовок для этого местоположения.

Используя mootools, я могу передать значение поля формы обратно в исходную форму, используя onclose. Форма главной страницы имеет единственное скрытое поле ввода, которое сериализуется в базу данных как одно поле.

Проблема в том, что пользователь может добавить столько мест, сколько он хочет, также есть 3 типа мест. Каждая со своим набором координат, который может быть одним или несколькими!

Итак, я хочу знать, как лучше всего обрабатывать все эти данные, можно ли загрузить их в одну форму и затем использовать Moo, чтобы отправить эту форму в одно поле формы, или я могу использовать moo, чтобы просто добавить все информация в едином скрытом поле ввода, но если я это сделаю, как пользователь вводит в него. Я озадачен и смотрю на некоторые предложения о том, как настроить это «наилучшим» способом.

В настоящее время у меня есть таблица, и каждый элемент добавляется в виде новой строки с помощью JS, когда пользователь нажимает на карту, он создает новую строку с подробной информацией о щелчке, элементе, а затем поле ввода пользователя.

Если это единственное местоположение, то оно добавляется как «метка», поле ввода пользователя для имени, а затем координаты помещаются в ячейку 3-ей таблицы. Однако если это форма, то первая ячейка содержит «фигуру», поле ввода пользователя для имени / описания, а третья ячейка содержит список координат, по одному для каждой точки, то же самое для линий.

Проблема, с которой я столкнулся, заключается в том, что я могу записать все это в одно поле формы, но тогда как мне разрешить ввод заголовков пользователем, мне нужно использовать поле формы для этого? Другой вариант - взять каждую строку из таблицы и ввести ее в одно поле формы, разделенное каналом или аналогичным, но затем я не уверен, что смогу читать из других полей формы.

Надеюсь, вышесказанное имеет какой-то смысл !! Все отзывы приветствуются!

Я использую mootools для этого, но при условии, что я смогу разобраться с макетом, тогда это не должно быть проблемой.

Answer 1

Я бы посоветовал вам использовать объект для ведения всех данных о местоположении, пока пользователь выбирает их. Когда при отправке формы эти данные сериализуются в скрытое поле как объект JSON.

Итак, когда пользователь щелкает в окне карты, вы записываете информацию в объект, в дополнение к таблице. Заполненный объект будет выглядеть так:

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 может иметь некоторые методы JSON, но если нет, посмотрите на http://www.json.org/js.html для рабочего кода. Вы можете использовать JSON.stringify (), чтобы преобразовать объект в простую строку, подходящую для сохранения в БД, и когда вы получите эту строку обратно, вы можете использовать JSON.parse (), чтобы снова превратить ее в объект. *

Что касается обработки пользовательского ввода, вы можете записать таблицу на страницу так же, как вы делаете сейчас (или основать ее на вышеуказанном объекте). Затем, когда пользователь вводит что-то в одно из полей, скопируйте значение в объект usersLocations. Поэтому в поле ввода есть обработчик события onBlur, который обновляет структуру данных (что-то вроде этого):

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

Answer 2

вы ищете что-то подобное?

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