How to display number in textbox to keep track of number of buttons turned on
<p>Below is the code of a read only textbox:</p>

<pre><code>&lt;td&gt;
&lt;input type="text" name="numberAnswer" class="numberAnswerTxt answertxt" id="mainNumberAnswerTxt" onChange="getButtons()" readonly="readonly" &gt;
&lt;/td&gt;
</code></pre>

<p>Below is the code which displays buttons A-G:</p>

<pre><code>&lt;?php
    $a = range("A","G");
?&gt;

&lt;table id="answerSection"&gt;
    &lt;tr&gt;

&lt;?php
    $i = 1;
    foreach($a as $key =&gt; $val){
        if($i%7 == 1) echo"&lt;tr&gt;&lt;td&gt;";
        echo"&lt;input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\"&gt;";      
        if($i%7 == 0) echo"&lt;/td&gt;&lt;/tr&gt;";
        $i++;
    }
?&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Finally below is the function where it turns on and off the letter buttons:</p>

<pre><code>function btnclick(btn)
{
    var context = $(btn).parents('#optionAndAnswer');
    if (context.length == 0) {
        context = $(btn).parents('tr');
    }

    if ($(btn).hasClass("answerBtnsOn")) {
        $(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff");
        return false;
    }

    if ($(btn).hasClass("answerBtnsOff")) {
        $(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn");
        return false;
    }

    $('.answertxt', context).val(context.find('.answerBtnsOn').length &gt; 0 ? context.find('.answerBtnsOn').length : '');

}
</code></pre>

<p>What I have been trying to do in this function is that if the user has turned on a button , it should add the number in the texbox. For example, lets say all buttons are off, if I turn on button "B", then the textbox should display number 1 in the textbox as one button is turned on, if I then turn on button "E", it should display "2" in the textbox as two button are now turned on and etc. Also if I turn off button "E", it should go back to displaying "1" in the textbox as only button "B" is turned on. In other words I want to keep track on how many buttons have been turned on. </p>

<p>How can I achieve this because at the moment nothing is being displayed in the text box when I turn a button on.</p>

<p>Here is the <a href="http://helios.hud.ac.uk/u0867587/Mobile_app/Text14.php" rel="nofollow">demo</a> of the application:</p>

<p>When you open app just click on the "Open Grid" link and select a grid button, when letter buttons appear, then click on the buttons to turn on and off, as you can see nothing is displayd within the textbox.</p>
