Обновление значений в документе по нажатию кнопки
Здравствуйте.
По нажатию внопки добавляется динамически блок с определенным содержимым. Как сделать чтобы при повторном нажатии кнопки содержимое обновлялось а не добавлялось еще раз? 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, время: 18:01. |