Отправка формы html с помощью ajax в реальном времени

@MaksAndreev · Регистрация: 12.12.2011

Студворк — интернет-сервис помощи студентам

Очень нужна помощь, вопрос внизу

Все в файле form.php.

Осуществляется подсчет цены поставки
Она получается как:
("Основной компонент" + "дополнительный компонент") * "количество компонентов"

Есть:
Форма html, в которой есть все три вещи
1. rNumber = количество
2. pech - основной
3. kopch - дополнительный

HTML5
1
2
3
4
5
6
7
            <div id="form">   
                <form method="post" action="form.php">
                   <input type="text" name="rNumb" value="" size="25" maxlength="30">
                   <input type="checkbox" checked="checked" value="on" name="pech" id="check">
                   <input type="checkbox"  value="on" name="kopch" id="check1">
                </form>
            </div>

Далее сумма подсчитывается в php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
                <?php
                    if ($_POST['pech'])
                    {
                        $pech = 3959;
                    }
                    if ($_POST['kopch'])
                    {
                        $kopch = 100;
                    }
                    if ($_POST['rNumb'] > 1)
                    {
                        $summ = ($pech + $kopch) * $rNumb;
                    }
                    else
                    {
                        $summ = $pech + $kopch;
                    }
                    echo "-. ";
                    echo "$summ ";
                    echo " руб";
                ?>

Как вести подсчет суммы в реальном времени, без кнопки submit?
Слышал, что это делается с помощью ajax, но так и не наткнулся на нужный ресурс..

@resource2008 · 07.01.2012, 00:35

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
    function getPrice(){
        var numb = $('#numb').val();                   // get number value
        var check  = $('#check').attr('checked');   // get pech state 
        var check1 = $('#check1').attr('checked'); // get kopch state
        var summ = 0;
        
                // next as in php script
        if (check)  {
            summ += 3959;
        }
        
        if (check1) {
            summ += 1000;
        }
        
        summ *= numb;
        
                // display price at the result div
        $('#result').text(summ + " rub");
    }
</script>

HTML5
1
2
3
4
5
6
7
8
9
<div id="form">   
<form method="post" action="form.php">
    <input type="text" name="rNumb" value="" size="25" maxlength="30" id = "numb">
    <input type="checkbox"  value="on" name="pech" id="check">
    <input type="checkbox"  value="on" name="kopch" id="check1">
</form>
<button onClick = "getPrice()">Calculate</button>
</div>
<div id = "result"></div>

подробней на http://jquery.com

@GuardCat · 07.01.2012, 00:45

Отправлять данные на сервер для расчётов --- расточительство (если формула не секретная, конечно).
Вот тестовый пример расчётов. Я позволил себе вписать id полю количества.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
    <head>
        <title>Пример расчёта</title>
    </head>
    <body>
        <div id = "form">
                <form>
                    <input type ="text" name ="rNumb" value ="" size ="25" maxlength ="30" id = "rNumb">
                    <input type ="checkbox" checked value ="on" name = "pech" id = "check">
                    <input type ="checkbox" value = "on" name ="kopch" id ="check1">
                </form>
            <div class = "result" id = "result"></div>
        </div>
        <script>
            var calculate = (
                function () {
                    var
                        PECH = 3959,
                        KOPCH = 100,
                        pechCheckbox = document.getElementById("check"),
                        kopchCheckbox = document.getElementById("check1"),
                        amountInput = document.getElementById("rNumb")
                    ;
                    function calculateIt() {
                        var 
                            pech = pechCheckbox.checked ? PECH : 0,
                            kopch = kopchCheckbox.checked ? KOPCH : 0,
                            amount = parseInt(amountInput.value)
                        ;
                        amount = amount || 0;
                        document.getElementById("result").innerHTML = (pech + kopch) * amount + " р.";
                    }
                    return pechCheckbox.onclick = kopchCheckbox.onclick = amountInput.onkeyup = calculateIt;
                }
            )()(); //Один раз вызываем функцию calculate, чтобы получить ноль в поле результата.
        </script>
    </body>
</html>

P.S. JQuery применять для такой задачи тоже считаю излишеством.

@resource2008 · 07.01.2012, 00:58

Сообщение от GuardCat

P.S. JQuery применять для такой задачи тоже считаю излишеством.

ну человек же хотел "ajax" =)))

@GuardCat · 07.01.2012, 01:17

Не по теме:

Это была попытка выдать JQuery за Ajax? =)

Кстати, если убрать «var calculate = » (но скобку оставить!), то в глобальной области видимости вообще ничего нового не появится, что гут.

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

@GuardCat Просто любитель 626 / 464 / 120 Регистрация: 20.01.2011 Сообщений: 865 Записей в блоге: 2
	07.01.2012, 01:17
	Не по теме: Это была попытка выдать JQuery за Ajax? =) Кстати, если убрать «var calculate = » (но скобку оставить!), то в глобальной области видимости вообще ничего нового не появится, что гут. 0