It displays a textbox with value 1 but it should display a string instead

If the user selects the option True or False and adds it into a new row, it displays a textbox with the value 1, it should instead display a string stating "Only 1 Answer" with a hidden textbox that contains the value 1.
I don't know why it is doing this. The other options 3, 4 and 5 will display a textbox for Number of Answers but True or False should display "Only 1 Answer" in the new added row.

Follow the steps below in my fiddle to use the application and to test your code in the application:

Step 1: Open the grid and select option 3. Below the option textbox it will display a textbox with the number 0 in it.

Step 2: Click on the "Add Question" button, this will add the details from the top into a new row below. As you can see under the "Number of Answers" column in you new row it displays the textbox with the value 0 from above.

Step 3. Now go back to the top control and open the grid again but this time select the option "True or False". You will see below it displays the string "Only 1 Answer"

Step 4: Now click on "Add Question". This is where the problem occurs. It will add a new row but instead of displaying "Only 1 Answer" under the "Number of Answer" column within the row you
have just added, it displays a textbox with the value 1. This is incorrect, it should display the string "Only 1 Answer" and there should be a hidden textbox which contains the value 1.

Can anyone solve this problem? Please use the fiddle to test my code and to show a working example.

Code in jsfiddle, click here
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

The span is there, it is just not visible.

I don't see anywhere in your code where you test for "if this is a true/false question, toggle the CSS for .oneanswer from display:none to display:inline"
u0867587Author Commented:
Do you know how to what to put in the if statement to be able to fince True or False, do I need another variablle? If you know how to code it then if you provide a sample it would be much appreciated.

I'm not sure how to save my changes in jsFiddle, so here is the update javascript:


    initClick = 0;

    $("#numberAnswerTxt").keyup(function(e) {
        this.value = Math.min(+this.value, +$(".gridTxt").val());

    $(document).on('click', '.showGrid', function(e) {


        var value = $(this).siblings('input[name=gridValues]').val();

        $("#btn" + value.replace(/\s/g, '')).addClass("gridBtnsOn");


            left: $(this).position().left,
            top: $(this).position().top + 20




    $(document).click(function() {

        // fadeOut already hides it for you.

    $('.optionTypeTbl input').click(function() {




    $('.gridBtns').on('click', function()


        var clickedNumber = this.value;

        $(this).closest('.option').siblings('.answer').find('.answers').each(function(index) {
            if (!isNaN(clickedNumber) && index < clickedNumber) {

            } else {





        if (clickedNumber === 'True or False') {






var currenttotal;

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).

function insertQuestion(form) {

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

    $('.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())

        $questionType = $this.val();

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

        var $this = $(this);
        var $noofanswersText = '';
        if ($questionType == 'True or False'){
            $noofanswersText = $("<span class='oneanswer' style='display:inline'>Only 1 Answer</span><input type='text' class='numberAnswerTxtRow' onkeypress='return isNumberKey(event)' onChange='getButtonsRow()'>").attr('name', $this.attr('name')).attr('value', $this.val())
            $noofanswersText = $("<input type='text' class='numberAnswerTxtRow' onkeypress='return isNumberKey(event)' onChange='getButtonsRow()'>").attr('name', $this.attr('name')).attr('value', $this.val())



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

        var $this = $(this);
        var $newBtn = '';
        if ($':visible')) {
            $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: inline-block;' />").attr('name', $this.attr('name')).attr('value', $this.val());
        } else {
            $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: none;' />").attr('name', $this.attr('name')).attr('value', $this.val());



function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;

    return true;

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

u0867587Author Commented:
Hi I tried adding the relvant code in my application but it doesn't quite seem like its working.

Can you paste your code in the jsfiddle and save it.

To save a Jsfiddle, open my Jsfiddle, put your code in and then click on the "Update" button near the top on the left hand side. When you do this it will give you a new url. Copy and paste the url for me to access :)

u0867587Author Commented:
Give me 10 mins to edit my fiddle, there is something I realised I did not include which is crucial
u0867587Author Commented:
Right, sorry it has taken a lot longer than anticipated, I have not editted the fiddle from my question. What I want you to do is use that fiddle for your code. But if you look at the fiddle below, you realise if you open the grid and choose ption "True or False", you can only select one button between "True" or False". If user tries to choose both buttons it will display an error.

So what I want is not only to display the string "Only 1 Answer" for each row which option is "True or False" but functionality of the buttons have to match as well for True and False.

Below is the fiddle to test the True or False option:

click here

u0867587Author Commented:
90% correct, not full solution
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.