Question

I have a problem with my application which is here. Please follow steps below:

1. When you open the application, click on “Open Grid” and select option 4. Buttons A, B, C and D will appear below.

2. In the Number of Answers textbox, type in the number 1. Then click on 1 button out of A, B, C or D (The button selected will turn green). When you have done that then click on the “Add Question” button.

3. As you can see the details you have entered on top will be dispayed in a new row underneath. In the new row you have added, in the textbox under the “Number of Answers” column, change the number 1 to 2. Now click on the “Submit Details” button below.

An alert should appear which states “you have selected less answers than the required amount”. This is correct as in the textbox you stated you wanted “2” number of answers but under the “Answer” column you have selected only 1 answer (the button which has turned green).

The problem is when you follow the next couple of steps.

1. Click on the “Add Question” button again so that you have added a second row containing the details on top.

2. In the second row you have added change the value in the textbox under the “Number of Answers” textbox from 1 to 3 and select 3 answers from buttons A, B ,C or D (3 buttons have to turn green).

3. Now click on the “Submit Details” button. This time the alert appears showing two messages stating that “you have selected more answers than the required amount”.

This is completly wrong because in the first row, you have selected less answers than the amount stated and in the second row you have selected the right amount of buttons, so it should come up with an alert stating “you have selected less answers than the required amount” as this is true for the first row.

My Question:

Why is it showing this wierd alert and why are 2 messages apppearing when it should be 1 message in the alert?. Also If there is a mistake in multiple rows then I ant only an alert to appear for the top row. When that is fixed I want then an alert for the next row row and so on.

Below is the relevant validation code (I believe the problem is the var context as I think the variable is wrong but I am not sure):

 function validation() {

                var context = $('#qandatbl');
    var currenttotal = context.find('.answerBtnsOn').length;    

    alertValidation= "";
        // Note, this is just so it's declared...

        $(".numberAnswerTxtRow").each(function() {
        if (!this.value) {
            alertValidation += "\nPlease Enter in the Number of Answers you Require for this question\n";
        }
    else if (currenttotal > $(this).val()){
        alertValidation += "\nYou have selected more answers than the required amount\n";
    }

    else if (currenttotal < $(this).val()) {
        alertValidation += "\nYou have selected less answers than the required amount\n";
    }
    });


    if(alertValidation != "")
    {
        alert(alertValidation);
        return false;
    }

Answer 1

var context = $('#qandatbl');
var currenttotal = context.find('.answerBtnsOn').length;  

This counts the number of buttons selected in the whole table, not just the current row. You should use the row in your $.each instead;

 $(".numberAnswerTxtRow").each(function() {
     var currenttotal = $(this).closest('.optionAndAnswer')
                               .find('.answerBtnsOn')
                               .length;

Note that your state should be kept separate from the DOM anyway, but since you’ve already done it all like this…