Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.62/13: Рейтинг темы: голосов - 13, средняя оценка - 4.62
0 / 0 / 0
Регистрация: 02.06.2013
Сообщений: 20
1

Калькулятор расчета стоимости

28.04.2016, 00:38. Просмотров 2342. Ответов 6
Метки нет (Все метки)

Здравствуйте. Помогите посчитать конечную стоимость товара. Я вывожу из бд через php цену за 1 кв. м. и название товара в select. У меня получилось посчитать нужную площадь, а вот умножить стоимость на площадь не получается.
Кликните здесь для просмотра всего текста

PHP
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?php
require_once 'classes/db.php';
$sql='SELECT title,price FROM product';
$product=$pdo->prepare($sql);
$product->execute();
$all=$product->fetchAll();
?>
<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 
<table>
    <tr>
        <td>Выберите камень</td>
        <td>
            <select class="kamni-spisok">
                <?php foreach ($all as $product): ?>
                <option value="0" c0="<?php echo $product['price']?>"><?php echo $product['title']?></option>
                <?php endforeach; ?>
            </select><br />
            Цена за квадрат<br />
            <span class="kamni-spisok-c"></span>
        </td>
    </tr>
    <tr>
        <td>Введите ширину, м</td>
        <td><input type="number" min="0" value="0" name="" class="shirina"></td>
    </tr>
    <tr>
        <td>Введите высоту, м</td>
        <td><input type="number" min="0" value="0" name="" class="visota"></td>
    </tr>
    <tr  class="kvadratura-tr" style="display:none">
        <td>Квадратура в*ш</td>
        <td><strong class="kvadratura"></strong></td>
    </tr>
    <tr>
        <td><label><input type="checkbox" name="" class="ucet-uglov">С учетом углов, п.м.</label></td>
        <td><input type="number" min="0" value="0" name="" class="ucet-uglov-input" disabled cena0=""></td>
    </tr>
    <tr  class="cena-pm-tr" style="display:none">
        <td>Итого цена за углы</td>
        <td><strong class="cena-pm"></strong></td>
    </tr>
    <tr>
        <td><input type="button" value="итого" class="submit"></td>
        <td>Итого <span class="itogo-calc"></span></td>
    </tr>
</table>
    <script type='text/javascript' src='calc.js'></script></p>
</body>
</html>

Кликните здесь для просмотра всего текста

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
40
41
42
//тут будут наши обработчики
jQuery( document ).ready(function( $ ) {
  //блокирует поле "с учетом углов"
  $('.ucet-uglov').on('change',function (){
  !$(this).is(':checked') ? $('.ucet-uglov-input').attr('disabled','disabled') : $('.ucet-uglov-input').removeAttr('disabled');
  });
  
  //выбор камня из списка
  $('.kamni-spisok').on('change',function(){
  var elm=$(this).find('option:selected');
  
  $('.kamni-spisok-c').text($(elm).attr('c0')+"р");
 
  
  });
  
  //нажатие на кнопку итого
  $('.submit').on('click',function (){
  var shirina=parseFloat($('.shirina').val());
  var visota=parseFloat($('.visota').val());
  var kvadratura=shirina*visota;
  $('.kvadratura-tr, .cena-pm-tr').fadeOut(0);
  $('.kvadratura-tr').fadeIn(900);
  
  var lavel_cen=0;
  var lavel_c=0;
  var ucet_uglov=$('.ucet-uglov').prop('checked')?$('.ucet-uglov-input').val():0;
  var cena_pm=0;
  if ($('.ucet-uglov').prop('checked')) {
  
    $('.cena-pm-tr').fadeIn(900);
    cena_pm=($('.ucet-uglov-input').attr('cena'+lavel_cen))*ucet_uglov;
    $('.cena-pm').text(cena_pm+'р');
  }
 
  $('.kvadratura').html(kvadratura+'м<sup>2</sup>');
  var itogo=cena_pm;
  
  $('.itogo-calc').text(itogo+'р');
  });
 
});
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.04.2016, 00:38
Ответы с готовыми решениями:

Калькулятор расчета стоимости системы отопления
калькулятор расчета стоимости системы отопления. Добрый день помогите сделать калькулятор. Есть...

Создать калькулятор расчета стоимости автомобильных кресел
Как сделать такой калькулятор. При выборе нужных элементов как на сайте avtobm.ru

Калькулятор стоимости товара
Вот что у меня получилось &lt;td class=&quot;amount&quot;&gt;&lt;div class=&quot;plus&quot;&gt;&lt;i class=&quot;fas...

Калькулятор подсчёта стоимости игры
Подскажите пожалуйста код калькулятора который подсчитывает стоимость одного слота игры + период...

6
Философ-разговорник
158 / 94 / 56
Регистрация: 20.02.2016
Сообщений: 369
28.04.2016, 12:05 2
Цитата Сообщение от deadfox Посмотреть сообщение
<option value="0" c0="<?php echo $product['price']?>"><?php echo $product['title']?></option>
А чем вас не устроил стандартный атрибут value?
0
0 / 0 / 0
Регистрация: 02.06.2013
Сообщений: 20
28.04.2016, 12:09  [ТС] 3
Сначала задумывалось выводить несколько разных цен, но потом я это убрал, а поправить забыл.
0
Философ-разговорник
158 / 94 / 56
Регистрация: 20.02.2016
Сообщений: 369
28.04.2016, 12:14 4
Дайте нормальый хтмл с которым можно запукать скрипт. Зачем вы выкладываете пхпшный код, который что-то выводит циклом, но никто не знает, что он выводит?
0
0 / 0 / 0
Регистрация: 02.06.2013
Сообщений: 20
28.04.2016, 12:40  [ТС] 5
Кликните здесь для просмотра всего текста
HTML5
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
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 
<table>
    <tr>
        <td>Выберите камень</td>
        <td>
             <select class="kamni-spisok">
                                <option value="0" c0="1290">Скалистая груда</option>
                                <option value="0" c0="1290">Горный пласт</option>
                                <option value="0" c0="860">Бельгийский кирпич</option>
                                <option value="0" c0="1100">Бриз</option>
                                <option value="0" c0="1150">Старая крепость</option>
                                <option value="0" c0="1000">Каменная гряда</option>
                            </select><br />
            Цена за квадрат<br />
            <span class="kamni-spisok-c"></span>
        </td>
    </tr>
    <tr>
        <td>Введите ширину, м</td>
        <td><input type="number" min="0" value="0" name="" class="shirina"></td>
    </tr>
    <tr>
        <td>Введите высоту, м</td>
        <td><input type="number" min="0" value="0" name="" class="visota"></td>
    </tr>
    <tr  class="kvadratura-tr" style="display:none">
        <td>Квадратура в*ш</td>
        <td><strong class="kvadratura"></strong></td>
    </tr>
    <tr>
        <td><label><input type="checkbox" name="" class="ucet-uglov">С учетом углов, п.м.</label></td>
        <td><input type="number" min="0" value="0" name="" class="ucet-uglov-input" disabled cena0=""></td>
    </tr>
    <tr  class="cena-pm-tr" style="display:none">
        <td>Итого цена за углы</td>
        <td><strong class="cena-pm"></strong></td>
    </tr>
    <tr>
        <td><input type="button" value="итого" class="submit"></td>
        <td>Итого <span class="itogo-calc"></span></td>
    </tr>
</table>
    <script type='text/javascript' src='calc.js'></script></p>
</body>
</html>


Добавлено через 16 минут
Добавил на codepen:http://codepen.io/deadfox12/pen/ONBbGO
0
Философ-разговорник
158 / 94 / 56
Регистрация: 20.02.2016
Сообщений: 369
29.04.2016, 13:03 6
Вчера не было возможности ответить. Вот, что-то я тут насочинял, но не уверен, что правильно понимаю идею расчета с учетом углов. Вобщем, подправьте там уже сами:

PHP/HTML
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
/*
[url]https://www.cyberforum.ru/javascript-jquery/thread1722890.html#post9080728[/url]
*/
    jQuery(document).ready(function($){
    /* какая-то фигня, которая влияет на расчет с учетом углов */
    var nevedomajaPeremennaja=10;
    /* чтобы не переделывать пхп(маразм) */
    $('.kamni-spisok option').each(function(){
    $(this).val($(this).attr('c0'));
    });
    /* поведение селекта */
    $('.kamni-spisok').change(function(){
    $('.kamni-spisok-c').html($(this).val()+' руб.');
    calc();
    });
    /* поведение инпутов ШИРИНА и ВЫСОТА */
    $('.shirina, .visota').on('input',function(){
    var val_1=$(this).val(),
        second=$(this).is('.shirina') ? 'visota' : 'shirina',
        val_2=$('.'+second).val();
        if(val_1 && val_2){
        $('.kvadratura').html((val_1*val_2)+'м<sup>2</sup>');
        $('.kvadratura-tr').fadeOut(0,function(){$(this).fadeIn(900);});
        calc();
        }
    });
    /* поведение инпута УГЛЫ */
    $('.ucet-uglov-input').on('input',function(){
        var val=$(this).val()*nevedomajaPeremennaja;
        if(val){
        $('.cena-pm').html(val);
        $('.cena-pm-tr').fadeOut(0,function(){$(this).fadeIn(900);});
        }
        calc();
    });
    /* поведение кнопки ИТОГО */
    $('.submit').click(calc);
    
    function calc(){
    
    var kamen=$('.kamni-spisok').val(),
        shirina=$('.shirina').val(),
        visota=$('.visota').val(),
        ucet_uglov=$('.ucet-uglov-input').val() || 1,
        fields_ready=0;
        
    /* проверка полей */
    switch(true){
    case !shirina  : $('.shirina').get(0).focus();  break;
    case !visota   : $('.visota').get(0).focus();   break;
    default        :  fields_ready=1;               break;
    }
    
    if(!fields_ready){return;}
    
    $('.itogo-calc').html(kamen*shirina*visota*ucet_uglov+' руб.');
    }
    
    //блокирует поле "с учетом углов"
    $('.ucet-uglov').on('change',function (){
        var inp=$('.ucet-uglov-input');
        !$(this).is(':checked') ? 
        (inp.attr('disabled','disabled').val(''),$('.cena-pm-tr').fadeOut(0,function(){$('.cena-pm').html('');}))
        : inp.removeAttr('disabled').get(0).focus();
        calc();
    });
    $('.kamni-spisok-c').html($('.kamni-spisok').val()+' руб.');
    });
    </script>
</head>
<body>
 
<table>
    <tr>
        <td>Выберите камень:</td>
        <td>
             <select class="kamni-spisok">
                                <option value="0" c0="1290">Скалистая груда</option>
                                <option value="0" c0="1290">Горный пласт</option>
                                <option value="0" c0="860">Бельгийский кирпич</option>
                                <option value="0" c0="1100">Бриз</option>
                                <option value="0" c0="1150">Старая крепость</option>
                                <option value="0" c0="1000">Каменная гряда</option>
                            </select><br />
            Цена за квадрат:<br />
            <span class="kamni-spisok-c"></span>
        </td>
    </tr>
    <tr>
        <td>Введите ширину, м</td>
        <td><input type="number" min="0" placeholder="0" name="" class="shirina" /></td>
    </tr>
    <tr>
        <td>Введите высоту, м</td>
        <td><input type="number" min="0" placeholder="0" name="" class="visota" /></td>
    </tr>
    <tr class="kvadratura-tr" style="display:none">
        <td>Квадратура в*ш:</td>
        <td><strong class="kvadratura"></strong></td>
    </tr>
    <tr>
        <td><label><input type="checkbox" name="" class="ucet-uglov" />С учетом углов, п.м.</label></td>
        <td><input type="number" min="0" placeholder="0" name="" class="ucet-uglov-input" disabled cena0="" /></td>
    </tr>
    <tr  class="cena-pm-tr" style="display:none">
        <td>Итого цена за углы:</td>
        <td><strong class="cena-pm"></strong></td>
    </tr>
    <tr>
        <td><input type="button" value="итого" class="submit" /></td>
        <td>Итого: <span class="itogo-calc"></span></td>
    </tr>
</table>
</body>
</html>
Добавлено через 2 минуты
Кнопка "Итого" не особо нужна, ее можно убрать
1
0 / 0 / 0
Регистрация: 02.06.2013
Сообщений: 20
29.04.2016, 13:10  [ТС] 7
Спасибо огромное. Смысл понял, дальше сам доделаю.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
29.04.2016, 13:10

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Калькулятор расчета микрозайма
Здравствуйте, HELP......Кто знаток в JS , нужен форма , или как правильно выразиться калькулятор...

Калькулятор расчета стоимости
Здравствуйте. Помогите пожалуйста. есть код калькулятора расчета стоимости товара, но расчет...

Калькулятор расчёта стоимости натяжных потолков
Здравствуйте, уважаемые программисты! Решил я, значит, сделать себе сайт на Wix (ибо знаний в...

Калькулятор для расчёта стоимости умного дома.
Есть вопрос по поводу калькулятора для расчёта стоимости умного дома на сайте. Макет во вложенном...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.