Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 11.01.2014, 09:34
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Сообщение от Poznakomlus Посмотреть сообщение
Что за спор а драки нет?
Я вам привел актуальное и лучшее решение на данный момент(Свое ). (Оформление можете сами поправить)
Если вы глянете большинство магазинов, то там +- прописывают функцию прямо в 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';
	}
}
Ответить с цитированием
  #12 (permalink)  
Старый 11.01.2014, 20:07
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Никто не поможет что ли?))
Ответить с цитированием
  #13 (permalink)  
Старый 13.01.2014, 14:19
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

Особенно, конечно, впечатляет распознавание числа через название арифметического действия закодированного в css. В том самом методе.
Ответить с цитированием
  #14 (permalink)  
Старый 13.01.2014, 14:25
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Сообщение от kostyanet
впечатляет распознавание числа через название арифметического действия закодированного в css
kostyanet,
хватит умничать. Предложи лучше вариант. Пи.деть не код писать
Ответить с цитированием
  #15 (permalink)  
Старый 13.01.2014, 15:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Плюс\минус и value с умножением
Ответить с цитированием
  #16 (permalink)  
Старый 13.01.2014, 15:18
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

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

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

Последний раз редактировалось kostyanet, 13.01.2014 в 15:23.
Ответить с цитированием
  #17 (permalink)  
Старый 13.01.2014, 15:39
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

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

Последний раз редактировалось Vlasenko Fedor, 13.01.2014 в 17:00.
Ответить с цитированием
  #18 (permalink)  
Старый 13.01.2014, 15:43
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Я пытался втолковать что на все 100500 нумеречных инпутов требуется ровно 2 кнопки (не обязательно type="button") и 3 события. В точности как это делается с календарями, рампами и прочим сложным для субъекта вводом.
Ответить с цитированием
  #19 (permalink)  
Старый 13.01.2014, 16:05
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

kostyanet,
может ты и прав но без кода твоего сам понимаешь ...
Ответить с цитированием
  #20 (permalink)  
Старый 14.01.2014, 05:42
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Собственно 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));


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

Последний раз редактировалось kostyanet, 14.01.2014 в 05:45.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
спрятать/показать поле ввода при нажатии на checkbox g1r Элементы интерфейса 34 16.12.2017 00:34
Как ввести в поле ввода значение где есть javascript MOZG Общие вопросы Javascript 8 19.04.2013 10:28
Как отследить пропал ли текст placeholder-а при фокусе на поле ввода z1987 Общие вопросы Javascript 2 19.12.2012 11:10
Позиционирование курсора в поле ввода spider84 Элементы интерфейса 1 22.07.2010 13:03
help pls окно с кнопками ок и отмена с полем ввода и с фокусом vasin AJAX и COMET 0 13.10.2009 18:40