Отправка формы из div

252

12 декабря 2017, 18:16

Добрый день, столкнулся с такой проблемой. Делаю калькулятор для сайта с последующим заказом.

Проблема в том что на почту нужно отправить все данные из формы, т.е. те области на которые кликнул пользователь, что бы они запомнились и отправились на почту. Битый час ломаю голову как это сделать, помогите пожалуйста кто может.

Пример калькулятора: https://jsfiddle.net/v2pwww/b98e059L/3/

function number_format(number, decimals, dec_point, thousands_sep) {
  number = (number + '')
    .replace(/[^0-9+\-Ee.]/g, '');
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function (n, prec) {
      var k = Math.pow(10, prec);
      return '' + (Math.round(n * k) / k)
          .toFixed(prec);
    };
  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n))
    .split('.');
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
  }
  if ((s[1] || '')
      .length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1)
      .join('0');
  }
  return s.join(dec);
}
$(document).ready(function () {
    //Заменяем кнопку <button>рассчитать стоимость</button> на <span class="cur"></span>, в который будет подставляться рассчитанная сумма
    $('.price-button').click(function() {
        var boxPrice = $(this).closest('.col-md-4');
        function hideButton () {
            $(boxPrice).find('.price-button').hide();
            $(boxPrice).find('.footer-price').append('<h4>Итог: <span class="cur">0</span> <span class="rub">р.</span></h4>');
        };
        //анимация раскрытия блока с параметрами
        $(boxPrice).find('.box-price').animate({height: '390px'}, {'duration': 500}, {'easing': 'linear'}, hideButton());
    });
    //отслеживаем выделение параметра, чтобы в блоке был только 1 выделенный элемент

    ////////////Калькулятор
    //получаем значения параметров
    function valParam ($this) {
    $this.toggleClass('check-param');
    var isChecked = $this.hasClass('check-param');
    var total = parseInt($('.cur').html());
    var param = $this.data('param');    
    var group = $this.closest('div.way');
    var groupList = $(group).find('.check-param');
    if (groupList.length > 1) {
        for (var i = 0; i < groupList.length; i++) {
        var $el = $(groupList[i]);
        var elCheked = $(groupList[i]).hasClass('check-param');
        if (elCheked) {
          $el.removeClass('check-param');
          total = total - $el.data('param'); 
        }          
      }
      total = total + $this.data('param'); 
      $this.addClass('check-param');
    }

    if (isChecked) {
        total = total + param;
    } else {
        total = total - param;
    }
            $('.cur').html(total);
            $('.rub').show();
        };

    //отслеживаем изменение данных
    $('.item').on('click', function() {
    valParam($(this))
  });
})

Answer 1

Если ты передаешь данные через php, то тебе надо калькулятор "загнать в форму":

<form action='название файла.php'> html-код с калькулятором </form>

А к кнопке "Заказать" (ориентируясь на пример, указанный в ссылке) привязать уникальный id и через функцию $.post() передать данные на сервер. Например:

<script>
$('#button_zakaz').click( function () {    
      $.post("action.php", {id: id_js}, onAjaxSuccess);
     function onAjaxSuccess(data)
    {
     alert(data);
    }       
        return false;
      });
<script>

button_zakaz - это id твоей кнопки, которая будет передавать данные, submit ставить не обязательно. {id: id_js} - здесь ты присваиваешь нужным тебе параметрам, которые надо передать, значения, полученные в JS. Далее в action.php проводишь "распознание переменных":

<?php 
$id = $_POST['id'];
......
?>

Как-то так, ориентируйся в общем, на функцию передачи данных $.post().

Answer 2

В html формe пропишите везде name потом вставьте

jQuery(document).ready(function($) { 
$("form#data").submit(function(e) { 
    e.preventDefault();  // если ссылка а нужно чтоб выполнялась как кнопка не обязательный параметр   
    var formData = new FormData(this); 
 
    $.ajax({ 
        url: "mail.php", 
        type: 'POST', 
        data: formData, 
        success: function (data) { 
            alert(data) 
        }, 
        cache: false, 
        contentType: false, 
        processData: false 
    }); 
}); 
});

и код php

<?php 
$to      = 'nobody@example.com';//твой емайл 
$subject = 'the subject'; 
$message = '$_POST'; 
$comma_separated = implode(",", $message); 
$headers = 'From: webmaster@example.com' . "\r\n" . 
    'Reply-To: webmaster@example.com' . "\r\n" . 
    'X-Mailer: PHP/' . phpversion(); 
 
mail($to, $subject, $comma_separated, $headers);