populating an input field with multiple clicks in javascript

Question

I have the following code that is supposed to collect a value by HREF clicks.
Each time I click a number it is to append it to the contents of the text field "number". When I click submit it goes to a new page that evaluates the content of "number". It seems to work fine in my editor (HTML-Kit) when I click preview and "number" populates as expected but it does not work in my browser. The text field stays empty. What seems to be the problem here?

<FORM ACTION="showcontent.htm" METHOD="post">
<input type="text" name="number" value="">
<TABLE BORDER="1">
    <TR>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '1';">1</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '2';">2</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '3';">3</A></TD>
    <TR>
    <TR>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '4';">4</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '5';">5</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '6';">6</A></TD>
    <TR>
    <TR>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '7';">7</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '8';">8</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '9';">9</A></TD>
    <TR>
    <TR>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + ',';">,</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '0';">0</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '.';">.</A></TD>
    <TR>
</TABLE><BR />
<BUTTON TYPE="submit">Show result</BUTTON><BR /><BR />

Yes, it's very easy. What problem are you having when you try to implement it? You access the contents of an input field using its `.value` property. So you can read the old value, concatenate the new digit to it, and then assign it back to the input. — Barmar, Feb 10 '17 at 23:56
As @Barmar says it is easy to accomplish but you need to try it first and then if you have problems with code to ask it here. If you have any code please share with us. — , Feb 10 '17 at 23:58

score 0 · Accepted Answer · answered Feb 17 '17 at 02:59

Checking out the browser console reveals that number is not defined.

In order to reference a field within a form, first give the form a name:

<form name="calculator" ... >

Then use dot notation to select a specific DOM element, like this:

document.calculator.number;

Now you can append to the value property of this object like this:

document.calculator.number.value += '1';

To edit your code (plus adding a closing </form> tag, and fixing your closing </tr> tags):

<FORM name="calculator" ACTION="showcontent.htm" METHOD="post">
  <input type="text" name="number" value="">
  <TABLE BORDER="1">
    <TR>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '1';">1</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '2';">2</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '3';">3</A>
      </TD>
    </TR>
    <TR>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '4';">4</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '5';">5</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '6';">6</A>
      </TD>
    </TR>
    <TR>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '7';">7</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '8';">8</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '9';">9</A>
      </TD>
    </TR>
    <TR>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += ',';">,</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '0';">0</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '.';">.</A>
      </TD>
    </TR>
  </TABLE>
  <BR />
  <BUTTON TYPE="submit">Show result</BUTTON>
  <BR />
  <BR />
</FORM>

@Paul From [SO Help pages](http://stackoverflow.com/help/someone-answers): "If you want to say "thank you," vote on or accept that person's answer" ;) — swinn, Feb 17 '17 at 03:30
Add-on question: The solution above works great but I would like to display the number of characters clicked, in real-time. I added the code below between
and . Works when I type characters in the input field but the showcount() function does not trigger when I populate by clicking the links. As the input field will actually be defined as "hidden" the user cannot tell how many numbers were clicked. Is there a way to get showcount() to trigger when the number field is populated by clicks. Using onChange instead of onInput does not trigger anything. — Paul, Feb 19 '17 at 23:21
[This user](http://stackoverflow.com/questions/6533087/jquery-detect-value-change-on-hidden-input-field) had a similar problem. You'll need to call your `showcount` function when each of your numbers is clicked. If you need help with that, let me know. — swinn, Feb 19 '17 at 23:53
Got it to work by changing the HREF onclick event as follows: "document.calculator.number.value += '1';showcount();" — Paul, Feb 20 '17 at 03:50

populating an input field with multiple clicks in javascript

1 Answers1