Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Обновление значений в документе по нажатию кнопки (https://javascript.ru/forum/events/43518-obnovlenie-znachenijj-v-dokumente-po-nazhatiyu-knopki.html)

Batyabest 08.12.2013 21:59

Обновление значений в документе по нажатию кнопки
 
Здравствуйте.
По нажатию внопки добавляется динамически блок с определенным содержимым. Как сделать чтобы при повторном нажатии кнопки содержимое обновлялось а не добавлялось еще раз?

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>

danik.js 09.12.2013 04:20

Вместо создания div'а сразу устанавливай zayavka.innerHTML .
Таким образом при каждом вызове будет перетираться содержимое div#zayavka

Batyabest 09.12.2013 10:15

Спасибо, получилось!!!
Теперь я хочу добавить товаров в форму (из планируется 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 товара, функция не срабатывает либо отрабатывает значение первого товара. В чем может быть проблема?

lord2kim 09.12.2013 15:30

Batyabest, для начала попровьте id-ентификаторы...это индивидуальные значения для каждого элемента в пределах одной html-страницы...
а у вас 3 элемента c id = quantity (про элементы zakazat молчу...)

Batyabest 10.12.2013 14:04

<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>


Добавил в разметку этот код. Мне нужно чтобы при выборе радио кнопок цена в заявке менялась "согласно тарифам")) А при выборе за пределами Нижнего Новгорода и Транспортной компанией - отображалось строкой в заяявке "мы уточним стоимость". Ну и чтобы поле введенное в этаж пересчитаалос с общим количеством и умножалось на цену и также добавлялось в заявку и в Итого.

Помогите решить проблему...

lord2kim 10.12.2013 16:33

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>&nbsp;+&nbsp;подъем <span id="lifting">0 * 100</span>&nbsp;=&nbsp;<span id="sum">0</span>&nbsp;<span id="clarify" style="display: none;">мы уточним точную стоимость</span></span></div>


P.S.: зря плодите море тем...

Batyabest 10.12.2013 20:21

Я хотел достучаться до Вас в личку. Уж больно Вы мне хорошо помогаете. Не скинете свои координаты?

danik.js 10.12.2013 23:33

Цитата:

Сообщение от Batyabest
Я хотел достучаться до Вас в личку. Уж больно Вы мне хорошо помогаете. Не скинете свои координаты?

Перефразирую:

Цитата:

Вы мне хорошо помогаете. Я думаю вы должны помогать мне еще больше. Не скинете свои координаты?

lord2kim 10.12.2013 23:43

Цитата:

Сообщение от danik.js (Сообщение 285896)
Перефразирую:

)))

Batyabest 11.12.2013 19:24

Цитата:

Сообщение от danik.js (Сообщение 285896)
Перефразирую:

:lol: :lol: :lol:


Часовой пояс GMT +3, время: 15:46.