Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.04.2012, 01:14
Интересующийся
Отправить личное сообщение для Surlik Посмотреть профиль Найти все сообщения от Surlik
 
Регистрация: 19.02.2012
Сообщений: 19

Cчётчик значений value в элементе формы input type="text"?
Подскажите, пожалуйста, как сделать счётчик значений value в элементе формы input type=”text” при клике на изображение (стрелочки – влево, право)

<a href="#">
<img class="left" alt="" src="left.gif">
</a>
<input id="test" class="text" type="text" value="1" name="test">
<a href="#">
<img class="right" alt="" src="right.gif">
</a>


Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 04.04.2012, 01:20
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

Сообщение от Surlik
счётчик значений value
а теперь тоже самое, только нормальными словами

пользователь ввёл цифру, и с помощью стрелочек может увеличить/уменьшить её на 1?
__________________
С моих слов записано верно.
Ответить с цитированием
  #3 (permalink)  
Старый 04.04.2012, 01:47
Интересующийся
Отправить личное сообщение для Surlik Посмотреть профиль Найти все сообщения от Surlik
 
Регистрация: 19.02.2012
Сообщений: 19

Сообщение от T-sh Посмотреть сообщение
а теперь тоже самое, только нормальными словами

пользователь ввёл цифру, и с помощью стрелочек может увеличить/уменьшить её на 1?
Да вот это я и хотел узнать как сделать!
Ответить с цитированием
  #4 (permalink)  
Старый 04.04.2012, 01:48
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
 var input = $('#inp'); // наш инпут
 var a; // тут будел лежать текущее значение
          $('.plus').click(function(){ // по клику на плюс
			  a = input.val();  // получить текущее значение
			  a++; // увеличить на 1
			  input.val(a); // вернуть инпуту
		  });
		  
		  $('.minus').click(function(){ // по клику на минус
			  a = input.val();  // получить текущее значение
			  a--; // уменьшить на 1
			  input.val(a); // вернуть инпуту
		  });
});
</script>
</head>
<body>  

<input type="text" id="inp" value ="1" />

<div class="plus" style=" display: inline-block; height: 20px; width: 20px; background-color: red;">+</div>
<div class="minus" style="display: inline-block; height: 20px; width: 20px; background-color: green; margin-right: 10px;">-</div>
</body>
</html>
__________________
С моих слов записано верно.
Ответить с цитированием
  #5 (permalink)  
Старый 04.04.2012, 02:08
Интересующийся
Отправить личное сообщение для Surlik Посмотреть профиль Найти все сообщения от Surlik
 
Регистрация: 19.02.2012
Сообщений: 19

T-sh, большое спасибо!
А как сделать в вашем коде так чтобы значения не становились отрицательными!
Ответить с цитированием
  #6 (permalink)  
Старый 04.04.2012, 02:13
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

$('.minus').click(function(){ // по клику на минус
              a = input.val();  // получить текущее значение
              a = (a<1)?1:a;  // если а < 1 (равно нулю), то сделать его единицей, иначе — оставить значение. 
              a--; // уменьшить на 1
              input.val(a); // вернуть инпуту
          });
__________________
С моих слов записано верно.
Ответить с цитированием
  #7 (permalink)  
Старый 04.04.2012, 02:17
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

вернее, даже так:

$('.minus').click(function(){ // по клику на минус
			  a = input.val();  // получить текущее значение
			  a = (a<1)?0:a-1;
			  input.val(a); // вернуть инпуту
		  });
__________________
С моих слов записано верно.
Ответить с цитированием
  #8 (permalink)  
Старый 04.04.2012, 02:19
Интересующийся
Отправить личное сообщение для Surlik Посмотреть профиль Найти все сообщения от Surlik
 
Регистрация: 19.02.2012
Сообщений: 19

Эххх учиться и учиться
Спасибо!
Ответить с цитированием
  #9 (permalink)  
Старый 04.04.2012, 04:49
Интересующийся
Отправить личное сообщение для Surlik Посмотреть профиль Найти все сообщения от Surlik
 
Регистрация: 19.02.2012
Сообщений: 19

У меня еще вопросик? Сейчас выводится результат (Сумма только когда я ввожу значение c клавиатуры и нажимаю ввод, а вот по плюс/минус в режиме так сказать «реального времени» Не работает! Спасибо!
<script >
$(document).ready(function() {
form = $("#calc");
var input = $('.inp'); // наш инпут
var a; // тут будел лежать текущее значение
        $('.plus').click(function(){ // по клику на плюс
			  a = input.val();  // получить текущее значение
			  a++; // увеличить на 1
			  input.val(a); // вернуть инпуту
		  });
		  $('.minus').click(function(){ // по клику на минус
			  a = input.val();  // получить текущее значение
			  a = (a<1)?0:a-1;
      //  a--; // уменьшить на 1
			  input.val(a); // вернуть инпуту
		  });
$("#sum span").text("0");
form.change(function() {
  	     totalSum = 0
				$("#input").each(function() {
						var input = parseInt($("#input").val()) * parseInt($("#input").attr("name"));
						totalSum += input;
    		});	
				$("#sum span").text(totalSum);
		});
});

</script>
</head>
<body>
<form>
<div id="calc">        
<input type="text" class="inp" value ="0" id="input" name="100" />
<div class="plus" style=" display: inline-block; height: 20px; width: 20px; background-color: red;">+</div>
<div class="minus" style="display: inline-block; height: 20px; width: 20px; background-color: green; margin-right: 10px;">-</div>
<input type="text" class="inp_tu" value ="0" id="input" name="100" />
</div>
</form>
<p id="sum">Сумма:<strong><span></span></strong> р.</p>
</body>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Умножение численных значений формы ввода FastSP Общие вопросы Javascript 8 08.04.2012 20:45
сохранить значений полей формы в куки ivanweb Общие вопросы Javascript 1 19.01.2012 09:36
Отправка формы с элементами input Alex2011 jQuery 1 11.01.2011 14:17
Очистка формы от дефолтных значений js hereim Общие вопросы Javascript 14 04.07.2010 21:29
Позиция курсора в input type="text" (ie) Кирпич Общие вопросы Javascript 2 21.10.2007 06:44