Question

I am not quite having the test inputs right for the “Yes”, “No”, “True” and “False” buttons. You can see and test for yourself here. Please follow steps below:

1. Click on “Open Grid” and select button “True or False”, “True” and “False” buttons will appear.
2. Click on button “True”, the button will turn green and you will see the text input for that button below. This is fine.
3. Now click on the “False” button, what happens is that the “False” button is turned on and the “True” button is turned off (goes back to being white). Now the good thing is the “False” text input appears, the bad thing is that it does not remove the “True” text input.

So what my question is that if the user clicks on alternative buttons of either “True” or “False” or “Yes” or “No”, I want the button which has just been turned off to have it’s input removed.

How can this be achieved?

Below is the function which adds and remove the inputs:

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

    var $otherYNBtn = value === "Yes" ? $(context.find("input[value='No']")) : $(context.find("input[value='Yes']"));
    var $otherTFBtn = value === "True" ? $(context.find("input[value='False']")) : $(context.find("input[value='True']"));


    if ($(context.find("input[value='Yes']")).hasClass('answerBtnsOn')) {
        $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($(context.find("input[value='No']")).hasClass('answerBtnsOn')) {
        $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    if ($(context.find("input[value='True']")).hasClass('answerBtnsOn')) {
        $otherTFBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($(context.find("input[value='False']")).hasClass('answerBtnsOn')) {
        $otherTFBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }


    if ($(btn).hasClass('answerBtnsOff')) {
        var n = $("input[name='" + id + "value']").length;
        var hid = "hidden" + id + n + "value";  
        $(btn).attr("data-hid", hid);

        // append those values to the form
        var input = '<input type="text" id="' + hid + '" value="' + value + '" name="' + id + 'value" />';
        $('#QandA').append(input);      
        // toggle the button
        $btn.removeClass('answerBtnsOff').addClass('answerBtnsOn'); 
    // do the opposite - remove the input
    }
    else {
        $("#" + $(btn).attr("data-hid")).remove();
        $btn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }  


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

    return false;
}

Below are the “True”, “False”, “Yes” and “No” buttons:

 <table id="optionAndAnswer" class="optionAndAnswer">
    <tr>
    <tr class="answer">
    <td>3. Answer</td>
    <td>
    <table id="answerSection">
  <tr>
<td>
<input class="answerBtns answers answerBtnsOff" name="answerName[True]"  id="answerTrue"    type="button"   value="True"    onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[False]" id="answerFalse"   type="button"   value="False"   onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[Yes]"   id="answerYes"     type="button"   value="Yes"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[No]"    id="answerNo"      type="button"   value="No"      onclick="btnclick(this);"/>
</td>
</tr>
    </table>
    </td>
    </tr>
    </table>

Answer 1

Here is a solution for your jsfiddle:

http://jsfiddle.net/Bjqr6/12/

Overall your approach is not the best way to go about it, but I wouldn’t have time to do it from scratch. Next time, I would consider putting your Questions and Answers into classes and just maintaining a global array for the values. That way generating the Html code will be a heck of a lot easier to separate from the actual values and properties that matter.