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
u0867587Asked:
Who is Participating?
 
nap0leonConnect With a Mentor Commented:

I'm not sure how to save my changes in jsFiddle, so here is the update javascript:
$(document).ready(function()

{

    initClick = 0;

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



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

        $(".gridBtns").removeClass("gridBtnsOn");

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

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

        $('.optionTypeTbl').fadeToggle('slow');
        $(this).parent().append($('.optionTypeTbl'));
        $('.optionTypeTbl').css({

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

        });

        e.stopPropagation();

    });



    $(document).click(function() {

        $('.optionTypeTbl').fadeOut('slow');
        // fadeOut already hides it for you.
    });

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

        $(".gridBtns").removeClass("gridBtnsOn");
        $(this).addClass("gridBtnsOn");

        console.log($(this).closest('td'));

        $(this).closest('.optionTypeTbl').siblings('input[name=gridValues]').val($(this).val());
        $('.optionTypeTbl').hide();
    });



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

    {

        var clickedNumber = this.value;

        $(this).closest('.option').siblings('.answer').find('.answers').each(function(index) {
            if (!isNaN(clickedNumber) && index < clickedNumber) {
                $(this).show();
                $('#numberAnswerTxt').show();
                $('.na').hide();
                $('#allBtns').show();
                $('#allRemoveBtns').show();

            } else {

                $(this).hide();
                $(this).removeClass('answerBtnsOn');
                $(this).addClass('answerBtnsOff');

            }

        });

        $('#numberAnswerTxt').val($('.answerBtnsOn:visible').size());


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

            $(this).closest('.option').siblings('.answer').find('input[name=answerTrueName]').show();
            $(this).closest('.option').siblings('.answer').find('input[name=answerFalseName]').show();
            $('.na').show();
            $('#numberAnswerTxt').val(1).hide();
            $('#allBtns').hide();
            $('#allRemoveBtns').hide();

        }

        getButtons();

    });

});

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");

        }
        $("#answerTrue").removeClass("answerBtnsOn").addClass("answerBtnsOff");
        $("#answerFalse").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())

        $options.append($optionsText);
        $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())
        }else{
            $noofanswersText = $("<input type='text' class='numberAnswerTxtRow' onkeypress='return isNumberKey(event)' onChange='getButtonsRow()'>").attr('name', $this.attr('name')).attr('value', $this.val())
        }

        $noofanswers.append($noofanswersText);

    });


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

        var $this = $(this);
        var $newBtn = '';
        if ($this.is(':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());
        }

        $tr.append($options);
        $tr.append($noofanswers);
        $tr.append($answer);
        $('#qandatbl').append($tr);

    });
}

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

0
 
nap0leonCommented:
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"
0
 
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.
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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

0
 
u0867587Author Commented:
Give me 10 mins to edit my fiddle, there is something I realised I did not include which is crucial
0
 
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

0
 
u0867587Author Commented:
90% correct, not full solution
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.