How to match options and answer functionality in each table row

[sachinmaster]

I have a slight situation in my app in my jsfiddle.

What I want to do which I can't achieve is that I want the functionality of the Option Type, Number of Answers and Answer buttons within each row to match the functionality on top. The problem is that under the "Answer" column within the new row it does not allow the user to select a button and the textbox under the "Number of Answers" button doesn't do anything but just display a number within the textbox.

Please follow these steps below to be able to use the app and see the problem.

Step 1: Open the fiddle and you see an options and answers section on top. Open the grid and select option 8. Buttons A to H would appear.

Step 2: Type in 2 in the Number of Answers Textbox.

Step 3: Select buttons A and D, you will find out that those buttons would turn green to show they are selected. Now as you entered in 2 in the Number of answers textbox (step 2), it won't let you select more than 2 buttons, if you do an alert would apear stating you are beyond limit please deselect a button to choose another button.

Step 4. Click "Add Question", a new row is added in the table.

Step 5: In the new row you just created, lets say that oh no I made a mistake, there should be 4 answers not 2 answers and within the table row you just added you changed the number of answers textbox from 2 to 4. My question is how can I get it so that it allows the user to select the buttons (turn buttons green) and deselect (turn buttons white) under the "Answer" column within in the row and that if the user has selected 4 buttons but tries to select a 5th button, it will come up with same error as in Step 3?

Below is code that allows that displays the answer buttons depending on the option chosen from the "Option Type" textbox:

function getButtons()

{

    var i;

    if (initClick == 0) {
        for (i = 65; i <= 90; i++) { // iterate over character codes for A to Z
            $("#answer" + String.fromCharCode(i)).removeClass("answerBtnsOn").addClass("answerBtnsOff");

        }

        initClick = 1;
    }
    currenttotal = $('.answerBtnsOn').length;

    // code above makes sure all buttons start off with class answerBtnsOff, (so all button are white).
}

Below is code which allows you to select and deselect Answer buttons and also displays error messages if user tries to select more buttons than mentioned in the Number of Answers Textbox:

function btnclick(btn)

{

    if (document.getElementById("numberAnswerTxt").value == "") {
        alert('You must first enter in the number of answers you require in the textbox above');
        return false;

        //if text box empty then send alert
    }

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

        //if a button is already selected (in other words "answerBtnsOn), then turn it off if clicked on
    }

    //        console.log(currenttotal);
    if (document.getElementById("numberAnswerTxt").value <= 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");
        currenttotal++;
        return false;

        //if a button is already selected (in other words "answerBtnsOn), then turn it off if clicked on
    }
}

Below is code that adds new rows in a table after user selects their options and answers and displaying their options and answers in the new row:

var qnum = 1;

function insertQuestion(form) {
    alertErrors = "";
    // Note, this is just so it's declared...
    if (form.numberAnswer.value == "") {
        alertErrors = "\nPlease Enter in the Number of Answers you Require for this question\n";
    }

    else if ($('.answerBtnsOn').length > $('#numberAnswerTxt').val()) {
        alertErrors = "\nYou have selected more answers than the required amount\n";
    }

    else if ($('.answerBtnsOn').length < $('#numberAnswerTxt').val()) {
        alertErrors = "\nYou have selected less answers than the required amount\n";
    }


    // Stop execution with a return
    if (alertErrors != "") {
        alert(alertErrors);
        return;
    }

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

    $('.gridTxt').each(function() {

        var $this = $(this);
        var $optionsText = $("<input type='text' class='gridTxtRow' readonly='readonly' /><span href='#' class='showGrid'>[Open Grid]</span>").attr('name', $this.attr('name')).attr('value', $this.val())

        $options.append($optionsText);

    });

    $('#numberAnswerTxt').each(function() {

        var $this = $(this);
        var $noofanswersText = $("<span class='oneanswer'>Only 1 Answer</span><input type='text' class='numberAnswerTxtRow' onkeypress='return isNumberKey(event)' onChange='getButtonsRow()'>").attr('name', $this.attr('name')).attr('value', $this.val())

        $noofanswers.append($noofanswersText);

    });

    $('#optionAndAnswer .answers').each(function() {

        var $this = $(this);
        var $newBtn = '';
        var $visibleCss = "display: none;";
        if($this.is(':visible')) 
            $visibleCss = "display: inline-block;"
            
            $newBtn = $("<input class='answerBtnsRow answers' type='button' style='" + $visibleCss + "' />").attr('name', $this.attr('name')).attr('value', $this.val());
        
        var $color = $this.css('color');
        var $bkgColor = $this.css('background-color');
        $newBtn.css('color', $color);
        $newBtn.css('background-color', $bkgColor);
        
        $answer.append($newBtn);
    });

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

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

}

Whole code is in jsfiddle, click [here][1] Please test your answers in the fiddle if you wish before posting your answer. More chances of getting the correct answer

[1]: http://jsfiddle.net/rSdwa/15/

[AleMonteiro]

I won't code it for you, but the solution is quite simple: You want to have the same functionality in the top box and in each added row, so you need to use the same logic, same functions and same css classes.

But you need to make sure that it runs under it own context, so it won't change the wrong place. To do that you have many choices, two of them are: you can check if the controls are under have certain common parent or have some common class.

Using the parent as context you could do something like this:

$('.answerBtns').click(function()
{
	var numberOfAwnsers = 
		$(this) // Button 'A' for example
			.parent() // TD
			.parent() // TR
			.find('.numberAnswerTxtRow') // Find the numberAnsser text input inside that same row
			.val(); // Get it values
	
	var numberOfSelectedAwnsers =
		$(this) // Button 'A' for example
			.parent() // TD
			.find('.answerBtnsOn') // Get all green buttons on that cell
			.length // count it;
			
	if ( numberOfSelectedAwnsers < numberOfAwnsers )
	{
		$(this).addClass('answerBtnsOn'); // Turn 'A' green too
	}
	else
	{
		alert('.....'); // Say what you want
	}
});

One catch is that if you set this listener on the document ready event, the rows added after won't be included. So for each row inserted you have to set the listener again. The easiest way to do it is to unbind all other rows and bind it all again, this way you won't have a problem with a row with multiple binds to the same function.

Hope it helps.