Добавление элементов в dom по клику на SVG
Здравствуйте.
При разработке клиентам сайта возникла задача сделать калькулятор ремонта, через который пользователи смогут отправлять заявки на расчет стоимости. Смысл таков: есть раскройка автомобиля в svg, человек выбирает нужные ему части автомобиля, например кликает на капот. После этого должен создаваться элемент, например строка таблицы, у которой будет написано название детали и можно будет выбрать чекбоксами что пользователя интересует: ремонт, покраска или замена. Затем пользователь кликает на другую часть, добавляется еще одна строка. При повторном клике строка удаляется. Как лучше это реализовать? Я знаю как добавлять в дом например текст или значение переменной, но как добавить целый элемент, который будет содержать в себе название и несколько чекбоксов не совсем понимаю. На данный момент имеется вот что: sablin-web.ru/avtocalc И еще один момент: после того как пользователь выберет все что ему нужно, отправить всю эту информацию + данные из input с номером телефона пользователя на почту. Но как отправить данные из получившейся таблицы? Как их получить в php файле? Когда мы отправляем форму через post все понятно, но ведь эти элементы не будут являться элементами формы... Заранее спасибо за помощь. |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var data = {};
$(function() {
$("path").on("click", function(){
var area = $(this),
fill = parseInt(area.attr('fill').replace(/#/, ''), 16),
chk, frm = $('form').empty();
area.attr('fill', '#'+(fill ^ 65535).toString(16));
chk = $('path').filter('[fill="#ff0000"]');
$('span').text(chk.length);
if(chk.length) {
$.each(chk, function() {
frm.append('<input type="checkbox" name="'+this.parentNode.id+'" checked disabled>')
})
frm.append('<input type="submit" value="Отправить">')
}
});
});
</script>
</head>
<body>
<div>
<svg version="1.1" id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 480 640" enable-background="new 0 0 480 640" xml:space="preserve">...</svg>
</div>
Выбрано: <span></span>
<form>
</form>
</body>
</html>
|
Спасибо!
|
| Часовой пояс GMT +3, время: 16:13. |