Select option using number keys

JavaScript
1

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

2

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.

3

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

4

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)

5

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.

6

Yeah, should be pretty much something along those lines.

If you have some basic HTML for your form:


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


$(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 ;))

7

Fantastic guys!!!

Thank you - that looks perfect.

Cheers

Del

8

Hi Del,

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

  1. it might be nice to give the user some kind of visual feedback as to what they have pressed
  2. the form probably shouldn’t submit immediately (so the visitor can register this feedback)
  3. 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:

$(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");
    }
  });
});

@AussieJohn ;
Nice solution, mate. I learned quite a bit by reading your code. Thanks.

9

WONDERFUL!!!

Thanks guys - really appreciated!

Cheers

Del

10

I quite like your little addition too, allowing the user to see what they chose for a few moments before submitting :slight_smile: