Форум

galiog · #1 (**permalink**) 11.12.2016, 16:49

Здравствуйте.
При разработке клиентам сайта возникла задача сделать калькулятор ремонта, через который пользователи смогут отправлять заявки на расчет стоимости.
Смысл таков: есть раскройка автомобиля в svg, человек выбирает нужные ему части автомобиля, например кликает на капот. После этого должен создаваться элемент, например строка таблицы, у которой будет написано название детали и можно будет выбрать чекбоксами что пользователя интересует: ремонт, покраска или замена. Затем пользователь кликает на другую часть, добавляется еще одна строка. При повторном клике строка удаляется. Как лучше это реализовать? Я знаю как добавлять в дом например текст или значение переменной, но как добавить целый элемент, который будет содержать в себе название и несколько чекбоксов не совсем понимаю.
На данный момент имеется вот что: sablin-web.ru/avtocalc
И еще один момент: после того как пользователь выберет все что ему нужно, отправить всю эту информацию + данные из input с номером телефона пользователя на почту. Но как отправить данные из получившейся таблицы? Как их получить в php файле? Когда мы отправляем форму через post все понятно, но ведь эти элементы не будут являться элементами формы...
Заранее спасибо за помощь.

laimas · #2 (**permalink**) 11.12.2016, 18:10

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

galiog · #3 (**permalink**) 13.12.2016, 03:34

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript