input with plus and minus controls to increase value alphabetical

Question

Many of you have probably seen forms that use layout like - 1 + where when - and + are clicked it increases or decreases the value. I need to figure out a way to do this similarly but with Letters, so for example - A + Where if I click + it sets value to B if I click + again it sets value to C etc.. and so on doing this alphabeticaly. Same goes for minus e.g. - C + If I click on - it should set input value to B.

@RamisWachtler Well, I figured out how to achieve this with numbers that was quiet easy, and thought of asigning numbers to letters in alphabet and depending on what number was incremented update input with associated letter, but that seems quiet "bulky" as a solution. — Ilja, Feb 12 '15 at 14:23
@Ilya Could you provide the code in your post _and_ using http://jsfiddle.net or http://jsbin.com? — polkovnikov.ph, Feb 12 '15 at 14:23
The technical term for these fields is spinbox or spinner. I can't help much more except by pointing you [in the *possibly* right direction](http://stackoverflow.com/questions/3145030/convert-integer-into-its-character-equivalent-in-javascript). — vcanales, Feb 12 '15 at 14:34

score 1 · Answer 1 · answered Feb 12 '15 at 14:44

You may want to use character code:

String.fromCharCode(value);

Here's my fiddle: http://jsfiddle.net/ThisIsMarkSantiago/73pza51f/

Parse character code to Character: http://www.w3schools.com/jsref/jsref_fromcharcode.asp

ASCII Codes are here: http://www.w3schools.com/charsets/ref_html_ascii.asp

score 1 · Accepted Answer · answered Feb 12 '15 at 14:48

Ok, here is a working snippet. I've modified an already existing code, where you were able to increase and decrease numerical values. The main changes are happening here -

Converting a char to int

currentVal = currentVal.charCodeAt(currentVal);

INCREMENT: Checking if currentValue is not undefined or less 90 (ASCII for Z)

true - Use String.fromCharCode(currentVal+1)) to increase the integer and convert it to char. false - Set the value of your input field to "A"

if (!isNaN(currentVal) && currentVal < 90) {
  // Increment
  $('input[name=' + fieldName + ']').val(String.fromCharCode(currentVal + 1));
} else {
  // Otherwise put a A there
  $('input[name=' + fieldName + ']').val("A");
}

DECREMENT: Checking if currentValue is defined or greater 65 (ASCII for 'A')

true - Same as increment, just decrement false - Same as increment, just set "Z" as value

if (!isNaN(currentVal) && currentVal > 65) {
  // Decrement one
  $('input[name=' + fieldName + ']').val(String.fromCharCode(currentVal - 1));
} else {
  // Otherwise put a Z there
  $('input[name=' + fieldName + ']').val("Z");
}

jQuery(document).ready(function() {
  // This button will increment the value
  $('.qtyplus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = $('input[name=' + fieldName + ']').val();
    currentVal = currentVal.charCodeAt(currentVal);
    // If is not undefined or its less 90
    if (!isNaN(currentVal) && currentVal < 90) {
      // Increment
      $('input[name=' + fieldName + ']').val(String.fromCharCode(currentVal + 1));
    } else {
      // Otherwise put a A there
      $('input[name=' + fieldName + ']').val("A");
    }
  });
  // This button will decrement the value till Z
  $(".qtyminus").click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = $('input[name=' + fieldName + ']').val();
    currentVal = currentVal.charCodeAt(currentVal);
    // If it isn't undefined or its greater than 65
    if (!isNaN(currentVal) && currentVal > 65) {
      // Decrement one
      $('input[name=' + fieldName + ']').val(String.fromCharCode(currentVal - 1));
    } else {
      // Otherwise put a Z there
      $('input[name=' + fieldName + ']').val("Z");
    }
  });
});

#myform {
  text-align: center;
  padding: 5px;
  border: 1px dotted #ccc;
  margin: 2%;
}
.qty {
  width: 40px;
  height: 25px;
  text-align: center;
}
input.qtyplus {
  width: 25px;
  height: 25px;
}
input.qtyminus {
  width: 25px;
  height: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id='myform' method='POST' action='#'>
  <input type='button' value='-' class='qtyminus' field='quantity' />
  <input type='text' name='quantity' value='A' class='qty' />
  <input type='button' value='+' class='qtyplus' field='quantity' />
</form>

score 0 · Answer 3 · answered Feb 12 '15 at 15:31

For other languages I would suggest a dictionary approach

var otherLanguageAbc = ['a','á', 'b'];
var count = 4;

function getCharacter(otherLanguageAbc, count){
    var length  = otherLanguageAbc.length;
    var positiveCount = count < 0 ? count % length + length: count % length;
    return otherLanguageAbc[positiveCount];
}

input with plus and minus controls to increase value alphabetical

3 Answers3