Question

I asked this question a bit earlier and have only been able to gain a little ground. What I have is still not working as expected.

What I want to do is to share a number pad with 3 different forms. If the user clicks on box ‘a’, all of the numbers (from the anchor tag) as well as the focus should go into that input box. If the user clicks on box ‘b’, then all of the numbers (from the anchor tag) as well as the focus should go into that input box.

Can someone help me to get this correct?

function box(box) {
  if(box == 'a') {
    document.getElementById("a").focus();
    document.getElementById('a').value += '1';
    document.getElementById('a').value += '2';
  }else if(box == 'b') {
    document.getElementById("b").focus();
    document.getElementById('b').value += '1';
    document.getElementById('b').value += '2';
  }
}

function process(val){
  document.getElementById('a').value += val;
}

---

When the user clickes one of these anchor tags, I am expecting the value to be populated into the proper input box. The input box is first determined when the user clicks the anchor tag that sets the focus into the box they want to use.

STEP 1 Choose the input box to use and put focus:

<a href="#" onclick="box('a')">a</a><br />
<a href="#" onclick="box('b')">b</a><br />

STEP 2 Put the data into the box:

<a href="#" onclick="process('4');">4</a>
<a href="#" onclick="process('5');">5</a>


<form name="a">
  <input type="text" id="a" />
</form>
<form name="b">
  <input type="text" id="b" />
</form>

Answer 1

Keep a variable around to track which pad is selected.

var selected = 'a';

function box(box) {
    selected = box;
    document.getElementById(selected).focus();
}

function process(val){
  document.getElementById(selected).value += val;
}