Как правильно отправить данные формы (калькулятора) через ajax?

Question

[zlobinberg]

Подскажите, как правильно отправить данные формы через ajax?

Имеется форма калькулятор, с выводом общей стоимости в теге 0р и отправкой контактных данных.

Как правильно все это отправить, есть файл обработчик отправки send.php и скрипт вывода цены с учетом скидки и тд. Все даные приходят, кроме самой цены:

Форма HTML:

<form id="zayvka" action="send.php" method="post">

    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <h4>1.Что требуется выполнить?</h4>

        <div class="block_calc_main">
            <div class="chekbox-two">
                <label class="checkbox">
                    <input type="checkbox" name="check[]" value=" Защитная речь (дипломный доклад)" id="checkbox1">
                    <span class="checkbox__icon"></span> Защитная речь (дипломный доклад)
                </label>
            </div>

            <div class="chekbox-two">
                <label class="checkbox">
                    <input type="checkbox" name="check[]" value="Дипломная презентация" id="checkbox2">
                    <span class="checkbox__icon"></span> Дипломная презентация
                </label>
            </div>
            <div class="chekbox-two">
                <label class="checkbox">
                    <input type="checkbox" name="check[]" value="Раздаточный материал" id="checkbox3">
                    <span class="checkbox__icon"></span> Раздаточный материал
                </label>
            </div>

            <div class="chekbox-two">
                <label class="checkbox" style="font-weight: 700;">
                    <input type="checkbox" name="check[]" value="Выполнить срочно" id="checkbox4">
                    <span class="checkbox__icon"></span>
                    <i class="fab fa-gripfire"></i>Выполнить срочно
                </label>
            </div>

            <div class="sale-block">
                <div class="sale">Итого:

                    <span name="over_sale" id="res_price">0</span>р

                </div>
                <span>с учетом скидки <span id="disc_calc">0</span>%</span>
            </div>

        </div>

    </div>

    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <h4>2. Заполните свои данные</h4>

        <div id="sp-form-42500" class="sp-form sp-form-regular sp-form-embed">
            <div id="droppableArea" class="sp-element-container ui-sortable ui-droppable sp-lg ">
                <div class="sp-field ">
                    <input class="sp-form-control" type="text" name="name" required="required" placeholder="Ваше имя" value="">
                </div>
                <div class="sp-field ">
                    <input type="email" name="emailfield" class="sp-form-control " placeholder="Ваш Email" required="required">
                </div>

                <div class="buttons  ">
                    <button class="custom-btn blue" type="submit">Сделать заказ</button>
                </div>

            </div>

        </div>

    </div>

</form>

JS файл расчета калькулятора:

var checkbox1_price = 0;
var checkbox2_price = 0;
var checkbox3_price = 0;
var sum_price = 0;

var srochno_price = 0;
var full_price = 0;

var discount_calc = 0;

$('.block_calc_main').click(function(){
    if($('#checkbox1').prop('checked')) {checkbox1_price = 990;}
    else{checkbox1_price = 0}
    if($('#checkbox2').prop('checked')) {checkbox2_price = 1200;}
    else{checkbox2_price = 0}
    if($('#checkbox3').prop('checked')) {checkbox3_price = 600;}
    else{checkbox3_price = 0}
    if($('#checkbox4').prop('checked')) {srochno_price = 1000;}
    else {srochno_price = 0;}
    
    sum_price = checkbox1_price + checkbox2_price + checkbox3_price;
    
    if (sum_price == 2190) {sum_price = 2000; discount_calc = 10}
    if (sum_price == 2790) {sum_price = 2500; discount_calc = 12}
    
    full_price = sum_price + srochno_price;
    $('#res_price').html(full_price);
    $('#disc_calc').html(discount_calc);
});

Ну и php обработчик отправки данных на Email^

<?php
 /* Здесь проверяется существование переменных */
  if (isset($_POST['emailfield'])) {$emailfield = $_POST['emailfield'];}
 if (isset($_POST['name'])) {$name = $_POST['name']; }

 $check = '';
if (!empty($_POST["check"]) && is_array($_POST["check"]))
{
    $check = implode(" ", $_POST["check"]);
}

 $address = "[e-mail]";

/* А здесь прописывается текст сообщения, \n - перенос строки */
 $mes = "Тема: Заявка с сайта Защита диплома! \nEmail: $emailfield\nИмя: $name \nТребуется выполнить: $check\n ";

/* А эта функция как раз занимается отправкой письма на указанный вами email */
$sub='Заявка'; //сабж
$email='Заявка'; // от кого
 $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:$email");

ini_set('short_open_tag', 'On');
//header('Refresh: 3; URL=index.html');
?>

Подскажите как правильно отправить Общую стоимость? Подсказали что через Ajax.

Спасибо всем откликнувшимся.

Answer 1

[Rodion Gashe]

или забирай через javascript даные $('#disc_calc').text() и клади куда-то, либо пропиши внутри формы

<input type="hidden" name="disc_calc" id="disc_calc_input" value="">

и делай $('#disc_calc_input').val(discount_calc).

тоже самое для res_price, если надо

Comments

[zlobinberg]

Огромное благодарствие! Получилось, работает.

Внес правки в форму:

<span name="over_sale" id="res_price">0</span>р
							<input type="hidden" name="full_price" id="disc_calc_input" value="">

И js добавил строчку :
$('#disc_calc_input').val(full_price);

И в файле отправки:

if (isset($_POST['full_price'])) {$full_price = $_POST['full_price']; }

и добавил:
\nИтоговая стоимость: $full_price

Все отлично приходит.