Честно говоря много сам пользовался материалами с этого ресурса и как правило находил нужную информацию, но в этот раз я в тупике, причем даже сформулировать четко что мне нужно не могу, поэтому поиск ничего не дал.
В связи с чем решил таки зарегистрироваться тут и очень надеюсь на вашу помощь!
Собственно проблема вот в чем, попался мне сегодня сайт где требуется настроить обработчики для приема заявок с форм, все там вроде понятно но вот один блок имеет такой вид
https://i[dot]imgur[dot]com/55pokfT[dot]png
где идет несколько видов утеплителя которые можно одновременно выбрать
https://i[dot]imgur[dot]com/yFlzYOm[dot]png
И вот тут-то самые главные танцы с бубном и начинаются для меня
Вот html код этого блока
CODE (html):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <section class="__6" id="__6">
- <div class="inner">
- <h3 class="title_h3">Утеплитель</h3>
- <div class="calculate">
- <div class="tabs">
- <div class="tab" id="tab-4">
- <div class="size">
- <!--<div class="items">
- <h3>Укажите толщину утеплителя:</h3>
- <input type="radio" id="c4-size-s50" name="c4-size" data-size="50" checked />
- <label for="c4-size-s50" >50 мм</label>
- <input type="radio" id="c4-size-s100" name="c4-size" data-size="100" />
- <label for="c4-size-s100" >100 мм</label>
- <input type="radio" id="c4-size-s150" name="c4-size" data-size="150" />
- <label for="c4-size-s150" >150 мм</label>
- <input type="radio" id="c4-size-s200" name="c4-size" data-size="200" />
- <label for="c4-size-s200" >200 мм</label>
- </div>-->
- <div class="area">
- <div class="text"></div>
- </div>
- </div>
- <div class="colums">
- <div class="left" data-column="1">
- <h3 class="c4-title" data-id="1">Кнауф для кровли</h3>
- <div class="area">
- </div>
- <img src="img/calc/calc4/krauf_krov.jpg" alt="..." class="c4-view">
- <div class="use">
- <h4>Используется для</h4>
- <div class="use__items">
- <ul>
- <!--<li id="c4-bottom">
- <div class="title">
- пола
- </div>
- </li>-->
- <li id="c4-wall">
- <div class="title">
- стальной <br>кровли
- </div>
- </li>
- <li id="c4-roof">
- <div class="title">
-
- </div>
- </li>
- </ul>
- </div>
- </div>
- <div class="clear"></div>
- <div class="tech">
- <div class="tech-items" id="c4-tech-u1">
- <ul>
- <li>
- <em>Длина</em>
- <span id="c4-tech-u1-t1">6148 мм</span>
- </li>
- <li>
- <em>Ширина</em>
- <span id="c4-tech-u1-t2">1220 мм</span>
- </li>
- <li>
- <em>Толщина</em>
- <span id="c4-tech-u1-t3">50 мм</span>
- </li>
- <li>
- <em>Площадь в 1 упаковке</em>
- <span data-square="heater-1">15 м<sup>2</sup></span>
- </li>
- <li>
- <em>Объем в 1 упаковке</em>
- <span>0.75 м<sup>3</sup></span>
- </li>
- </ul>
- </div>
- <div class="clear"></div>
- </div>
- <div class="price">
- <div class="price-items" id="c4-price-u1">
- <ul>
- <li>
- <em>Цена за 1 м<sup>2</sup></em>
- <span id="c4-price-u1-p1" data-price="c4-u1">115 <span class="rub">₽</span></span>
- </li>
- <li>
- <em>Цена за упаковку</em>
- <!--<span id="c4-price-u1-p2" data-price="heater-1">1025 <span class="rub">₽</span></span>-->
- <span id="c4-price-u1-p2" data-price="heater-1">1723<span class="rub">₽</span></span>
- </li>
- </ul>
- </div>
- <div class="clear"></div>
- </div>
- <div class="counter2" data-counter="heater-1">
- <h3 class="counter__title">Количество упаковок:</h3>
- <span class="minus" data-btn="minus" data-id="c4-u1"></span>
- <input type="text" id="c4-u1-input-counter" name="input-counter" maxlength="4" class="c4-meters" value="0">
- <span class="plus" data-btn="plus" data-id="c4-u1"></span>
- </div>
- <div class="order">
- <div class="summ">
- <span class="total" id="c4-total">
- Итого
- </span>
- <span class="summa" id="c4-summa-u1" data-id="c4-u1" data-priceoutput="heater-1">0 <span class="rub">₽</span></span>
- </div>
- </div>
- </div>
- <div class="middle" data-column="2">
- <h3 class="c4-title" data-id="2"> Кнауф для перекрытий</h3>
- <div class="area">
- </div>
- <img src="img/calc/calc4/krauf_perekr.jpg" alt="..." class="c4-view">
- <div class="use">
- <h4>Используется для</h4>
- <div class="use__items">
- <ul>
- <li id="c4-bottom">
- <div class="title">
- пола
- </div>
- </li>
- <li id="c4-wall">
- <div class="title">
- межэтажных<br> перекрытий
- </div>
- </li>
- <!--<li id="c4-roof">
- <div class="title">
- кровли
- </div>
- </li>-->
- </ul>
- </div>
- </div>
- <div class="clear"></div>
- <div class="tech">
- <div class="tech-items" id="c4-tech-u2">
- <ul>
- <li>
- <em>Длина</em>
- <span id="c4-tech-u2-t1">7380 мм</span>
- </li>
- <li>
- <em>Ширина</em>
- <span id="c4-tech-u2-t2">1220 мм</span>
- </li>
- <li>
- <em>Толщина</em>
- <span id="c4-tech-u2-t3">50 мм</span>
- </li>
- <li>
- <em>Площадь в 1 упаковке</em>
- <span data-square="heater-2">18 м<sup>2</sup></span>
- </li>
- <li>
- <em>Объем в 1 упаковке</em>
- <span>0.9 м<sup>3</sup></span>
- </li>
- </ul>
- </div>
- <div class="clear"></div>
- </div>
- <div class="price">
- <div class="price-items" id="c4-price-u2">
- <ul>
- <li>
- <em>Цена за 1 м<sup>2</sup></em>
- <span id="c4-price-u2-p1" data-price="c4-u2">93 <span class="rub">₽</span></span>
- </li>
- <li>
- <em>Цена за упаковку</em>
- <!--<span id="c4-price-u2-p2" data-price="heater-2">1129 <span class="rub">₽</span></span>-->
- <span id="c4-price-u2-p2" data-price="heater-2">1674<span class="rub">₽</span></span>
- </li>
- </ul>
- </div>
- <div class="clear"></div>
- </div>
- <div class="counter2" data-counter="heater-2">
- <h3 class="counter__title">Количество упаковок:</h3>
- <span class="minus" data-btn="minus" data-id="c4-u2"></span>
- <input type="text" id="c4-u2-input-counter" name="input-counter" maxlength="4" class="c4-meters" value="0">
- <span class="plus" data-btn="plus" data-id="c4-u2"></span>
- </div>
- <div class="order">
- <div class="summ">
- <span class="total" id="c4-total">
- Итого
- </span>
- <span class="summa" id="c4-summa-u2" data-id="c4-u2" data-priceoutput="heater-2">0 <span class="rub">₽</span></span>
- </div>
- </div>
- </div>
- <div class="right" data-column="3">
- <h3 class="c4-title" data-id="3">Кнауф акустик</h3>
- <div class="area">
- </div>
- <img src="img/calc/calc4/krauf_akustic.png" alt="..." class="c4-view">
- <div class="use">
- <h4>Используется для</h4>
- <div class="use__items">
- <ul>
- <li id="c4-bottom">
- <div class="title">
- пола
- </div>
- </li>
- <li id="c4-wall">
- <div class="title">
- стен
- </div>
- </li>
- <li id="c4-roof">
- <div class="title">
- кровли
- </div>
- </li>
- </ul>
- </div>
- </div>
- <div class="clear"></div>
- <div class="tech">
- <div class="tech-items" id="c4-tech-u3">
- <ul>
- <li>
- <em>Длина</em>
- <span id="c4-tech-u3-t1">1230 мм</span>
- </li>
- <li>
- <em>Ширина</em>
- <span id="c4-tech-u3-t2">610 мм</span>
- </li>
- <li>
- <em>Толщина</em>
- <span id="c4-tech-u3-t3">50 мм</span>
- </li>
- <li>
- <em>Площадь в 1 упаковке</em>
- <span data-square="heater-3">12 м<sup>2</sup></span>
- </li>
- <li>
- <em>Объем в 1 упаковке</em>
- <span>0.6 м<sup>3</sup></span>
- </li>
- </ul>
- </div>
- <div class="clear"></div>
- </div>
- <div class="price">
- <div class="price-items" id="c4-price-u3">
- <ul>
- <li>
- <em>Цена за 1 м<sup>2</sup></em>
- <span id="c4-price-u3-p1" data-price="c4-u3">118 <span class="rub">₽</span></span>
- </li>
- <li>
- <em>Цена за упаковку</em>
- <!--<span id="c4-price-u3-p2" data-price-s50="1425" data-price="heater-3">1335 <span class="rub">₽</span></span>-->
- <span id="c4-price-u3-p2" data-price-s50="1170" data-price="heater-3">1421<span class="rub">₽</span></span>
- </li>
- </ul>
- </div>
- <div class="clear"></div>
- </div>
- <div class="counter2" data-counter="heater-3">
- <h3 class="counter__title">Количество упаковок:</h3>
- <span class="minus" data-btn="minus" data-id="c4-u3"></span>
- <input type="text" id="c4-u3-input-counter" name="input-counter" maxlength="4" class="c4-meters" value="0">
- <span class="plus" data-btn="plus" data-id="c4-u3"></span>
- </div>
- <div class="order">
- <div class="summ">
- <span class="total" id="c4-total">
- Итого
- </span>
- <span class="summa" id="c4-summa-u3" data-id="c4-u3" data-priceoutput="heater-3">0 <span class="rub">₽</span></span>
- </div>
- </div>
- </div>
- <div class="righter" data-column="4">
- <h3 class="c4-title" data-id="3">Кнауф экоролл</h3>
- <div class="area">
- </div>
- <img src="img/calc/calc4/krauf_rulon.jpg" alt="..." class="c4-view">
- <div class="use">
- <h4>Используется для</h4>
- <div class="use__items">
- <ul>
- <li id="c4-bottom">
- <div class="title">
- пола
- </div>
- </li>
- <li id="c4-wall">
- <div class="title">
- стен
- </div>
- </li>
- <li id="c4-roof">
- <div class="title">
- кровли
- </div>
- </li>
- </ul>
- </div>
- </div>
- <div class="clear"></div>
- <div class="tech">
- <div class="tech-items" id="c4-tech-u3">
- <ul>
- <li>
- <em>Длина</em>
- <span id="c4-tech-u3-t1">8200 мм</span>
- </li>
- <li>
- <em>Ширина</em>
- <span id="c4-tech-u3-t2">1220 мм</span>
- </li>
- <li>
- <em>Толщина</em>
- <span id="c4-tech-u3-t3">50 мм</span>
- </li>
- <li>
- <em>Площадь в 1 упаковке</em>
- <span data-square="heater-4">20 м<sup>2</sup></span>
- </li>
- <li>
- <em>Объем в 1 упаковке</em>
- <span>1 м<sup>3</sup></span>
- </li>
- </ul>
- </div>
- <div class="clear"></div>
- </div>
- <div class="price">
- <div class="price-items" id="c4-price-u3">
- <ul>
- <li>
- <em>Цена за 1 м<sup>2</sup></em>
- <span id="c4-price-u3-p1" data-price="c4-u3">82 <span class="rub">₽</span></span>
- </li>
- <li>
- <em>Цена за упаковку</em>
- <!--<span id="c4-price-u3-p2" data-price-s50="1425" data-price="heater-4">1250 <span class="rub">₽</span></span>-->
- <span id="c4-price-u3-p2" data-price-s50="1300" data-price="heater-4">1639<span class="rub">₽</span></span>
- </li>
- </ul>
- </div>
- <div class="clear"></div>
- </div>
- <div class="counter2" data-counter="heater-4">
- <h3 class="counter__title">Количество упаковок:</h3>
- <span class="minus" data-btn="minus" data-id="c4-u4"></span>
- <input type="text" id="c4-u4-input-counter" name="input-counter" maxlength="4" class="c4-meters" value="0">
- <span class="plus" data-btn="plus" data-id="c4-u4"></span>
- </div>
- <div class="order">
- <div class="summ">
- <span class="total" id="c4-total">
- Итого
- </span>
- <span class="summa" id="c4-summa-u3" data-id="c4-u3" data-priceoutput="heater-4">0 <span class="rub">₽</span></span>
- </div>
- </div>
- </div>
- <div class="therightest" data-column="5">
- <h3 class="c4-title" data-id="3">Техноблок стандарт</h3>
- <div class="area">
- </div>
- <img src="img/calc/calc4/005.jpg" alt="..." class="c4-view">
- <div class="use">
- <h4>Используется для</h4>
- <div class="use__items">
- <ul>
- <li id="c4-bottom">
- <div class="title">
- пола
- </div>
- </li>
- <li id="c4-wall">
- <div class="title">
- стен
- </div>
- </li>
- <li id="c4-roof">
- <div class="title">
- кровли
- </div>
- </li>
- </ul>
- </div>
- </div>
- <div class="clear"></div>
- <div class="tech">
- <div class="tech-items" id="c4-tech-u3">
- <ul>
- <li>
- <em>Длина</em>
- <span id="c4-tech-u3-t1">1200 мм</span>
- </li>
- <li>
- <em>Ширина</em>
- <span id="c4-tech-u3-t2">600 мм</span>
- </li>
- <li>
- <em>Толщина</em>
- <span id="c4-tech-u3-t3">50 мм</span>
- </li>
- <li>
- <em>Площадь в 1 упаковке</em>
- <span data-square="heater-5">5.76 м<sup>2</sup></span>
- </li>
- <li>
- <em>Объем в 1 упаковке</em>
- <span>0.288 м<sup>3</sup></span>
- </li>
- </ul>
- </div>
- <div class="clear"></div>
- </div>
- <div class="price">
- <div class="price-items" id="c4-price-u3">
- <ul>
- <li>
- <em>Цена за 1 м<sup>2</sup></em>
- <span id="c4-price-u3-p1" data-price="c4-u3">133 <span class="rub">₽</span></span>
- </li>
- <li>
- <em>Цена за упаковку</em>
- <span id="c4-price-u3-p2" data-price-s50="169" data-price="heater-5">769 <span class="rub">₽</span></span>
- </li>
- </ul>
- </div>
- <div class="clear"></div>
- </div>
- <div class="counter2" data-counter="heater-5">
- <h3 class="counter__title">Количество упаковок:</h3>
- <span class="minus" data-btn="minus" data-id="c4-u5"></span>
- <input type="text" id="c4-u5-input-counter" name="input-counter" maxlength="4" class="c4-meters" value="0">
- <span class="plus" data-btn="plus" data-id="c4-u5"></span>
- </div>
- <div class="order">
- <div class="summ">
- <span class="total" id="c4-total">
- Итого
- </span>
- <span class="summa" id="c4-summa-u3" data-id="c4-u3" data-priceoutput="heater-5">0 <span class="rub">₽</span></span>
- </div>
- </div>
- </div>
- <div class="clear"></div>
- <div class="btn-wrapper">
- <a href="#c4-order-form" class="fancybox send-order btn-order" id="c4-order-send-id3" data-id="3" data-order="heater">Заказать</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>