Select option using number keys

**deltrotter** · Nov 6, 2012 14:16

Hi guys

This one is sending my brain a bit awry.

I want to create a very simple form, which one question per page and I would like the user to be able to choose an option by pressing a number key. The question will be:

How useful did you find the service? Use the number keys to select an option.

1. Very good
2. Good
3. Ok
4. Poor
5. Very poor

Thus if they hit '3' they would be selecting 'Ok'. Is this possible?

Cheers

Del

**Pullo** · Nov 6, 2012 15:44

Hi,

Just to clarify, when you say "by pressing a number key":
Do you want a user to press a key and the form gets automatically submitted?
Or, do you want the user to type a number into an input field, then press a submit button (or return) to submit the form?

The second version is easy, the first is tricky.

**deltrotter** · Nov 6, 2012 16:08

Hi Pullo

Ha ha - sorry, the first! I want them to hit 3 if they want option 3, which would then highlight that option (I might put a tick next to it) and then move on to the next option.

What do you think?

Cheers

Del

**Pullo** · Nov 6, 2012 23:54

Originally Posted by deltrotter

Ha ha - sorry, the first! I want them to hit 3 if they want option 3, which would then highlight that option (I might put a tick next to it) and then move on to the next option.

Hi Del,
As I mentioned, that's a bit trickier.
My first idea would be to use a form and the onkeypress event to have it submit.
I'm not sure this is the best way to go though. Maybe someone else has an idea?
Anyways, I'm off to work now. If their are no replies by the time I get back, I'll see what I can come up with.

Luverlyjubberly,
Rodders (sorry, Pullo)

**Denk** · Nov 7, 2012 02:35

as Pullo said, use the keypress or keyup action (I've always used the keyup event. Don't ask me why though

) to select the "ok" option (if it's a div, then set a hidden field) and then call upon the submit function of the form.

**AussieJohn** · Nov 7, 2012 05:28

Originally Posted by Denk

as Pullo said, use the keypress or keyup action (I've always used the keyup event. Don't ask me why though

) to select the "ok" option (if it's a div, then set a hidden field) and then call upon the submit function of the form.

Yeah, should be pretty much something along those lines.

If you have some basic HTML for your form:

HTML Code:

<form action="?" method="get">
    <fieldset id="choices">
        <legend>Make a choice</legend>
        <p><input type="radio" name="question_1" id="choice_1" value="1"><label for="choice_1">1. Very good</label></p>
        <p><input type="radio" name="question_1" id="choice_2" value="2"><label for="choice_2">2. Good</label></p>
        <p><input type="radio" name="question_1" id="choice_3" value="3"><label for="choice_3">3. Ok</label></p>
        <p><input type="radio" name="question_1" id="choice_4" value="4"><label for="choice_4">4. Poor</label></p>
        <p><input type="radio" name="question_1" id="choice_5" value="5"><label for="choice_5">5. Very poor</label></p>
    </fieldset>
    <fieldset>
        <input type="submit" value="Submit" id="btn-submit" />
    </fieldset>
</form>

Then the following JavaScript will do exactly what you want

Code javascript:

$(document).ready(function(){
 
 
    $("body").on("keyup", function(e) {
        var charCode = e.keyCode,
            key,
            $choices = $("#choices");
 
 
        if (  (charCode >= 49 && charCode <= 53) || (charCode >= 97 && charCode <= 101) ) {
 
 
            if (charCode > 96) {
                charCode = charCode - 48; //compensate for numpad offset
            }
 
 
            key = String.fromCharCode(charCode);
 
 
            //set the right item to checked
            $("input[value="+key+"]", $choices).attr("checked", "checked");
            //submit the form
            $choices.closest("form").submit();
        }
 
 
    });
});

Basically, monitors the keyup event on the body, when it is either # 1 - 5 on the std numbers or 1 - 5 on the numpad it will process and convert the keyCode to a character (which will end up being one of 1-5), then it will find the radio button with that value and set it to checked. And of course finally, submit the form.

(Oh and don't forget to include jQuery of course

)

**deltrotter** · Nov 7, 2012 14:47

Fantastic guys!!!

Thank you - that looks perfect.

Cheers

Del

**Pullo** · Nov 7, 2012 15:03

Hi Del,

I've just been playing with the code posted by AussieJohn.
In so doing it occurred to me that:

it might be nice to give the user some kind of visual feedback as to what they have pressed
the form probably shouldn't submit immediately (so the visitor can register this feedback)
it might be nice to only accept one keypress, so that user's can't select loads of options

I therefore tweaked his code slightly to reflect this.
Maybe this helps you, too:

Code JavaScript:

$(document).ready(function(){
  $("body").on("keyup", function(e) {
    var charCode = e.keyCode,
    key,
    $choices = $("#choices");
    if (  (charCode >= 49 && charCode <= 53) || (charCode >= 97 && charCode <= 101) ) {
      if (charCode > 96) {
        charCode = charCode - 48; //compensate for numpad offset
      }
      key = String.fromCharCode(charCode);
 
      //set the right item to checked
      $("input[value="+key+"]", $choices).attr("checked", "checked")
 
      $("#choice_"+key).parent().css('background-color', 'green');
 
      //submit the form with a delay of two seconds
      setTimeout(function() { $choices.closest("form").submit(); }, 2000);
 
      $("body").unbind("keyup");
    }
  });
});