Блокнот-форма

аналог корзины для сайта с мебелью

by Denis Tverdokhlebov

HTML

<div id="content_box" class="content_box_style">
  <form>
    <div id="interest_box_h">
      <p class='interest_item_h'>Вы ни чего еще не добавили.</p>
    </div>
    <div id="interest_box"></div>
    <div id="hide_send">
      <!-- Hidden Required Fields -->
      <input type="hidden" name="project_name" value="адрес сайта">
      <input type="hidden" name="admin_email" value="куда отправим">
      <input type="hidden" name="form_subject" value="Заголовок письма">
      <!-- END Hidden Required Fields -->
    </div>
    <div class="tel_body">
      <input id="form_call_back" class="hide_btn" type="text" name="Телефон" placeholder="Введите ваш телефон" required>
    </div>
    <div id="btn_box" class="form_send_checked_btn">
      <button id="btn_rdy" class="send_btn_form hide_btn">Заказать консультацию</button>
    </div>
  </form>
</div>

<div data-link="www.demo1.ru" data-check="clicked_elem" data-name-position="Кола" class="positions_btn">
  добавить элемент в бокс
</div>

<div data-link="www.demo2.ru" data-check="clicked_elem" data-name-position="Фанта" class="positions_btn">
  добавить элемент в бокс
</div>

<div data-link="www.demo3.ru" data-check="clicked_elem" data-name-position="Спрайт" class="positions_btn">
  добавить элемент в бокс
</div>

CSS

#content_box {
  background-color: #dddddd;
  padding: 20px 30px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.positions_btn {
  padding: 20px 30px;
  border-radius: 10px;
  background-color: green;
  color: #ffffff;
  cursor: pointer;
  margin-bottom: 20px;
}

p.interest_item {
  border: 1px solid #ededed;
  padding: 10px 20px;
}

button#btn_rdy {
  border: none;
  background-color: green;
  color: #ffffff;
  padding: 10px 40px;
  border-radius: 5px;
}

p.interest_item_h {
  font-size: 18px;
  padding: 20px 0;
  margin: 0;
  text-align: center;
}

.item_this_body a {
  font-size: 18px;
  color: #000000;
  text-decoration: none;
}

.form_send_checked_btn {
  text-align: center;
}

.clear {
  clear: both;
}

.item_this_body {
  width: 89%;
  float: left;
}

.dell_this_body {
  width: 10%;
  float: right;
}

p.dell_this {
  font-size: 20px;
  background-color: darkmagenta;
  text-align: center;
  padding: 10px 5px;
  margin: 18px 0;
  color: #FFFFFF;
  cursor: pointer;
  border-radius: 5px;
}

.form_send_checked_btn button#btn_rdy {
  cursor: pointer;
  width: 275px;
}

.hide_btn {
  display: none;
}

.vis_btn {
  display: block;
  margin: 15px auto;
  text-align: center;
}

input#form_call_back {
  padding: 10px 10px;
  width: 250px;
  margin: 0 auto;
  border-radius: 5px;
  border: 1px solid grey;
}

.tel_body {
  width: 100%;
  text-align: center;
  margin: 10px 0 5px 0;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  background-color: #ffffff;
  outline: none;
}

JavaScript

$(function() {


  $('.positions_btn').on("click", function() {
    /* создаем переменную с блоком для визуальных данных  */
    var box_view = $('#interest_box');
    /* создаем переменную с блоком для скрытых данных  */
    var box = $('#hide_send');
    /* переменная выбранного элемента */
    var myself = $(this);
    /* создаем переменную с линком объекта  */
    var page_link = myself.data('link');
    /* получаем значение атрибута "data-name-position" у активного элемента */
    var take_data_val = myself.data('namePosition');
    /* добавляем скрытый input со значением выбранной позиции в форму */
    box.append("<input type='hidden' name='Интересующая позиция' value='" + take_data_val + "'>");


    /* добавляем выбранную позицию в информ блок */
    $("<div class='item_wrapp'><div class='item_this_body'><a href='" + page_link + "' target='_blank'><p class='interest_item'>" + take_data_val + "</p></a></div><div class='dell_this_body'><p class='dell_this'>[x]</p></div><div class='clear'></div></div>").appendTo(box_view);

    //запись localStorage
    $.saveChange();

    /* обновляем заголовок */
    $.refresh_h();
  });

});

//Удаление выбранного элемента из списка
$(document).on('click', '.dell_this_body', function(e) {
  /* переменная выбранного элемента */
  var myself_del = $(this);
  /* ищем родительский элемент от выбранного */
  var parent_dell = myself_del.parent();
  /* ищем соседний элемент от выбранного */
  var search_val_del = myself_del.prev();
  /* ищем значение текстового поля */
  var search_val_p = search_val_del.find('p').text();

  /* находим скрытый input, что требуется удалить */
  $(':input').filter(function() {
    return this.value == search_val_p
  }).remove();
  /* находим позицию, что требуется удалить */
  parent_dell.remove();
  /* обновляем заголовок */
  $.refresh_h();
  /* Очищаем хранилище */
  $.DeleteChange();
  /* Сохраняем в хранилище новый вариант */
  $.saveChange();
});

/* функция обновления заголовка...