Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.12.2016, 15:49
Интересующийся
Отправить личное сообщение для galiog Посмотреть профиль Найти все сообщения от galiog
 
Регистрация: 28.04.2016
Сообщений: 17

Добавление элементов в dom по клику на SVG
Здравствуйте.
При разработке клиентам сайта возникла задача сделать калькулятор ремонта, через который пользователи смогут отправлять заявки на расчет стоимости.
Смысл таков: есть раскройка автомобиля в svg, человек выбирает нужные ему части автомобиля, например кликает на капот. После этого должен создаваться элемент, например строка таблицы, у которой будет написано название детали и можно будет выбрать чекбоксами что пользователя интересует: ремонт, покраска или замена. Затем пользователь кликает на другую часть, добавляется еще одна строка. При повторном клике строка удаляется. Как лучше это реализовать? Я знаю как добавлять в дом например текст или значение переменной, но как добавить целый элемент, который будет содержать в себе название и несколько чекбоксов не совсем понимаю.
На данный момент имеется вот что: sablin-web.ru/avtocalc
И еще один момент: после того как пользователь выберет все что ему нужно, отправить всю эту информацию + данные из input с номером телефона пользователя на почту. Но как отправить данные из получившейся таблицы? Как их получить в php файле? Когда мы отправляем форму через post все понятно, но ведь эти элементы не будут являться элементами формы...
Заранее спасибо за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 11.12.2016, 17:10
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

<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>

Последний раз редактировалось laimas, 11.12.2016 в 17:43.
Ответить с цитированием
  #3 (permalink)  
Старый 13.12.2016, 02:34
Интересующийся
Отправить личное сообщение для galiog Посмотреть профиль Найти все сообщения от galiog
 
Регистрация: 28.04.2016
Сообщений: 17

Спасибо!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Удаление событий при удалении DOM элементов nextdrift Events/DOM/Window 4 23.11.2015 00:07
JavaScript/jQuery сортировка элементов DOM onotole Events/DOM/Window 13 26.02.2015 11:54
быстрая отрисовка элементов JS (DOM) Brook Events/DOM/Window 2 17.07.2014 23:53
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 10:33
Добавление элемента в SVG jazzz13 Events/DOM/Window 3 22.12.2011 09:09