Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Поле ввода количества с кнопками больше-меньше (https://javascript.ru/forum/events/44193-pole-vvoda-kolichestva-s-knopkami-bolshe-menshe.html)

Batyabest 10.01.2014 17:19

Поле ввода количества с кнопками больше-меньше
 
Здравствуйте.
Нужно сделать поле ввода количества с возможностью набирать количество кнопками рядом с полем.
Пример на этой странице.
Подскажите в какую сторону думать?

Vlasenko Fedor 10.01.2014 17:22

http://fiddle.jshell.net/vlasenkofedor/chKLh/

kostyanet 10.01.2014 17:58

Цитата:

Сообщение от Batyabest
Подскажите в какую сторону думать?

Думать в сторону тех, у кого кроме пальца мыши нет.

Batyabest 10.01.2014 17:59

Poznakomlus, А как оттуда код скопировать?

Batyabest 10.01.2014 18:00

Цитата:

Сообщение от kostyanet (Сообщение 291480)
Думать в сторону тех, у кого кроме пальца мыши нет.

Вы, простите, о чем?

kostyanet 10.01.2014 18:08

Копировать оттуда по частям.

Я о том, что такие свистелки не имеют смысла. А для тех кто без мыши вообще бесполезны.

kostyanet 10.01.2014 18:12

Ну да, понятно, тот сайт сделан по канонам начала 2000х.

Batyabest 10.01.2014 18:15

Цитата:

Сообщение от kostyanet (Сообщение 291490)
Ну да, понятно, тот сайт сделан по канонам начала 2000х.

Вы, наверное, правы, но это не моя прихоть. Мне лишь нужно сделать.

Vlasenko Fedor 10.01.2014 18:29

Что за спор а драки нет?
Я вам привел актуальное и лучшее решение на данный момент(Свое :victory: ). (Оформление можете сами поправить)
Если вы глянете большинство магазинов, то там +- прописывают функцию прямо в input тем самым засоряя html разметку.

kostyanet 11.01.2014 04:50

На ebay тоже?

Я имею ввиду эту прихоть на фоне похоти: купить все равно ничего нельзя на сайте в домене ru. Сайт с примером из другого домена. Но все равно повторяющиеся бесконечно одинаковые элементы засоряют глаз. Особенно на том же самом фоне могут впечатлить жирные красные кнопки "Купить" внутри каждой тумбы.

Переносите стрелки в активный инпут на лету или добавьте события на клаву: стрелка вверх/стрелка вниз для -1/+1 соответственно. С шифтом +/-10. Впрочем, у тех кто без мыши и клавы-то нет. Как они вообще покупают ума не приложу.

Ну и главное это отсутствие того самого смысла. Вы же не будете 45 раз нажимать плюсик мышой чтобы заказать 45 бутылок воды. Стало быть стрелочки кагбэ намекают что много заказывать не надо и вообще много не заказывают. От силы 3 тире 4.

Batyabest 11.01.2014 09:34

Цитата:

Сообщение от Poznakomlus (Сообщение 291498)
Что за спор а драки нет?
Я вам привел актуальное и лучшее решение на данный момент(Свое :victory: ). (Оформление можете сами поправить)
Если вы глянете большинство магазинов, то там +- прописывают функцию прямо в input тем самым засоряя html разметку.

Прикрепил Ваше решение с своему сайту и у меня перестали добавляться в заказ как положено. Не могу разобраться почему.

<table id="data">
	<tr>
		<td><img src="/images/venge.jpg" class="material"></td>
		<td><span>Венге</span></td>
		<td><div class="podbor"><input type="text" name="quantity" value="0" size="5"><span class="plus"></span><span class="minus"></span></div><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="0" 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>
<div id="zayavka" class='b1c-name'></div>
<br>
<!-- <input type="checkbox" name="sborka"> <span style="font-size: 16px; font-weight: 400;">Сборка специалистом нашего интернет-магазина</span> -->
	</div>
	<span id='reqSborka' style='display:none;font-size:14px;font-weight:400;width:400px;'>
	<b><span style="color: blue">Количество столов под сборку?</span></b><br/>
	<input type="radio" name="sborka_radio" value='1'>
	<span> Вам нужна сборка стола(ов)? Укажите количество! </span><input type="text" name="stol_sborka_sum" size=3> Стоимость сборки одного стола - 1000 руб. <br>
	<input type="radio" name="sborka_radio" value='2'><span> Нет</span><br>
	</span>


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;
			var valueSupport = value||1;
			//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.setAttribute("style","width:500px");
			div.appendChild(d.createTextNode(elm+": "+valueSupport+" шт. на сумму: "+valueSupport*9000+" руб."));
			//div.appendChild(span);
			var input = d.createElement("input");
			input.setAttribute("type", "button");
			input.setAttribute("value", "Отменить");
			input.setAttribute("alt",valueSupport*9000);
			sumOfItem+=parseInt(valueSupport);
			input.onclick = function () {deletElementResultSum(this); d.getElementById("zayavka").removeChild(this.parentNode); };
			div.appendChild(input);
			d.getElementById("zayavka").appendChild(div);
		}
	}
}


<p><b><span style="color: blue">Услуги по доставке</span></b></p>
<p><input type="radio" name="dostavka" value="300"><span> г. Нижний Новгород (нижняя часть города) в течение 5 дней 300 руб.</span><br>
<p><input type="radio" name="dostavka" value="400"><span> г. Нижний Новгород (верхняя часть города) в течение 5 дней 400 руб.</span><br>
<p><input type="radio" name="dostavka" value="800"><span> г. Нижний Новгород, срочная (верхняя и нижняя часть города) на следующий день после оформления! 800 руб.</span><br>
<p><input type="radio" name="dostavka" value="1500"><span> Нижегородская область до 30 км. в течение 5 дней 1500 руб.</span><br>
<p><input type="radio" name="dostavka" value="0"><span> За пределами Н.Новгорода от 30 км. (на круг) 14 руб./км</span><br>
<p><input type="radio" name="dostavka" value="0"><span> Транспортной компанией: с тарифами доставки Вы можете  ознакомится:  <a href="http://www.pecom.ru/ru/calc/">ТК ПЭК</a>, <a href="http://www.dellin.ru/">ТК Деловые Линии</a>, <a href="http://www.ae5000.ru/">Автотрейдинг</a>. Вес упаковки стола с механизмом составляет 40 килограмм (2места). Вся мебель поставляется в разобранном виде в плоских упаковках.</span>
<p><b><span style="color: blue">Услуги по подъему на этаж</span></b></p>
<p><input type="radio" name="podyem" value='1'>
<span> Подъем стола-транформера в квартиру 100 руб./этаж на </span><input type="text" name="etazh" size=3> (укажите этаж)<br>
<p><input type="radio" name="podyem" value='2'><span> Подъем стола-транформера с лифтом 100 руб. 1 штука.</span><br>
<p>&nbsp;</p>
<div style="font-weight:bold;">
<span id='resultBlock' hidden>Итого:<span id='resultSum'></span> р.</span></div>
<input type="button" class="b1c" value="Оформить заявку стола-трансформера" style="margin:0 400px;">


var resultBlock_js = document.getElementById('resultBlock');
var resultSum_js = document.getElementById('resultSum');
var reqSborka_js = document.getElementById('reqSborka');
var sumOfItem = 0;
var lastVarDostavka = 0;
var lastVarPodyem = 0;
var stateVarPodyem = 0;
var lastVarSborka = 0;
var stateVarSborka = 0;
var nowResultSum = 0;

jQuery('.buttonsubmit').click(function(){
	resultBlock_js.hidden = false;
	reqSborka_js.style.display = 'block';
	var addPrice = this.parentNode.firstChild.value;
	if(addPrice=='')
	{
		addPrice = 1;
	}
	nowResultSum +=addPrice*9000;
	resultSum_js.innerHTML = nowResultSum;
});

jQuery('input[name=dostavka]').click(function(){
	nowResultSum -=lastVarDostavka;
	lastVarDostavka = parseInt(this.value);
	nowResultSum+=lastVarDostavka;
	resultSum_js.innerHTML = nowResultSum;
});

jQuery('input[name=podyem]').click(function(){
	nowResultSum -= lastVarPodyem;
	if(this.value=='1')
	{
		lastVarPodyem = document.getElementsByName('etazh')[0].value*100*sumOfItem;
		stateVarPodyem = 1;
	}
	else
	{
		stateVarPodyem = 0;
		lastVarPodyem = sumOfItem*100;
	}
	nowResultSum+=lastVarPodyem;
	resultSum_js.innerHTML = nowResultSum;
});

jQuery('input[name=etazh]').change(function(){
	if(stateVarPodyem == 1)
	{
		nowResultSum -= lastVarPodyem;
		lastVarPodyem = document.getElementsByName('etazh')[0].value*100*sumOfItem;
		nowResultSum+=lastVarPodyem;
		resultSum_js.innerHTML = nowResultSum;
	}
})

jQuery('input[name=sborka_radio]').click(function(){
	nowResultSum -= lastVarSborka;
	if(this.value=='1')
	{
		lastVarSborka = document.getElementsByName('stol_sborka_sum')[0].value*1000;
		stateVarSborka = 1;
	}
	else
	{
		stateVarSborka = 0;
		lastVarSborka = 0;
	}
	nowResultSum+=lastVarSborka;
	resultSum_js.innerHTML = nowResultSum;
	
});

jQuery('input[name=stol_sborka_sum]').change(function(){
	if(stateVarSborka == 1)
	{
		nowResultSum -= lastVarSborka;
		lastVarSborka = document.getElementsByName('stol_sborka_sum')[0].value*1000;
		nowResultSum+=lastVarSborka;
		resultSum_js.innerHTML = nowResultSum;
	}
})

function deletElementResultSum(myObj){
	nowResultSum -=myObj.alt;
	resultSum_js.innerHTML = nowResultSum;
	sumOfItem=sumOfItem - (parseInt(myObj.alt))/9;
	if(sumOfItem==0)
	{
		resultBlock_js.hidden = true;
		reqSborka_js.style.display = 'none';
	}
}

Batyabest 11.01.2014 20:07

Никто не поможет что ли?))

kostyanet 13.01.2014 14:19

Ответьте сперва на вопрос. Если клиентос типа захочет оборудовать ввод поля с датой календарем, поле с цветом рампой, поле со звуком - плеером и тп - вы так же будете через css навешивать все эти календари, рампы и баттоны, ну в кажное из, или все-таки догадаетесь сделать _нормально_?

Особенно, конечно, впечатляет распознавание числа через название арифметического действия закодированного в css. В том самом методе.

Vlasenko Fedor 13.01.2014 14:25

Цитата:

Сообщение от kostyanet
впечатляет распознавание числа через название арифметического действия закодированного в css

kostyanet,
хватит умничать. Предложи лучше вариант. Пи.деть не код писать

рони 13.01.2014 15:10

:) Плюс\минус и value с умножением

kostyanet 13.01.2014 15:18

Все уже написано http://api.jqueryui.com/spinner/

pure html+js http://www.webcodingtech.com/javascript/spinner.php

Но добавлять по 1 это, конечно, баянище. В таких кнопках есть смысл когда шаг нечеловеческий. Скажем корень квадратный деленный на пи пополам. В реальности какие-нибудь калькуляции из пунктов в мм, из пенсов в копейки и тп. Но по 1... это, типа, для инвалидов что ли?

Vlasenko Fedor 13.01.2014 15:39

<style>
.podbor{position: relative;}
.podbor>input{
    padding: 2px 2px 1px 4px; 
    font-size:30px; 
    width: 70px;
    height: 40px;
    float: left;
    border: 1px solid #666;
    border-radius: 4px 0 0 4px;
}
.podbor>span{
    display: block;
    font-size:18px; 
    position:absolute; 
    left: 58px;
    margin: 0;
    padding: 2px;
    line-height:14px;
    width: 14px;
    border: 1px solid #666;
    background-color: #E4E4E4;
    text-align: center;
    cursor: pointer;
}
.podbor>.plus{border-bottom: none; height: 16px;}
.podbor>.minus{top: 20px; height: 14px;}
.podbor>span:hover{background-color: #999;}
.clear{clear: both;}
</style>
<div class="clear"></div>
<div class="podbor">	
    <input type="text" value="1"/>
    <span class="plus">+</span>
    <span class="minus">-</span>
</div>
<div class="clear"></div>
<hr>
<div class="clear"></div>
<div class="podbor">	
    <input type="text" value="1"/>
    <span class="plus">+</span>
    <span class="minus">-</span>
</div>
<script>
(function () { 
    document.onclick = function(e){    
        e = e || window.event;
        var target = e.target || e.srcElement;
        if ('SPAN' != target.tagName || 
            !(target.className == 'minus' || target.className == 'plus')) return false;
        var el = target.parentNode || target.parentElement,
        inp = el.children[0],
        val = +inp.value;  
        inp.value = val + (target.className == 'minus' ? val > 1 ? -1: 0: 1);
     }
}());
</script>

kostyanet 13.01.2014 15:43

Я пытался втолковать что на все 100500 нумеречных инпутов требуется ровно 2 кнопки (не обязательно type="button") и 3 события. В точности как это делается с календарями, рампами и прочим сложным для субъекта вводом.

Vlasenko Fedor 13.01.2014 16:05

kostyanet,
может ты и прав но без кода твоего сам понимаешь ...:)

kostyanet 14.01.2014 05:42

Собственно input'ов тоже больше 1 не надо. Юзер щелкает в ячейке и получает это поле с кнопками там где щелкнул.

Начинается канонично:
addEvent(this.table, "click", function(e) {
			var cell = e.target || e.srcElement; // clicked cell
			var row = cell.parentNode;
			if ( this.header.isEqualNode(row) || this.footer.isEqualNode(row) ) {
				mod_key = 0;
				this.toggle_row(0); 
			} else {
				this.toggle_row(row.rowIndex); // change selected
			}
			return false;
			
		}.bind(this));


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

рони 14.01.2014 05:57

:)
Add (+/-) Button Number Incrementers
Published September 14, 2009 by Chris Coyier


Цитата:

Note: This is a little outdated. Would likely just use <input type='number'> today.
View Demo

kostyanet 14.01.2014 07:16

В православном FF и еще в некоторых кошерных бразах мало что пашет из нового http://www.w3schools.com/html/html5_...nput_types.asp

Так что today надо заменить на toooooday

Vlasenko Fedor 14.01.2014 14:40

http://learn.javascript.ru/play/ldPgob :)

рони 14.01.2014 19:02

Poznakomlus,
:dance: ещё можно во как ))
inp.value = inpvalue + (inpvalue > 1 ? val||~val : val|| 0 );

Vlasenko Fedor 14.01.2014 19:10

Цитата:

Сообщение от рони
ещё можно во как

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

Batyabest 14.01.2014 20:57

Господа, а может мне кто-то подскажет почему у меня не работает после добавления кнопок +/-?

рони 14.01.2014 21:35

Batyabest,
может spanов многовато становится ?

Vlasenko Fedor 16.01.2014 04:50

Цитата:

Сообщение от Batyabest
Господа, а может мне кто-то подскажет почему у меня не работает после добавления кнопок

наверное name не добавляете к инпутам
рони,
http://learn.javascript.ru/play/iAajXb


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