Как оформить заявку товаров?
 

Здравствуйте.
Есть такой вот код:

<div style="width: 400px;">     
<p>Выбираем цвет стола</p>
<table>
	<tr>
		<td><img src="/images/venge.jpg" class="material"></td>
		<td><span>Венге</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать"></td>
	</tr>
	<tr>
		<td><img src="/images/orekh.jpg" class="material"></td>
		<td><span>Орех гварнери</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать"></td>
	</tr>
	<tr>
		<td><img src="/images/klen.jpg" class="material"></td>
		<td><span>Клен медисон</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать"></td>
	</tr>
</table>
<div id="zayavka"></div><input type="button" value="Оформить заявку"><br>
<input type="checkbox" name="sborka"> <span style="font-size: 16px; font-weight: 400;">Сборка специалистом нашего интернет-магазина</span>
	</div>

Как реализовать следующий функционал: Пользователь вводит количество товара, жмет заказать, опа - появилась строка с таким заказом снизу, пользователь выбрал еще другого товара столько-то штук, нажал заказать - опа еще строка добавилась. Принцип корзины товаров, только тут же на странице. Все добавляться должно в блок <div id="zayavka"></div>.
В итоге, пользователь жмет Оформить заказ и открывается окно с обратной связью, где нужно ввести имя телефон и адрес, а параметры заказа уже передались туда в фоне.

Batyabest,

<div style="width: 400px;">     
<p>Выбираем цвет стола</p>
<table id="data">
	<tr>
		<td><img src="/images/venge.jpg" class="material"></td>
		<td><span>Венге</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать"></td>
	</tr>
	<tr>
		<td><img src="/images/orekh.jpg" class="material"></td>
		<td><span>Орех гварнери</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать"></td>
	</tr>
	<tr>
		<td><img src="/images/klen.jpg" class="material"></td>
		<td><span>Клен медисон</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать"></td>
	</tr>
</table>
<div id="zayavka"></div><input type="button" value="Оформить заявку"><br>
<input type="checkbox" name="sborka"> <span style="font-size: 16px; font-weight: 400;">Сборка специалистом нашего интернет-магазина</span>
	</div>
<script>
var d = document;
window.onload = function () {
	d.getElementById("data").onclick = function(e) {
		var target = e && e.target || event.srcElement;
		if (target.type == "button" && target.value == "Заказать") {
			var value = target.previousSibling.value;
			//alert(target.parentNode.previousSibling.previousSibling.childNodes[0].childNodes[0].nodeValue);
			var ua = navigator.userAgent;
			var elm = ua.search(/MSIE/) > -1 ? target.parentNode.previousSibling.childNodes[0].nodeValue : target.parentNode.previousSibling.previousSibling.childNodes[0].childNodes[0].nodeValue;
			var div = d.createElement("div");
			var span = d.createElement("span");
			span.setAttribute("style", "color: red");
			span.appendChild(d.createTextNode(value));
			div.appendChild(d.createTextNode(elm+": "+value));
			//div.appendChild(span);
			var input = d.createElement("input");
			input.setAttribute("type", "button");
			input.setAttribute("value", "Отменить");
			input.onclick = function () { d.getElementById("zayavka").removeChild(this.parentNode); };
			div.appendChild(input);
			d.getElementById("zayavka").appendChild(div);
		}
	}
}
</script>

также можно при добавление в div можно связывать всю инфу с помощью объекта и тогда перед отправкой можно не бегать по новым div-ам для сбора необходимой инфы
метод window.open создаст новое окно браузера и вернет ссылку на него, с помощью которой можно управлять всем содержимым окна

А что-то не работает.

подправил

Спасибо, люкс. А как теперь мне на кнопку оформить заказ навесить это саме оформление. Просто все в форму завернуть? или есть тонкости?

Batyabest, по кнопке "Оформить" вам какие действия необходимо произвести? открыть форму в новом окне? открывайте с помощью window.open() (линк выше) страницу с формой и передавайте туда необходимые данные...

По кнопке Оформить заказа хотелось бы чтобы открывалась форма в модальном окне, в которой человек введет свои данные (имя, телефон и адрес) и их можно отправить на почту. И конечно же при нажатии на кнопку Оформить заказ, все данные, полученные на 1 шаге должны передаться в эту форму. Это мне кажется сложно сделать? Или нет?

по нажатию на кнопку собираете все данные из div zayavka, открываете новое окно (если вам нужно обязательно модальное, то нарисуйте свой div с формой или воспользуйтесь фишками jQuery), в которое загружаете страницу с формой; из основного окна подставляйте в соответствующие поля диалогового необходимые данные; submit-ом отправляйте на сервер на php-страницу (либо воспользуйтесь AJAX, также с помощью jQuery), откуда уже можете отправить email функцией mail() (может немного по другому называется; с php не работаю)...

также не забывайте проверять свои данные (на ваше усмотрение), например, нельзя заказывать дважды одно и то же; введенное кол-во товара является числом и т.п....

Спасибо за помощь, не могли бы подсказать про то как собирать данные из zayavka в форму?

Код немного изменил, как сделать так, чтобы считалась сумма заказа и можно было выбирать сборку для каждого товара отдельно в окошечке.

<p>Выбираем цвет стола</p>
<table id="data">
	<tr>
		<td><img src="/images/venge.jpg" class="material"></td>
		<td><span>Венге</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать" class='buttonsubmit'></td>
	</tr>
	<tr>
		<td><img src="/images/orekh.jpg" class="material"></td>
		<td><span>Орех гварнери</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать" class='buttonsubmit'></td>
	</tr>
	<tr>
		<td><img src="/images/klen.jpg" class="material"></td>
		<td><span>Клен медисон</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать" class='buttonsubmit'></td>
	</tr>
</table>
<input type="button" value="Оформить заявку стола-трансформера"><div id="zayavka"></div>
<br>
	</div>
<script>
var d = document;
window.onload = function () {
	d.getElementById("data").onclick = function(e) {
		var target = e && e.target || event.srcElement;
		if (target.type == "button" && target.value == "Заказать") {
			var value = target.previousSibling.value;
			//alert(target.parentNode.previousSibling.previousSibling.childNodes[0].childNodes[0].nodeValue);
			var ua = navigator.userAgent;
			var elm = ua.search(/MSIE/) > -1 ? target.parentNode.previousSibling.childNodes[0].nodeValue : target.parentNode.previousSibling.previousSibling.childNodes[0].childNodes[0].nodeValue;
			var div = d.createElement("div");
			var span = d.createElement("span");
			span.setAttribute("style", "color: red");
			span.appendChild(d.createTextNode(value));
			div.appendChild(d.createTextNode(elm+": "+value));
			//div.appendChild(span);
			var input = d.createElement("input");
			input.setAttribute("type", "button");
			input.setAttribute("value", "Отменить");
			input.onclick = function () { d.getElementById("zayavka").removeChild(this.parentNode); };
			div.appendChild(input);
			d.getElementById("zayavka").appendChild(div);
		}
	}
}
</script>
<p><b><span style="color: blue">Услуги по доставке</span></b></p>
<p><input type="radio" name="dostavka" value="Нижний Новгород (нижняя часть города) в течение 5 дней"><span> г. Нижний Новгород (нижняя часть города) в течение 5 дней 300 руб.</span><br>
<p><input type="radio" name="dostavka" value="г. Нижний Новгород (верхняя часть города) в течение 5 дней"><span> г. Нижний Новгород (верхняя часть города) в течение 5 дней 400 руб.</span><br>
<p><input type="radio" name="dostavka" value="г. Нижний Новгород (верхняя и нижняя часть города) на следующий день после оформления"><span> г. Нижний Новгород, срочная (верхняя и нижняя часть города) на следующий день после оформления! 800 руб.</span><br>
<p><input type="radio" name="dostavka" value="Нижегородская область до 30 км. в течение 5 дней"><span> Нижегородская область до 30 км. в течение 5 дней 1500 руб.</span><br>
<p><input type="radio" name="dostavka" value="За пределами Н.Новгорода от 30 км. (на круг) 14 руб./км"><span> За пределами Н.Новгорода от 30 км. (на круг) 14 руб./км</span><br>
<p><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>
<p><input type="radio" name="podyem">
<span> Подъем стола-транформера в квартиру 100 руб./этаж на </span><input type="text" name="etazh" size=3><br>
<p><input type="radio" name="podyem"><span> Подъем стола-транформера на лифте</span><br>

Распишу более подробно.
По нажатии на кнопке Заказать Снизу появляется заказ по строкам. Это реализовано благодаря уважаемому lord2kim. Нужно еще, чтобы была строка с общей стоимостью заказа. Также одновременно с этим появлялся <span>Сборка <input type="text" name="quantity" size="5"></span> для того, чтобы пользователь мог напротив каждого заказа вписать количество. именно напротив каждого заказа. Потому что товаров могут заказать несколько, а сборку - одну.
Соответсвенно, нужно чтобы радио кнопки параметров доставки и все параметры подъема на этаж также суммировались в общую стоимость заказа. И по кнопке "Оформить заказ" открывалось модальное окно с обратной связью. Кстати, трудно сделать модальное окно? Или проще перенаправить на другую страницу с передачей всех вышесобранных параметров?