Question

I have a textbox which should state how many buttons are selected.

The problem I have is that what happens is that the user selects there buttons and then they add those buttons in a row. Now if I select the next set of buttons, what it is doing is that it adding the previously selected buttons with the current selected buttons with.

For example is user selected 2 buttons and then added it into a new, then if the user selects another 2 buttons, it should state that 2 buttons are selected but instead it states buttons a selected.

Now the reason for this is that I have multiple textboxes with the same class (.numberAnswerTxt), so that is why I think it is adding the numbers together. So what my question is that how can I differenticate between the textboxes with the same class.

There is one textbox on top where the user selctes the buttons and then there are textboxes for each row stating the amount of buttons previously selected for each row.

Below is the jquery code which displays the number of buttons selected in the textbox:

$('.numberAnswerTxt').val($('.answerBtnsOn:visible').size());

Below is the jquery code for the new rows added each time:

 $('.numberAnswerTxt', context).each(function() {
        var $this = $(this);
        var $noofanswersText = $("<input type='text' class='numberAnswerTxt' onkeyup='numberKeyUp(this)' onkeypress='return isNumberKey(event)' onChange='getButtons()'>").attr('name', $this.attr('name')).attr('value', $this.val())

        $noofanswers.append($noofanswersText);
    });

Below is html of first textbox:

<input type="text" name="numberAnswer" class="numberAnswerTxt" onkeyup="numberKeyUp(this)" onkeypress="return isNumberKey(event)" onChange="getButtons()" >

html of the buttons they are selecting:

<input class="answerBtns answers" name="answerAName"    id="answerA"        type="button"   value="A"       onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerBName"    id="answerB"        type="button"   value="B"       onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerCName"    id="answerC"        type="button"   value="C"       onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerDName"    id="answerD"        type="button"   value="D"       onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerEName"    id="answerE"        type="button"   value="E"       onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerFName"    id="answerF"        type="button"   value="F"       onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerGName"    id="answerG"        type="button"   value="G"       onclick="btnclick(this);"/>

onlick event code:

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

    if (context.find(".numberAnswerTxt").val() == "") {
        alert('You must first enter in the number of answers you require in the textbox above');
        return false;
    }

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

    var currenttotal = context.find('.answerBtnsOn').length;
    if (context.find(".numberAnswerTxt").val() <= currenttotal) {
        alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
        return false;
    }

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

Below is the function where a new row is added each time the user submits the number of buttons they have selected:

function insertQuestion(form) {   


    var $tr = $("<tr></tr>");
    var $noofanswers = $("<td class='noofanswers'></td>");
    var $answer = $("<td class='answer'></td>");


   $('.numberAnswerTxt', context).each(function() {
        var $this = $(this);
        var $noofanswersText = $("<span class='oneanswer'>Only 1 Answer</span><input type='text' class='numberAnswerTxt' onkeyup='numberKeyUp(this)' onkeypress='return isNumberKey(event)' onChange='getButtons()'>").attr('name', $this.attr('name')).attr('value', $this.val())

        $noofanswers.append($noofanswersText);
    }); 


    $('#optionAndAnswer .answers').each(function() {
        var $this = $(this);
        var $newBtn = '';
        if($this.is(':visible')){
            $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: inline-block;' onclick='btnclick(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));
        }else{
            $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: none;' onclick='btnclick(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));
        }

        $answer.append($newBtn);
    });


    $tr.append($noofanswers);
    $tr.append($answer);

    $('#qandatbl').append($tr);

}

Answer 1

I suppose you also have some sort of submit button.
when you click on that button you have to reset all buttons to their default values.
Class etc. I think that is whats going wrong.

Just assuming you put your buttons in a div, not together with the submit button ofcourse.
try this.

$('#myDiv input[type=button]').each(function(){
//if you dont say what class to remove it will just remove any class on it.
$(this).removeclass();
$(this).addclass('yourDefaultClass');

});