Небольшая форма

@Savok32 · Регистрация: 29.12.2013

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

Добрый день, профи ява скрипта, т.к. новичок, пишу просьбу о помощи, в создание простой формы.

Она должна считать общую сумму при выборе товара. Тобишь выбираем сначала чекбокс, потом кол-во товара, далее показывается общая сумма. Накидал основной скелет, куда копать.

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
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
<h3>Кабели</h3>
<ul>
<li>
<input  type="checkbox" ><select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
</select>
Трансивер SFP+ 3.1    <b>Цена: 789 руб</b>
</li>
<li>
<input  type="checkbox" >
<select>
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
</select>Трансивер SFP+ 3.98  <b>Цена: 589 руб</b>
</li>
</ul>
<hr>
 
Общая стоимость:

@amadey18 · 03.06.2015, 12:00

Savok32, так?

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
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
<h3>Кабели</h3>
<ul>
<li>
    <input  type="checkbox" id="first"  onchange="get_summa();"/>
    <select id="sel_1"  onchange="get_summa();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
</select>
Трансивер SFP+ 3.1    <b>Цена: 789 руб</b>
</li>
<li>
    <input  type="checkbox" id="second"  onchange="get_summa();" />
<select id="sel_2"  onchange="get_summa();">
    <option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
</select>Трансивер SFP+ 3.98  <b>Цена: 589 руб</b>
</li>
</ul>
<hr>
 
    Общая стоимость: <span id="summa"></span>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function get_summa(){
    var check_1 = document.getElementById("first");
    var check_2 = document.getElementById("second");
    var sel_1 = document.getElementById("sel_1");
    var sel_2 = document.getElementById("sel_2"); 
    var summa = 0;
    if(check_1.checked){
        summa += parseInt(sel_1.value);
    };
    if(check_2.checked){
        summa += parseInt(sel_2.value);
    };
    document.getElementById("summa").innerHTML = summa; 
    console.log(summa);
}

http://jsfiddle.net/1trmL4j0/2/

@Savok32 · 03.06.2015, 12:04 **[ТС]**

Большое спасибо, всё так. Но он только кол-во показывает выбранное, а надо еще, это кол-во умножать на цену, чтобы сумму показывала.

@amadey18 · 03.06.2015, 12:47

Savok32, учтите что цена должна браться из базы!!!, т.е. необходим еще ajax запрос, или вытаскивать цену при генерации страницы и вставлять с помощью php в переменные(вообще есть много способов).
html не трогал. http://jsfiddle.net/1trmL4j0/3/

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

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
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
<h3>Кабели</h3>
<ul>
<li>
    <input  type="checkbox" id="first"  onchange="get_summa();"/>
    <select id="sel_1"  onchange="get_summa();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
</select>
Трансивер SFP+ 3.1    <b>Цена: 789 руб</b>
</li>
<li>
    <input  type="checkbox" id="second"  onchange="get_summa();" />
<select id="sel_2"  onchange="get_summa();">
    <option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
</select>Трансивер SFP+ 3.98  <b>Цена: 589 руб</b>
</li>
</ul>
<hr>
 
    Общая стоимость: <span id="summa"></span>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function get_summa(){
    /*цена должна браться из базы!!!*/
    var price_1 = 789;
    var price_2 = 589;
    
    var check_1 = document.getElementById("first");
    var check_2 = document.getElementById("second");
    var sel_1 = document.getElementById("sel_1");
    var sel_2 = document.getElementById("sel_2"); 
    var summa = 0;
    if(check_1.checked){
        summa += parseInt(sel_1.value) * price_1;
    };
    if(check_2.checked){
        summa += parseInt(sel_2.value) * price_2;
    };
    document.getElementById("summa").innerHTML = summa; 
    console.log(summa);
 
}

@Savok32 · 03.06.2015, 15:55 **[ТС]**

да мне не нужна ее из базы брать, вот как вы сделали в самый раз, что то уж больно сложный мне кажется js ))

Добавлено через 3 часа 3 минуты
народ, вопрос такой, вот продолжил делать скрипт, как сделать чтобы общая сумма, умножалась еще на 14%.

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
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
<h3>Кабели</h3>
<ul>
<li>
    <input  type="checkbox" id="first"  onchange="get_summa();"/>
    <select id="sel_1"  onchange="get_summa();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
</select>
Трансивер SFP+ 3.1    <b>Цена: 789 руб</b>
</li>
<li>
    <input  type="checkbox" id="second"  onchange="get_summa();" />
<select id="sel_2"  onchange="get_summa();">
    <option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
</select>Трансивер SFP+ 3.98  <b>Цена: 589 руб</b>
</li>
</ul>
<hr>
  <h3>Платформа</h3>  
    <ul>
     
        <li><input  type="checkbox" id="os"  onchange="get_summa();" />ETegro Eos 400 <b>Цена: 100 руб</b>   </li>
     <li>  <input  type="checkbox" id="os1"  onchange="get_summa();" />ETegro Eos 400 BMS with ONIE <b>Цена: 200 руб</b>
         <hr>   </li></ul>
 
    Общая стоимость: <span id="summa"></span>

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
function get_summa(){
    /*цена должна браться из базы!!!*/
    var price_1 = 789;
    var price_2 = 589;
    var price_3 = 100;
    var price_4 = 200;
    
    
    var check_1 = document.getElementById("first");
    var check_2 = document.getElementById("second");
    var check_3 = document.getElementById("os");
    var check_4 = document.getElementById("os1");
    
    var sel_1 = document.getElementById("sel_1");
    var sel_2 = document.getElementById("sel_2"); 
 
    var summa = 0;
    if(check_1.checked){
        summa += parseInt(sel_1.value) * price_1;
    };
    if(check_2.checked){
        summa += parseInt(sel_2.value) * price_2;
    };
    
      if(check_3.checked){
        summa += parseInt(price_3);
    };
    
       if(check_4.checked){
        summa += parseInt(price_4);
    };
    document.getElementById("summa").innerHTML = summa; 
    console.log(summa);
   //document.getElementById("myCheck").checked = true; 
}

@amadey18 · 03.06.2015, 16:28

Savok32, т.е. чтобы типа НДС прибавлялся к этой сумме? Или чтобы ваша сумма умножалась на число которое равно 14% от основного?

JavaScript
1
summa = ((summa * 14) / 100) + summa;// наша сумма + 14% от этой суммы

Добавлено через 2 минуты

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

JavaScript
1
parseInt(price_3);

бессмысленно)) это и так числовая переменная.

@Savok32 · 03.06.2015, 16:33 **[ТС]**

бессмысленно)) это и так числовая переменная.

а как тогда правильно записать? просто price_3 ?

@amadey18 · 03.06.2015, 16:38

Savok32, да,

JavaScript
1
summa += price_3;

@Savok32 · 09.06.2015, 11:30 **[ТС]**

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

Пример Выбор лиценции на 1,2,3 года
1 год = 5 рублей
2 года = 32 рубля
3 года =97 рублей

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul>
<li>
    <input  type="checkbox" id="first"  onchange="get_summa();"/>
    <select id="sel_1"  onchange="get_summa();">
<option value="1">на 1 год</option>
<option value="2">на 2 года</option>
<option value="3">на 3 года</option>
 
</select>
 
</li>
 
<hr>
 
    Общая стоимость: <span id="summa"></span>

Добавлено через 57 минут
спс решил вопрос

Новые блоги и статьи Все статьи Все блоги /
Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	1С: Контроль уникальности заводского номера Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git
1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .

@Savok32 1 / 1 / 0 Регистрация: 29.12.2013 Сообщений: 74
	03.06.2015, 12:04 [ТС]
	Большое спасибо, всё так. Но он только кол-во показывает выбранное, а надо еще, это кол-во умножать на цену, чтобы сумму показывала. 0