Results 1 to 3 of 3

Thread: How to match options and answer functionality in each table row

  1. #1
    Join Date
    Dec 2011

    How to match options and answer functionality in each table row

    I have a slight situation in my app in my jsfiddle.

    What I want to do which I can't achieve is that I want the functionality of the Option Type, Number of Answers and Answer buttons within each row to match the functionality on top. The problem is that under the "Answer" column within the new row it does not allow the user to select a button and the textbox under the "Number of Answers" button doesn't do anything but just display a number within the textbox.

    Please follow these steps below to be able to use the app and see the problem.

    Step 1: Open the fiddle and you see an options and answers section on top. Open the grid and select option 8. Buttons A to H would appear.

    Step 2: Type in 2 in the Number of Answers Textbox.

    Step 3: Select buttons A and D, you will find out that those buttons would turn green to show they are selected. Now as you entered in 2 in the Number of answers textbox (step 2), it won't let you select more than 2 buttons, if you do an alert would apear stating you are beyond limit please deselect a button to choose another button.

    Step 4. Click "Add Question", a new row is added in the table.

    Step 5: In the new row you just created, lets say that oh no I made a mistake, there should be 4 answers not 2 answers and within the table row you just added you changed the number of answers textbox from 2 to 4. My question is how can I get it so that it allows the user to select the buttons (turn buttons green) and deselect (turn buttons white) under the "Answer" column within in the row and that if the user has selected 4 buttons but tries to select a 5th button, it will come up with same error as in Step 3?

    Below is code that allows that displays the answer buttons depending on the option chosen from the "Option Type" textbox:

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

    Below is code which allows you to select and deselect Answer buttons and also displays error messages if user tries to select more buttons than mentioned in the Number of Answers Textbox:
    function btnclick(btn)
        if (document.getElementById("numberAnswerTxt").value == "") {
            alert('You must first enter in the number of answers you require in the textbox above');
            return false;
            //if text box empty then send alert
        if ($(btn).hasClass("answerBtnsOn")) {
            return false;
            //if a button is already selected (in other words "answerBtnsOn), then turn it off if clicked on
        //        console.log(currenttotal);
        if (document.getElementById("numberAnswerTxt").value <= currenttotal) {
            alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
            return false;
        if ($(btn).hasClass("answerBtnsOff")) {
            return false;
            //if a button is already selected (in other words "answerBtnsOn), then turn it off if clicked on

    Below is code that adds new rows in a table after user selects their options and answers and displaying their options and answers in the new row:

    var qnum = 1;
    function insertQuestion(form) {
        alertErrors = "";
        // Note, this is just so it's declared...
        if (form.numberAnswer.value == "") {
            alertErrors = "\nPlease Enter in the Number of Answers you Require for this question\n";
        else if ($('.answerBtnsOn').length > $('#numberAnswerTxt').val()) {
            alertErrors = "\nYou have selected more answers than the required amount\n";
        else if ($('.answerBtnsOn').length < $('#numberAnswerTxt').val()) {
            alertErrors = "\nYou have selected less answers than the required amount\n";
        // Stop execution with a return
        if (alertErrors != "") {
        var $tr = $("<tr></tr>");
        var $noofanswers = $("<td class='noofanswers'></td>");
        var $options = $("<td class='option'></td>");
        var $answer = $("<td class='answer'></td>");
        $('.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())
        $('#numberAnswerTxt').each(function() {
            var $this = $(this);
            var $noofanswersText = $("<span class='oneanswer'>Only 1 Answer</span><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 = '';
            var $visibleCss = "display: none;";
                $visibleCss = "display: inline-block;"
                $newBtn = $("<input class='answerBtnsRow answers' type='button' style='" + $visibleCss + "' />").attr('name', $this.attr('name')).attr('value', $this.val());
            var $color = $this.css('color');
            var $bkgColor = $this.css('background-color');
            $newBtn.css('color', $color);
            $newBtn.css('background-color', $bkgColor);

    Whole code is in jsfiddle, click [here][1] Please test your answers in the fiddle if you wish before posting your answer. More chances of getting the correct answer

    [1]: http://jsfiddle.net/rSdwa/15/

  2. #2
    Join Date
    May 2009
    You can try using 'live' event in jquery for this.Since the new rows are added dynamically. The buttons are not responding to the click event. I'll get back to this later when i get back home.

  3. #3
    Join Date
    Nov 2011

    reply back

    Ok, you can use the fiddle to test your coding. If there are any coding you don't understand then please inform me and I will do my best to explain it to you. By the way when you said use the live event are we going to include the live() event with the on() event I already have, this is because the on() event is now used more often now then live() event?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles