-1

Is there anyway that I can add functionality to this arrow?

▼

I want it to be clickable and if clicked for it to increase a value of an input by one. So say there is the value of 5 in an input box, if the arrow was clicked, the value would show 6.

Is this possible to do or is there a better approach?

BurningLights
  • 2,387
  • 1
  • 15
  • 22
Paul
  • 3,348
  • 5
  • 32
  • 76

2 Answers2

0

It sounds like you could be looking for the number input type. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for a list of input types. The code to make a number input is:

<input type="number">
BurningLights
  • 2,387
  • 1
  • 15
  • 22
  • Kind of. I want the arrows to stay present all of the time and not give the user the ability to manually enter in the number by typing it. – Paul Jul 28 '15 at 19:34
0

In HTML

<input type="text" readonly id="textbox" />
<a id="increment" style="cursor:pointer;">&#x25BC;</a>

In Jquery, add this

$("#increment").click(function(e) {

   var old_val = +$("#textbox").val();
   var increment = +'1'
   var new_val = old_val + increment;
   $("#textbox").val(new_val);
});

This will increment the text field value on the arrow click.

Arun Krish
  • 2,153
  • 1
  • 10
  • 15
  • I created a jsfiddle here: http://jsfiddle.net/h1a3nkx8/. Also, I added the CSS from http://stackoverflow.com/a/4407335/4912760 to make the arrow unselectable. Otherwise, clicking on it too rapidly would cause the arrow and then the textbox to highlight. :/ – BurningLights Jul 29 '15 at 12:26