SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Select option using number keys

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,000
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,000
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by deltrotter View Post
    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)

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    41
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Denk View Post
    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 )
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic guys!!!

    Thank you - that looks perfect.

    Cheers

    Del

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,000
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:
    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");
        }
      });
    });

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

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WONDERFUL!!!

    Thanks guys - really appreciated!

    Cheers

    Del

  10. #10
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    @AussieJohn ;
    Nice solution, mate. I learned quite a bit by reading your code. Thanks.
    I quite like your little addition too, allowing the user to see what they chose for a few moments before submitting
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •