Форум Сайтостроение Веб-строительство

Нужна помощь специалиста по JavaScript

12 3
alexj69
На сайте с 05.06.2007
Offline
88
alexj69
1588

Мне нужно, чтобы в зависимости от выбора <select name="grdnaz" id="grdnaz"> менялась переменная cost_min. Я написал такой код: 

<form>

<input id="cost_min" type="hidden" name="cost_min" value="">

</form>

<script>

f=(function (){

var grd_naz = document.getElementById("grdnaz").value;

var cost_min;

 

if(grd_naz==1) document.getElementById("cost_min").value=500;

if(grd_naz==2) document.getElementById("cost_min").value=500;

if(grd_naz==3) document.getElementById("cost_min").value=500;

if(grd_naz==4) document.getElementById("cost_min").value=500;

if(grd_naz==5) document.getElementById("cost_min").value=1300;

if(grd_naz==6) document.getElementById("cost_min").value=1300;

if(grd_naz==7) document.getElementById("cost_min").value=1300;

 

document.forms['calcForm'].elements['grdnaz'].fireEvent('change');

})();

</script>

Значение переменной cost_min в инпуте меняется только после перезагрузки страницы. Как сделать, чтобы эта переменная менялась "на лету" при изменении значений селекта?

ValdisRu
На сайте с 02.10.2006
Offline
139
ValdisRu
#1
alexj69:
Мне нужно, чтобы в зависимости от выбора <select name="grdnaz" id="grdnaz"> менялась переменная cost_min. Я написал такой код: 
<form>

<input id="cost_min" type="hidden" name="cost_min" value="">

</form>

<script>

f=(function (){

var grd_naz = document.getElementById("grdnaz").value;

var cost_min;

 

if(grd_naz==1) document.getElementById("cost_min").value=500;

if(grd_naz==2) document.getElementById("cost_min").value=500;

if(grd_naz==3) document.getElementById("cost_min").value=500;

if(grd_naz==4) document.getElementById("cost_min").value=500;

if(grd_naz==5) document.getElementById("cost_min").value=1300;

if(grd_naz==6) document.getElementById("cost_min").value=1300;

if(grd_naz==7) document.getElementById("cost_min").value=1300;

 

document.forms['calcForm'].elements['grdnaz'].fireEvent('change');

})();

</script>

Значение переменной cost_min в инпуте меняется только после перезагрузки страницы. Как сделать, чтобы эта переменная менялась "на лету" при изменении значений селекта?

повесить функцию на событие onchange селекта

<select name="grdnaz" id="grdnaz" onchange="function();">

или можно в jQuery навоять (только имхо в данном случае это никчему)

Обалденный заработок на социальных сетях (https://goo.gl/Qtsq6M)
C
На сайте с 04.02.2005
Offline
291
Chukcha
#2

вы не привязали функцию f к onchange selectа

alexj69
На сайте с 05.06.2007
Offline
88
alexj69
#3

Добавил к селекту onchange="function();" но все-равно значение переменной не изменяется.

Timotty
На сайте с 13.09.2012
Offline
20
Timotty
#4

Держи рабочий вариант 

<form>

<select name="grdnaz" id="grdnaz" onchange="f()">

<option value="1">Volvo</option>

  <option value="2" selected>Saab</option>

  <option value="3">Mercedes</option>

  <option value="4">Audi</option>

</select>

<input id="cost_min" type="text" name="cost_min" value="">

</form>

<script>

f=(function (){

var grd_naz = document.getElementById("grdnaz").value;

var cost_min;

if(grd_naz==1) document.getElementById("cost_min").value=500;

if(grd_naz==2) document.getElementById("cost_min").value=52;

if(grd_naz==3) document.getElementById("cost_min").value=51;

if(grd_naz==4) document.getElementById("cost_min").value=500;

if(grd_naz==5) document.getElementById("cost_min").value=1300;

if(grd_naz==6) document.getElementById("cost_min").value=1300;

if(grd_naz==7) document.getElementById("cost_min").value=1300;

 

document.forms['calcForm'].elements['grdnaz'].fireEvent('change');

});

</script>
alexj69
На сайте с 05.06.2007
Offline
88
alexj69
#5

Спасибо, помогло. Теперь можно к этому же селекту привязать еще 2 переменные tWes и tVolume? Примерно как-то так: 


<script>

f=(function (){

var grd_naz = document.getElementById("grdnaz").value;

var cost_min, tWes, tVolume;

if(grd_naz==1) document.getElementById("cost_min").value=500,  document.getElementById("tWes").value=3.5, document.getElementById("tVolume").value=900;

if(grd_naz==2) document.getElementById("cost_min").value=1300,  document.getElementById("tWes").value=2.5, document.getElementById("tVolume").value=700;

</script>

И соответственно вывести инпуты с id tWes и tVolume?

Timotty
На сайте с 13.09.2012
Offline
20
Timotty
#6

Ввёл переменную var d = document; программисты народ ленивый :) 

<form>

<select name="grdnaz" id="grdnaz" onchange="f()">

<option value="1">Volvo</option>

  <option value="2" selected>Saab</option>

  <option value="3">Mercedes</option>

  <option value="4">Audi</option>

</select>

<input id="cost_min" type="text" name="cost_min" value="">

<input name="tWes" id="tWes" type="text" value="">

<input name="tVolume" id="tVolume" type="text" value="">

</form>

<script>

f=(function (){

var grd_naz = document.getElementById("grdnaz").value;

var cost_min, tWes, tVolume;

var d = document;





if(grd_naz==1) { document.getElementById("cost_min").value=500;  d.getElementById("tWes").value=3.5;  d.getElementById("tVolume").value=900; }

if(grd_naz==2) { document.getElementById("cost_min").value=1300; d.getElementById("tWes").value=2.5;  d.getElementById("tVolume").value=700; }



if(grd_naz==1) document.getElementById("cost_min").value=500;

if(grd_naz==2) document.getElementById("cost_min").value=52;

if(grd_naz==3) document.getElementById("cost_min").value=51;

if(grd_naz==4) document.getElementById("cost_min").value=500;

if(grd_naz==5) document.getElementById("cost_min").value=1300;

if(grd_naz==6) document.getElementById("cost_min").value=1300;

if(grd_naz==7) document.getElementById("cost_min").value=1300;

 

document.forms['calcForm'].elements['grdnaz'].fireEvent('change');

});

</script>
IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#7

Почитайте про switch/case на досуге

Timotty:
Ввёл переменную var d = document; программисты народ ленивый

и про $ (jquery, например)

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
alexj69
На сайте с 05.06.2007
Offline
88
alexj69
#8

Спасибо Timotty, направил на путь истинный))) Хотя пришлось немного изменить код, потому что компонент калькулятора FormCalc (для него и нужен был код) почему-то заменял фигурные скобки спанами. В итоге получилось вот такая конструкция: 

f=(function (){

var grd_naz = document.getElementById("grdnaz").value;

var cost_min, tWes, tVolume;

if(grd_naz==1) document.getElementById("cost_min").value=500;

if(grd_naz==2) document.getElementById("cost_min").value=500;

if(grd_naz==3) document.getElementById("cost_min").value=500;

if(grd_naz==4) document.getElementById("cost_min").value=500;

if(grd_naz==5) document.getElementById("cost_min").value=500;

if(grd_naz==6) document.getElementById("cost_min").value=500;

if(grd_naz==7) document.getElementById("cost_min").value=500;



if(grd_naz==1) document.getElementById("tWes").value=5.7;

if(grd_naz==2) document.getElementById("tWes").value=6.9;

if(grd_naz==3) document.getElementById("tWes").value=4.9;

if(grd_naz==4) document.getElementById("tWes").value=6.9;

if(grd_naz==5) document.getElementById("tWes").value=6;

if(grd_naz==6) document.getElementById("tWes").value=6.6;

if(grd_naz==7) document.getElementById("tWes").value=4;



if(grd_naz==1) document.getElementById("tVolume").value=1298;

if(grd_naz==2) document.getElementById("tVolume").value=1584;

if(grd_naz==3) document.getElementById("tVolume").value=1100;

if(grd_naz==4) document.getElementById("tVolume").value=1584;

if(grd_naz==5) document.getElementById("tVolume").value=1364;

if(grd_naz==6) document.getElementById("tVolume").value=1474;

if(grd_naz==7) document.getElementById("tVolume").value=902;

 

document.forms['calcForm'].elements['grdnaz'].fireEvent('change');

});

Калькулятор работает, но хотелось бы его еще усовершенствовать. Сейчас стоимость рассчитывается по фиксированному тарифу, а хотелось бы, чтобы тариф изменялся в зависимости от введенных пользователем веса и объема. Нужно ввести коэффициенты:

-в зависимости от веса: до 500 кг- 1.08; до 800 кг - 1.007; до 1500 кг - 1; до 3000 кг - 0.95; более 3000 кг - 0.833

-в зависимости от объема: до 2,5 - 1.055; до 4 - 1; до 7,5 - 0.965; до 15 - 0.92; более 15 - 0.907

и так же вывести отображение этих коэффициентов в инпуты. Если не сложно, подскажите как это сделать.

окупить хостинг книжного сайта? Нужна помощь web-программиста Вылет из индекса. Остаеться
C
На сайте с 04.02.2005
Offline
291
Chukcha
#9

а если value запихнуть в options

<options value="500|5.7|1298>Что-то</option>

То эти длинные if не нужны

var grd_naz = document.getElementById("grdnaz").value;

var value = grd_naz.split('|');

document.getElementById("cost_min").value=value[0];

document.getElementById("tWes").value =value[1];

document.getElementById("tVolume").value = value[2];

А для веса и объема свои селекты с уже готовыми value в options

Как на jquery присвоить Формы. Изменение значений в Выбор PHP-обработчика в зависимостит
alexj69
На сайте с 05.06.2007
Offline
88
alexj69
#10

Спасибо, так код реально меньше. А вот сделать селекты для веса и объема не вариант, т.к эти значения в пределах от 10 до 3000 кг. Даже если сделать шаг в 10 кг, то представляете какой огромный селект получится))))

Вордпресс: Как масово удалить Криворукие клиенты как исправить Вывести записи с БД
12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий