Question

I have a jsfiddle here: http://jsfiddle.net/aND4g/2/ I am having a problem with a text input value being displayed.

What should happen is that if the Option is True or False or Yes or No, then the Number of Answers text input should always contain the value 1 (ALWAYS, this value can’t change); if the user then changes from True or False or Yes or No option to one of the numbered options, then the text input should go back to 0.

The problem though if the user appends the True or False or Yes or No option into a table row, does not turn on any of the answer buttons of either True,False,Yes or No and then changes the option to one of the numbered options, then instead of displaying 0, it is still displaying value 1.

But if the user does turn on one of either True,False,Yes or No answer buttons and then change the option from True or False or Yes or No to one of the numbered options, then it does change the value in text input from 1 to 0.

Why is it doing this and how can it be fixed so that everytime a numbered option is selected, it is always going to be 0 in the text input?

I believe the problem is somewhere below but not sure:

$(this).closest('.option').siblings('.answer').find('.answers').each(function(index) {
    if (!isNaN(clickedNumber) && index < clickedNumber) {
      $(this).show();
      if (prevButton === 'True or False' || prevButton === 'Yes or No') {
        // show as blank
        $(this).closest('.option').siblings('.numberAnswer').find('.answertxt').val(0).show();
      } else {
        // show but don't change the value
        $(this).closest('.option').siblings('.numberAnswer').find('.answertxt').show();
      }
    } else {
      $(this).hide();
      $(this).removeClass('answerBtnsOn');
      $(this).addClass('answerBtnsOff');
    }
    ....

    function btnclick(btn, iQuestionIndex, bDisableAppend) {
      //var context = $(btn).parent();
      var context = $(btn).parents('tr'); // need to go up one level
      context.add(context.siblings()); // to collect siblings in other rows since the limit in each row is 7
      if (context.length == 0) {
        context = $(btn).parents('tr');
      }
      var $btn = $(btn);
      var value = btn.value;
      var id = $btn.attr('id');
      ....
      updateAnswer(context , iQuestionIndex, bDisableAppend);
      var container = $btn.closest(".optionAndAnswer");
      // here the zero gets assigned
      var answertxt = $(".answertxt", container);
      var numberison = $(".answerBtnsOn", container).length;
      var maxRowValue = $('.gridTxt', container).val();
      if (btn.id == "answerTrueRow" || btn.id == "answerFalseRow")
        return;
      if (maxRowValue === 'True or False' || maxRowValue === 'Yes or No') {
        if (answertxt.val() == 1 && numberison == 0) {
          numberison = 1;
        }
      }
      answertxt.val(numberison);
      return false;
    }

UPDATE:

The fiddle is just a complete shortened version of the main application. For each row appended it counts as a question, so row 1 is question 1, row 2 is question 2 etc. In the fiddle you selct an option type, number of answers and correct answers in the top and then append it into a row. You can edit an option type, number of answers, and correct answers in an appended row if you wish if you want to make a change. That is why it is set out as the way it is set out.

STEPS TO FOLLOW FOR JSFIDDLE:

Steps to see what happens if previous option is True or False or Yes or No but no answer button is turned on:

1. When you open the app, click on the Open Grid link and select the button True or False or Yes or No from the grid. Then click on the Add Question button, this will append a row underneath of what you have selected.

2. You can see in the text input in the appended row that the value for Number of answers is 1, this is fine. But in the appended row click on Open Grid and select a number option of either 3 or 4. The text input for Number of answers does not change to 0 as it should do, it still displays 1.

Steps to see what happens if previous option is True or False or Yes or No but an answer button is turned on:

1. Repeat step 1 from the above.

2. Repeat step 2 from the above but before you click on Open Grid to change the option, select the Answer button at the bottom of the row of either True or False / Yes or No (depends which option you chose) then change the option to a number option. You see that the value does change from 1 to 0.

UPDATE:

I have had a working fiddle here with my old code: http://jsfiddle.net/aND4g/50/

Here is latest jsfiddle which isn’t quite working: http://jsfiddle.net/aND4g/53/

I have found that the only difference between the fiddle and what has stopped it working is this code below:

var $tbody = $('#qandatbl_onthefly > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $td = $("<td width='50%' class='extratd'>");
var $options = $("<table class='option'><tbody><tr><td>1. Option Type:</td></tr></tbody></table>");
var $noofanswers = $("<br /><table class='noofanswers'><tbody><tr><td>2. Number of Answers:</td></tr></tbody></table>");
var $answer = $("<br /><table class='answer'><tbody><tr><td>3. Answer:</td></tr></tbody></table>");
var $questionType = '';

The working version contains the code below:

var $tbody = $('#qandatbl_onthefly > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $td = $("<td class='extratd'>");
var $noofanswers = $("<div class='noofanswers'>2. Number of Answers:<br/></div>");
var $options = $("<div class='option'>1. Option Type:<br/></div>");
var $answer = $("<div class='answer'>3. Answer:<br/></div>");
var $questionType = '';

If I change the $options, $noofanswers and $answer variable from <table> tags to <div> tags, then it works. But I want the variables to be placed in <table> tags not <div> tags. So how come it doesn’t work when in <table> tags?

Answer 1

Found the problem: jsFiddle: http://jsfiddle.net/NhaCN/

var $tbody = $('#qandatbl_onthefly > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $td = $("<td width='50%' class='extratd'>");
var $options = $("<table class='option'><tbody><tr><td>1. Option Type:</td></tr></tbody></table>");
var $noofanswers = $("<br /><table class='noofanswers'><tbody><tr><td>2. Number of Answers:</td></tr></tbody></table>");
var $answer = $("<br /><table class='answer'><tbody><tr><td>3. Answer:</td></tr></tbody></table>");
var $questionType = '';

You are creating a jquery element with two tags, a br and a table. So, whatever you append to the element will get added to both the tags.

Working code

var $tbody = $('#qandatbl_onthefly > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $td = $("<td width='50%' class='extratd'>");
var $options = $("<table class='option'><tbody><tr><td>1. Option Type:</td></tr></tbody></table>");
var $noofanswers = $("<table class='noofanswers'><tbody><tr><td>2. Number of Answers:</td></tr></tbody></table>");
var $answer = $("<table class='answer'><tbody><tr><td>3. Answer:</td></tr></tbody></table>");
var $questionType = '';

If you need new line between the elements, then add it here:

$tr.append($td);
$td.append($options);
$td.append("<br/>");
$td.append($noofanswers);
$td.append("<br/>");
$td.append($answer);
$tbody.append($tr);