Отправка формы 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 = » (но скобку оставить!), то в глобальной области видимости вообще ничего нового не появится, что гут.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .

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

Опции темы