При добавлении элемента стираются значения в инпуте
 

Здравствуйте. Вопрос по нативному js:

Есть контейнер:
Нужно в него добавлять товары по нажатию на кнопку. Но при каждом нажатии на кнопку поля input обнуляются до дифолтных. Как мне сделать чтобы не обнулялись? Я это делаю так:

Html:

<div class = 'product_list' id = 'product_list'></div>
<input type="submit" value="Новый товар" onclick = 'add_newProduct ()'>

JS:

var productListObj = document.getElementById('product_list');
var productNumber = 0;

function add_newProduct ()
{
	productNumber = productNumber + 1;

	var NewProduct = "<div class = 'product'> \
			<div class = 'number'>"+productNumber+".</div><textarea id='product_name"+productNumber+"'>Название по дифолту</textarea> \
			<div class = 'product_parameters'> \
				<input type='text' value='0' id = 'price"+productNumber+"'> \
			</div> \
		</div>";

	productListObj.innerHTML = productListObj.innerHTML + NewProduct;
}

input type="submit" - речь о форме?

Нет. Формы не использую, submit - просто как кнопка на которую кликаю и вызывается "add_newProduct ()"

Если не форма значит type="button".

А насчет полей, так они не обнуляются, а так и добавляются - <input type='text' value='0' ...

Да, но если я в них что-то напишу и потом нажму на кнопку то они обнулятся и value снова будет = 0

Вы что хотите сделать - корзину товаров или что?
Если корзина, то причем тут input и textarea да еще вне формы?

Я хочу что-то типо калькулятора сделать. По кнопке "добавить товар" я накидываю шаблоны товаров и параллельно заполняю поля. Потом нажму на кнопку рассчитать и будет происходить расчет.

Откуда "накидываете" да еще параллельно заполняя?

К примеру ваши пользователи выбирают товары на странице. Они где, скрыты и их надо "выковырять и накидать"? Наверное же они уже на странице. А при каждом выборе нужно просто пробежаться по выбранным и просчитать. Зачем для этого какой-то html-код во что-то помещать?

Вот это понятно, а что вы творите не понимаю.

Я прошу прощение, что делаю ссылку на другой ресурс, может быть на форуме так нельзя. Я быстро на бесплатном домене набросал как я сделал без лишнего.
Например прихожу я в магазин, беру товары и в эту форму заполняю. Взял новый товар, нажал на кнопку "добавить шаблон товара", записал что взял Молоко за 70 рублей в количестве 5 штук. Потом я иду и беру пачку риса. Когда я жму на "добавить шаблон товара" у меня сбрасывается всё.

ссылка: http://crenom.eu.pn
Чтобы посмотреть на скрипт: .../script.js

Уважаемый, то о чем вы говорите называется корзиной.

Приходя в магазин вы может выбрать "расфасованный" товар или же просить "взвесить/отрезать" товара. Другими словами покупателю не нужно писать на листочках ни название товара, ни его стоимость, это забота магазина. И товар вы берете с прилавка.

А то что вы делаете, этому даже и названия нет - хрен знает что за товар, хрен знает какая его цена... покупатель написал, покупатель же назначил цену, так что-ли, ну что за хрень?

Допустим я хочу прикинуть стоимость своей корзины в процессе того как я в нём набираю товары, потому что у меня ограниченное кол-во денег.

Но мне надо просто сделать чтобы сохранялись значения в инсертах после нажатия на "добавить шаблон товара"

Какой шаблон?

Вы в настоящем магазине были, действие покупателя в котором описывали, или это вам родители рассказывали? :)

Товары в магазине вы где выбираете: а) на прилавке; б) вас допускают на склад?

У нормальных магазинов это а), а вот то о чем вы речь ведете, это уже не нормально, из области фантастики - б).

В интернет магазине товары также сразу на прилавке (странице), а вот склад, это база товаров на сервере.

В реальном магазине вы кладете товар в тележку и просчитывается стоимость их в уме. В интернет магазине это корзина, в которую помещается идентификатор товара и его количество которое вводится в поле формы. Стоимость набранного сразу же просчитывается и выводится в кратком представлении - всего товаров и их общая сумма.

Если же надо перед покупкой что-то изменить в корзине, вот тогда выводится полная информация о ней, где можно изменить количество товаров, удалить товар, вообще очистить корзину.

Сама корзина может быть на сервере (сессия или в базе) или на клиенте (куки или локальное хранилище).

Покупка набранного товара в интернет магазине, это оправка формы серверу, либо как есть, либо асинхронным запросом.

Сервер получает не "инсерты", а данные формы - идентификаторы товаров и их количество, другую информацию о выбранных товарах сервер знает и без клиента.

А теперь поясните что вы делаете.

Я про реальный магазин.
>В реальном магазине вы кладете товар в тележку и просчитывается стоимость их в уме.
Я делаю калькулятор, который поможет мне не считать стоимость в уме.

У вас не магазин, а не понять что, все в куче поля ввода которые добавляют, не понять какие товары откуда-то берутся по кнопке, шаблоны.... в общем все в куче, а что к чему не понять.

Так нахрена для просчета набранного нужно совать поля ввода формы во что-то? Для расчета набранного нужно отслеживать изменения полей формы, в которых пользователь указывает количество товара. По этому событию автоматически и производится расчет.

Подскажите, пожалуйста, на примере как это сделать? И как сделать чтобы у меня всё не обнулилось, если я нажму на кнопку "добавить шаблон товара".

Я добавил на тот бесплатный хостинг кнопку рассчитать. Я могу добавить событие онблюр, которое будет рассчитывать, но всё равно если я нажму на кнопку "добавить шаблон товара" всё обнулится. Меня интересует именно как сделать чтобы не обнулялись инпуты
Я подозреваю, что вот так делать нельзя "productListObj.innerHTML = productListObj.innerHTML + NewProduct;", но как правильно я не знаю

Я не знаю чем вам помочь, потому как не понимаю, что такое "добавить шаблон товара" в рамках интернет магазина. Это что-то за гранью понимания.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> 
$(function() {
    $('form').on('input', function() {
        var c = t = 0;
        $.each(this.elements, function() {
            if($.trim(this.value)) {
                c += +this.value;
                t += this.value * $(this).data('price')
            }
        });
        $('#count').text(c);
        $('#total').text(t); 
    })
});
</script> 
</head>
<body>
<form>
<div>
<h5>Корзина</h5>
<p>Товаров: <span id="count">0</span> шт.</p>
<p>Сумма: <span id="total">0</span> руб.</p>
</div>
<div><h4>Бублики</h4>
<p>Цена 50 руб.</p>
<input name="product[12]" data-price="50" />
</div>
<div><h4>Коржики</h4>
<p>Цена 100 руб.</p>
<input name="product[45]" data-price="100" />
</div>
</form>
</body>
</html>

Вот так в упрощенном представлении торгуют магазины.

Пожалуйста абстрагируйтесь от интернет магазина. Нету никакого интернет магазина. Есть пятёрочка. Я туда пришел с телефоном. На нём открыт сайт, который калькулятор. Я знаю что куплю 2 товара там точно "бублики и коржики". Но я не знаю что захочу купить ещё. В вашем примере я жёстко завязан на бубликах и коржиках. Но я вдруг захотел ещё и сушки, например.

Кнопка "шаблон товара" это я так для понимания назвал. Просто она добавляет пустой шаблон, который надо заполнить.

За ваше терпение вам спасибо ОГРОМНОЕ!

То есть вы хотите сказать, что я как покупатель должен знать весь перечь товаров и их цену у Пятерочки, чтобы купить что-то?

Crenom,
Чтобы добавленные элементы HTML корректно работали, их нужно правильно создавать
Добавление и удаление узлов

Crenom,
В телефоне есть калькулятор