Populating Input Fields Using Button UIs

ASPnoob

Hi all, I have a web app that has a display box and button UIs for typing numbers (0 through 9) into the display box. There is one button that when clicked generates multiple input fields. My problem is that I can enter numbers into the first input field by clicking the numbered buttons and by typing numbers using the keyboard. Numbers can only be entered into other input fields using the keyboard. Any attempt to use the numbered buttons to enter numbers into other input fields will cause the focus to return back to the first input field. Below are my markups and jquery

<body>

if ($('#box1').click())
{      
    $(".BTN").click(function () {
        if ($.isNumeric($(this).html())){
            $("#box1").val($("#box1").val() + $(this).html());           
    }});    
         
     }
     else
         if ($('#box2').click())
         {                  
             $(".BTN").click(function () {
                 if ($.isNumeric($(this).html())) {
                     $("#box2").val($("#box2").val() + $(this).html());
                 }
                     
                 });                 
         }
         else
             if ($('#box3').click())
             {
                 $(".BTN").click(function () {
                     if ($.isNumeric($(this).html())) {
                         $("#box3").val($("#box3").val() + $(this).html());    
                     }});
             }

    $("#functs").click(function () {
     
   document.getElementById("myOutputs").innerHTML =
    ""
   + ""
        + ""
   + ""
        + ""
   + ""
        + ""
   + "

";
document.getElementById('box1').tabIndex = "1";
document.getElementById('box2').tabIndex = "2";
document.getElementById('box3').tabIndex = "3";
});
}

Please explain why the code above is giving me the problems I've stated, thanks in advance.

Richard Deeming

jQuery's .click method[^] has two forms; one to attach a handler to the click event of the matched elements, and one to trigger the click event. Your code is calling the second version. Since the method returns the original jQuery wrapper object, which in Javascript terms is not "false-y", the code within the first if block executes. Try something like this instead:

$(function() {

// Store the last box to receive the input focus:
var currentBox = null;
$(document).on("focus", "#box1, #box2, #box3", function(){ currentBox = $(this); });

$(document).on("click", ".btn", function() {
if (currentBox) {
var value = $(this).html();
if ($.isNumeric(value)) {
currentBox.val(currentBox.val() + value);
}
}
});

});

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

ASPnoob

Hi, thanks for replying. Your code works like a charm.