Как подсчитать сумму не перезагружая страницу? - Веб-программирование

rumax · 14.12.2004, 13:48

Подскажите как подсчитать и показать сумму заказа не перегружая страницу (если это вообще возможно)?

RaZEr · 14.12.2004, 13:51

JavaScript

rumax · 14.12.2004, 14:54

Исчерпывающий ответ, спасибо!

Ghost · 14.12.2004, 15:01

rumax
Записываешь все значения, которые потом нужно суммировать, в спец. блоки, и назначаешь им (блокам) какие-либо идентификаторы (<DIV ID="bal-bla-bla">), потом вызываешь скрипт, который будет считывать значения в этих блоках (myDiv = document.getElementById('bla-bla-bla'); myVal = myDiv.innerHTML;), суммировать их и записывать в какой-либо еще блок (myDiv.innerHTML = summa;). Такой ответ подойдет?

rontommy · 14.12.2004, 15:32

Цитата:

Ghost:
Записываешь все значения, которые потом нужно суммировать в спец. блоки

А зачем так сложно ? Почему бы не объявить глобальную переменную в начале скрипта, а потом вычислять сумму и присваивать в эту переменную ?

Ghost · 14.12.2004, 15:56

rontommy
Но ведь промежуточные данные (то, что суммируется) и результат (сумма) должны же как-то отображаться на странице... Ну ладно, пусть это будут не блоки, а поля формы <INPUT TYPE="text" NAME="bla-bla-bla"> - без разницы. Но ведь подразумевается, что:
1. есть страница;
2. на ней есть форма, в которую пользователь вводит какие-то значения;
3. нужно подсчитать сумму этих значений без перезагрузки и ПОКАЗАТЬ ее.
Имея блоки <DIV ID="...">, можно изменять их значения (как и поля формы), а имея форму, обращаться к ее полям можно также по их идентификаторам (как и к блокам).
Вот два примера, с DIV:

Код HTML:

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript">
<!--
function myInput (s) {
  var myDiv = document.getElementById(s);
  var myVal = prompt('Enter ' + s, '0');
  myDiv.innerHTML = myVal;
}
function mySumma() {
  var s = 0;
  for (var i = 1; i <= 3; i++) {
    var myDiv = document.getElementById('val' + i);
    s += (myDiv.innerHTML / 1);
  }
  var myDiv = document.getElementById('summ');
  myDiv.innerHTML = s;
}
//-->
</SCRIPT></HEAD><BODY>
<A HREF="javascript:myInput('val1');">value1</A>: <DIV ID="val1" STYLE="display: inline;">12</DIV><BR>
<A HREF="javascript:myInput('val2');">value1</A>: <DIV ID="val2" STYLE="display: inline;">23</DIV><BR>
<A HREF="javascript:myInput('val3');">value1</A>: <DIV ID="val3" STYLE="display: inline;">34</DIV><BR>
<A HREF="javascript:mySumma();">summa</A>:  <DIV ID="summ" STYLE="display: inline;"></DIV>
</BODY></HTML>

и с INPUT:

Код HTML:

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript">
<!--
function mySumm() {
  var s = 0;
  for (var i = 1; i <= 3; i++) {
    var myDiv = document.getElementById('val' + i);
    s += (myDiv.value / 1);
  }
  summ.value = s;
}
//-->
</SCRIPT></HEAD><BODY>
value1: <INPUT TYPE="text" NAME="val1" VALUE="12" SIZE="10"><BR>
value2: <INPUT TYPE="text" NAME="val2" VALUE="23" SIZE="10"><BR>
value3: <INPUT TYPE="text" NAME="val3" VALUE="34" SIZE="10"><BR>
<INPUT TYPE="button" onClick="javascript:mySumm();" VALUE="summ">
<INPUT TYPE="text" NAME="summ" SIZE="10" VALUE="">
</BODY></HTML>

rontommy · 14.12.2004, 16:38

Ghost
Ну я думал, что все твои выкладки и так ясны

, достаточно лишь знать основы JavaScript и DOM.

RaZEr · 14.12.2004, 19:41

2 Ghost: У тебя во втором коде getElementById(), хотя надо getElementByName().

Ghost · 14.12.2004, 19:49

RaZEr
Гыхм... Код рабочий. Поле <INPUT> вполне нормально обнаруживается. Хотя, действительно, можно в тэге <INPUT> указывать не только параметр NAME, но и ID - и искать по нему. А вот объект document не поддерживает метод getElementByName() - нет такого метода...

RaZEr · 14.12.2004, 20:06

Цитата:

Поле <INPUT> вполне нормально обнаруживается

Да, как-то я запамятовал про это. Сам в свое время нажегся на том, что на странице были два элемента, где у одного name был равный id другого. Из-за этого выбирался не тот элемент.

Цитата:

А вот объект document не поддерживает метод getElementByName() - нет такого метода...

Я непомню все ли браузеры поддерживают getElementByName(). Возможно только IE. Но document.forms поддерживают все

rumax · 15.12.2004, 22:08

ВСЕМ спасибо за исчерпывающие ответы!

14.12.2004, 13:48	# 1
rumax Junior Member Регистрация: 29.10.2002 Адрес: Moscow Сообщения: 52	Как подсчитать сумму не перезагружая страницу? Подскажите как подсчитать и показать сумму заказа не перегружая страницу (если это вообще возможно)?

14.12.2004, 15:01	# 4
Ghost ::VIP:: Звезда первого сезона Молчун-2004 Регистрация: 24.08.2002 Сообщения: 1 575	rumax Записываешь все значения, которые потом нужно суммировать, в спец. блоки, и назначаешь им (блокам) какие-либо идентификаторы (<DIV ID="bal-bla-bla">), потом вызываешь скрипт, который будет считывать значения в этих блоках (myDiv = document.getElementById('bla-bla-bla'); myVal = myDiv.innerHTML;), суммировать их и записывать в какой-либо еще блок (myDiv.innerHTML = summa;). Такой ответ подойдет? __________________ Действовать надо тупо и это лучшее доказательство нашей чистоты и силы! Последний раз редактировалось Ghost; 14.12.2004 в 16:03. Причина: склероZzz...

14.12.2004, 15:56	# 6
Ghost ::VIP:: Звезда первого сезона Молчун-2004 Регистрация: 24.08.2002 Сообщения: 1 575	rontommy Но ведь промежуточные данные (то, что суммируется) и результат (сумма) должны же как-то отображаться на странице... Ну ладно, пусть это будут не блоки, а поля формы <INPUT TYPE="text" NAME="bla-bla-bla"> - без разницы. Но ведь подразумевается, что: 1. есть страница; 2. на ней есть форма, в которую пользователь вводит какие-то значения; 3. нужно подсчитать сумму этих значений без перезагрузки и ПОКАЗАТЬ ее. Имея блоки <DIV ID="...">, можно изменять их значения (как и поля формы), а имея форму, обращаться к ее полям можно также по их идентификаторам (как и к блокам). Вот два примера, с DIV: Код HTML: <HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- function myInput (s) { var myDiv = document.getElementById(s); var myVal = prompt('Enter ' + s, '0'); myDiv.innerHTML = myVal; } function mySumma() { var s = 0; for (var i = 1; i <= 3; i++) { var myDiv = document.getElementById('val' + i); s += (myDiv.innerHTML / 1); } var myDiv = document.getElementById('summ'); myDiv.innerHTML = s; } //--> </SCRIPT></HEAD><BODY> <A HREF="javascript:myInput('val1');">value1</A>: <DIV ID="val1" STYLE="display: inline;">12</DIV><BR> <A HREF="javascript:myInput('val2');">value1</A>: <DIV ID="val2" STYLE="display: inline;">23</DIV><BR> <A HREF="javascript:myInput('val3');">value1</A>: <DIV ID="val3" STYLE="display: inline;">34</DIV><BR> <A HREF="javascript:mySumma();">summa</A>: <DIV ID="summ" STYLE="display: inline;"></DIV> </BODY></HTML> и с INPUT: Код HTML: <HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- function mySumm() { var s = 0; for (var i = 1; i <= 3; i++) { var myDiv = document.getElementById('val' + i); s += (myDiv.value / 1); } summ.value = s; } //--> </SCRIPT></HEAD><BODY> value1: <INPUT TYPE="text" NAME="val1" VALUE="12" SIZE="10"><BR> value2: <INPUT TYPE="text" NAME="val2" VALUE="23" SIZE="10"><BR> value3: <INPUT TYPE="text" NAME="val3" VALUE="34" SIZE="10"><BR> <INPUT TYPE="button" onClick="javascript:mySumm();" VALUE="summ"> <INPUT TYPE="text" NAME="summ" SIZE="10" VALUE=""> </BODY></HTML> __________________ Действовать надо тупо и это лучшее доказательство нашей чистоты и силы! Последний раз редактировалось Ghost; 14.12.2004 в 16:46. Причина: склероZzz...

14.12.2004, 16:38	# 7
rontommy Добряк Модератор ГлавБюстАтценка АН ИМХО.ВС Регистрация: 14.10.2002 Адрес: Старый оценщик, НИИ ГлавБюстАтценка АН ИМХО.ВС Пол: Male Сообщения: 4 010	Ghost Ну я думал, что все твои выкладки и так ясны , достаточно лишь знать основы JavaScript и DOM. __________________ Лень - это когда видишь необходимость что-то делать, но не хочется, а влом - это когда что-то хочется, но не видишь необходимости это делать.

14.12.2004, 19:49	# 9
Ghost ::VIP:: Звезда первого сезона Молчун-2004 Регистрация: 24.08.2002 Сообщения: 1 575	RaZEr Гыхм... Код рабочий. Поле <INPUT> вполне нормально обнаруживается. Хотя, действительно, можно в тэге <INPUT> указывать не только параметр NAME, но и ID - и искать по нему. А вот объект document не поддерживает метод getElementByName() - нет такого метода... __________________ Действовать надо тупо и это лучшее доказательство нашей чистоты и силы!

14.12.2004, 13:51	# 2
RaZEr МОД-Оператор ЭВМ Регистрация: 18.04.2002 Адрес: Питер Сообщения: 4 343	JavaScript

14.12.2004, 14:54	# 3
rumax Junior Member Регистрация: 29.10.2002 Адрес: Moscow Сообщения: 52	Исчерпывающий ответ, спасибо!

14.12.2004, 19:41	# 8
RaZEr МОД-Оператор ЭВМ Регистрация: 18.04.2002 Адрес: Питер Сообщения: 4 343	2 Ghost: У тебя во втором коде getElementById(), хотя надо getElementByName().

15.12.2004, 22:08	# 11
rumax Junior Member Регистрация: 29.10.2002 Адрес: Moscow Сообщения: 52	ВСЕМ спасибо за исчерпывающие ответы!