Обновление значений в документе по нажатию кнопки
Здравствуйте.
По нажатию внопки добавляется динамически блок с определенным содержимым. Как сделать чтобы при повторном нажатии кнопки содержимое обновлялось а не добавлялось еще раз?
function someFunc(){
var quantity = document.getElementById("quantity").value; // Объявляем переменную равную значению введенному в поле количество
function empty_form ()
{
var quantity = document.getElementById('quantity').value;
if(quantity == '')
{
alert('Вы забыли ввести текст.');
return false;
}
return true;
}
var price = quantity * 9000; // Объявляем переменную равную общей стоимости (кол-во * цену одного товара)
var tovar = document.getElementsByTagName('span')[0].innerHTML; // Получаем доступ к содержимому элемента <span> с названием цвета товара
var totalprice = price;
var div = document.createElement("div"); // Создаем элемент div
div.innerHTML = "<h3>Ваша заявка:<\/h3>\n <p>"+tovar+" "+price+" руб.</p>\n <p>Итого: "+totalprice+" руб.</p>"; // Наполняем созданный div содержанием с подстановкой значения price
document.getElementById("zayavka").appendChild(div); // Все вкладывается в <div id=zayavka></div>
return false;
//alert(tovar);
}
<form> <table id="zakazTable"> <tr> <td><span>Венге</span></td> <td> <input type="text" value="" id="quantity" > <input type="button" value="Заказать" id="zakazat" onclick="someFunc()"> </td> </tr> </table> <div id="zayavka"></div> </form> |
Вместо создания div'а сразу устанавливай zayavka.innerHTML .
Таким образом при каждом вызове будет перетираться содержимое div#zayavka |
Спасибо, получилось!!!
Теперь я хочу добавить товаров в форму (из планируется 3 штуки). Делаю разметку такой: <form> <table id="zakazTable"> <tr> <td><span>Венге</span></td> <td> <input type="text" value="" id="quantity"> <input type="button" value="Заказать" id="zakazat" onclick="someFunc()"> </td> </tr> <tr> <td><span>Орех гварнери</span></td> <td> <input type="text" value="" id="quantity"> <input type="button" value="Заказать" id="zakazat" onclick="someFunc()"> </td> </tr> <tr> <td><span>Клен медисон</span></td> <td> <input type="text" value="" id="quantity"> <input type="button" value="Заказать" id="zakazat" onclick="someFunc()"> </td> </tr> </table> <div id="zayavka"></div> </form> Код JS согласно внесенным изменениям:
function someFunc(){
var quantity = document.getElementById("quantity").value; // Объявляем переменную равную значению введенному в поле количество
var price = quantity * 9000; // Объявляем переменную равную общей стоимости (кол-во * цену одного товара)
var tovar = document.getElementsByTagName('span')[0].innerHTML; // Получаем доступ к содержимому элемента <span> с названием цвета товара
var totalprice = price;
document.getElementById("zayavka").innerHTML = "<h3>Ваша заявка:<\/h3>\n <p>"+tovar+" "+price+" руб.</p>\n <p>Итого: "+totalprice+" руб.</p>";;
//var div = document.createElement("div"); // Создаем элемент div
//div.innerHTML = "<h3>Ваша заявка:<\/h3>\n <p>"+tovar+" "+price+" руб.</p>\n <p>Итого: "+totalprice+" руб.</p>"; // Наполняем созданный div содержанием с подстановкой значения price
// Все вкладывается в <div id=zayavka></div>
return false;
//alert(tovar);
}
проблема в том, что теперь по нажатию Заказать у 2 или 3 товара, функция не срабатывает либо отрабатывает значение первого товара. В чем может быть проблема? |
Batyabest, для начала попровьте id-ентификаторы...это индивидуальные значения для каждого элемента в пределах одной html-страницы...
а у вас 3 элемента c id = quantity (про элементы zakazat молчу...) |
<p><b><span style="color: blue">Услуги по доставке</span></b></p> <input type="radio" name="dostavka" value="Нижний Новгород (нижняя часть города) в течение 5 дней"><span> г. Нижний Новгород (нижняя часть города) в течение 5 дней 300 руб.</span><br> <input type="radio" name="dostavka" value="г. Нижний Новгород (верхняя часть города) в течение 5 дней"><span> г. Нижний Новгород (верхняя часть города) в течение 5 дней 400 руб.</span><br> <input type="radio" name="dostavka" value="г. Нижний Новгород (верхняя и нижняя часть города) на следующий день после оформления"><span> г. Нижний Новгород, срочная (верхняя и нижняя часть города) на следующий день после оформления! 800 руб.</span><br> <input type="radio" name="dostavka" value="Нижегородская область до 30 км. в течение 5 дней"><span> Нижегородская область до 30 км. в течение 5 дней 1500 руб.</span><br> <input type="radio" name="dostavka" value="За пределами Н.Новгорода от 30 км. (на круг) 14 руб./км"><span> За пределами Н.Новгорода от 30 км. (на круг) 14 руб./км</span><br> <input type="radio" name="dostavka" value="Транспортной компанией"><span> Транспортной компанией: с тарифами доставки Вы можете ознакомится: <a href="http://www.pecom.ru/ru/calc/">ТК ПЭК</a>, <a href="http://www.dellin.ru/">ТК Деловые Линии</a>. Вес упаковки стола с механизмом составляет 40килограм.(2места). Вся мебель поставляется в разобранном виде в плоских упаковках.</span> <p><b><span style="color: blue">Услуги по подъему на этаж</span></b></p> <input type="radio" name="podyem"> <span> Подъем стола-транформера в квартиру 100 руб./этаж на </span><input type="text" name="etazh" size=3> <input type="radio" name="podyem"><span> Подъем стола-транформера на лифте</span> Добавил в разметку этот код. Мне нужно чтобы при выборе радио кнопок цена в заявке менялась "согласно тарифам")) А при выборе за пределами Нижнего Новгорода и Транспортной компанией - отображалось строкой в заяявке "мы уточним стоимость". Ну и чтобы поле введенное в этаж пересчитаалос с общим количеством и умножалось на цену и также добавлялось в заявку и в Итого. Помогите решить проблему... |
Batyabest,
<script>
var d = document, amount, lift, price_floor = 100;
window.onload = function () {
d.getElementById("main").onclick = function (e) {
var target = e && e.target || event.srcElement;
if (target.tagName == "INPUT" && target.name == "podyem") return summ();
if (target.tagName == "INPUT" && target.name == "dostavka") {
amount = target.value;
}
summ();
};
d.getElementById("etazh").onkeyup = function () {
lift = parseInt(d.getElementById("etazh").value);
summ();
};
}
function summ() {
d.getElementById("clarify").style.display = amount == 0 ? "block" : "none";
d.getElementById("delivery").innerHTML = amount == undefined ? 0 : amount;
d.getElementById("lifting").innerHTML = (d.getElementById("wo_lift").checked ? parseInt(lift) : 0)+" * "+price_floor;
d.getElementById("sum").innerHTML = parseInt((amount == undefined ? 0 : amount)) + parseInt((d.getElementById("wo_lift").checked ? (lift == undefined ? 0 : lift) : 0))*price_floor;
}
</script>
<div id="main">
<p><b><span style="color: blue">Услуги по доставке</span></b></p>
<input type="radio" name="dostavka" value="300"><span> г. Нижний Новгород (нижняя часть города) в течение 5 дней 300 руб.</span><br>
<input type="radio" name="dostavka" value="400"><span> г. Нижний Новгород (верхняя часть города) в течение 5 дней 400 руб.</span><br>
<input type="radio" name="dostavka" value="800"><span> г. Нижний Новгород, срочная (верхняя и нижняя часть города) на следующий день после оформления! 800 руб.</span><br>
<input type="radio" name="dostavka" value="1500"><span> Нижегородская область до 30 км. в течение 5 дней 1500 руб.</span><br>
<input type="radio" name="dostavka" value="0"><span> За пределами Н.Новгорода от 30 км. (на круг) 14 руб./км</span><br>
<input type="radio" name="dostavka" value="0"><span> Транспортной компанией: с тарифами доставки Вы можете ознакомится: <a href="http://www.pecom.ru/ru/calc/">ТК ПЭК</a>, <a href="http://www.dellin.ru/">ТК Деловые Линии</a>. Вес упаковки стола с механизмом составляет 40килограм.(2места). Вся мебель поставляется в разобранном виде в плоских упаковках.</span>
<p><b><span style="color: blue">Услуги по подъему на этаж</span></b></p>
<input type="radio" name="podyem" id="wo_lift">
<span> Подъем стола-транформера в квартиру 100 руб./этаж на </span><input type="text" id="etazh" size=3>
<input type="radio" name="podyem"><span> Подъем стола-транформера на лифте</span><br>
<span>Итого: доставка <span id="delivery">0</span> + подъем <span id="lifting">0 * 100</span> = <span id="sum">0</span> <span id="clarify" style="display: none;">мы уточним точную стоимость</span></span></div>
P.S.: зря плодите море тем... |
Я хотел достучаться до Вас в личку. Уж больно Вы мне хорошо помогаете. Не скинете свои координаты?
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 04:20. |