Moorkepupelry
New Member
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:Click on "Open Grid" and select button "True or False", "True" and "False" buttons will appear.Click on button "True", the button will turn green and you will see the text input for that button below. This is fine.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 = http://stackoverflow.com/questions/12753868/btn.value; var id = $btn.attr('id'); var $otherYNBtn = value =http://stackoverflow.com/questions/12753868/=="Yes" ? $(context.find("input[value='http://stackoverflow.com/questions/12753868/No']")) : $(context.find("input[value='http://stackoverflow.com/questions/12753868/Yes']")); var $otherTFBtn = value =http://stackoverflow.com/questions/12753868/=="True" ? $(context.find("input[value='http://stackoverflow.com/questions/12753868/False']")) : $(context.find("input[value='http://stackoverflow.com/questions/12753868/True']")); if ($(context.find("input[value='http://stackoverflow.com/questions/12753868/Yes']")).hasClass('answerBtnsOn')) { $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff'); } else if ($(context.find("input[value='http://stackoverflow.com/questions/12753868/No']")).hasClass('answerBtnsOn')) { $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff'); } if ($(context.find("input[value='http://stackoverflow.com/questions/12753868/True']")).hasClass('answerBtnsOn')) { $otherTFBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff'); } else if ($(context.find("input[value='http://stackoverflow.com/questions/12753868/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="http://stackoverflow.com/questions/12753868/True" onclick="btnclick(this);"/><input class="answerBtns answers answerBtnsOff" name="answerName[False]" id="answerFalse" type="button" value="http://stackoverflow.com/questions/12753868/False" onclick="btnclick(this);"/><input class="answerBtns answers answerBtnsOff" name="answerName[Yes]" id="answerYes" type="button" value="http://stackoverflow.com/questions/12753868/Yes" onclick="btnclick(this);"/><input class="answerBtns answers answerBtnsOff" name="answerName[No]" id="answerNo" type="button" value="http://stackoverflow.com/questions/12753868/No" onclick="btnclick(this);"/></td></tr> </table> </td> </tr> </table>