Здравствуйте!
Ситуация следующая: Есть форма в которой указана цена и количество для заказа, в поле количества встроена функция для изменения цены в зависимости от количества:
<span style='font-size: 14px; text-decoration:line-through; color:red;margin-top: -10px;'>135.20 руб</span>
<span class='label label label-success' style='background-color: #24C90E;margin-top: 10px;font-size: 20px; margin-right:-70px;padding: 5px;'><span style='font-size: 15px;'>Цена:</span><span id='fck_prc'> 96.00 </span><span style='font-size: 15px;'>руб</span></span>
<form method='post' action='' class='jcart'>
<input type='hidden' name='jcartToken' value='ddef2310847aa98aa2016567e8a1c1af' />
<input type='hidden' name='my_item_id' value='59551' />
<input type='hidden' name='my_item_name' value='Lexy 20 пена монтажная всесезонная' />
<input type='hidden' id='prc_b' name='my_item_price' value='116.43' />
<div class='input-prepend input-append' style='margin-top: 10px;'>
<span class='add-on btn-primary'>Купить</span>
<span class='add-on'>Кол-во:</span><input id='appendedPrependedInput' onclick='ChangePrice()' name='my_item_qty' size='4' type='number' value='120' style='width:40px;'><span class='add-on'>шт.</span>
<input class='btn btn-success' type='submit' name='my_add_button' style='float:right;padding: 4px 4px 4px 6px;' value='В корзину'/>
</div></form></div></div>
А также имеется радиогруппа:
<div class='btn-group' data-toggle='buttons-radio' style='margin-left: 54.5%;'><button type='button' id='36' class='btn'><span class='label label-inverse'><small>до 36 шт.</small></span><br>116.43 руб.</button><button type='button' id='36120' class='btn'><span class='label label-inverse'><small>от 36 до 120 шт.</small></span><br>110.00 руб.</button><button type='button' id='120' class='btn'><span class='label label-inverse'><small>от 120 шт.</small></span><br>96.00 руб.</button>
</div>
Вот функция:
function ChangePrice(){
var temp_var = document.getElementById("appendedPrependedInput").value;
if(temp_var > 35 & temp_var < 120)
{
document.getElementById("prc_b").value = '<? echo $prc['price_2']; ?>';
document.getElementById("fck_prc").innerHTML = ' <? echo $prc['price_2']; ?> ';
document.getElementById("36120").class = 'btn active btn-success';
}else if(temp_var > 119)
{
document.getElementById("prc_b").value = '<? echo $prc['price_3']; ?>';
document.getElementById("fck_prc").innerHTML = ' <? echo $prc['price_3']; ?> ';
document.getElementById("120").class = 'btn active btn-success';
}else if(temp_var < 36)
{
document.getElementById("prc_b").value = '<? echo $prc['price']; ?>';
document.getElementById("fck_prc").innerHTML = ' <? echo $prc['price']; ?> ';
document.getElementById("36").class = 'btn active btn-success';
}
}
Вопрос: Не могу сообразить как сделать, чтобы при изменении количества и цены присваивать соответствующей радиокнопке в вышеуказанной радиогруппе класс 'btn active btn-success' чтобы показать действующую цену. Попытался реализовать(document.getElementById("36").class = 'btn active btn-success';), не работает, в чём дело не понимаю.
Реализовано тут: http://yarfeliks.ru/tytan_view.php?id=2
И если знаете подскажите как сделать, чтобы изменение цены происходило "налету" - при воде количества, а то изменения происходят только по мере нажатия на клавиши уменьшения и увилечения, а Mozilla их не отображает.
document.getElementById("36").class = "..."
иdocument.getElementById("36").className = "..."
, почитайте тут: learn.javascript.ru/styles-and-classes