Question

I need some help with when it comes to displaying the correct hidden inputs with the associated buttons

I have an application which you can view here

Please follow steps below in order to use application:

1. Click on the “Open Grid” link and select button “5”, you will see 5 buttons “A-E” appear below.
2. Click on button ‘A’ and ‘C’, these buttons would turn green meaning that they have been turned on.
3. Now click on the “Add question” button to append what you have done into a table row below.
4. Now please repeat steps 1-3 again but this time choose button “7” so you will see buttons “A-G” and click on buttons ‘B’, ‘D’ and ‘F’ so that these buttons are turned on.

Now you will see that there are 2 table rows, first table row has buttons ‘A’ and ‘C’ turned on and second row has buttons ‘B’, ‘D’ and ‘F’ turned on.

Now what I want to do is only post (using the $_POST method) the buttons which are turned on only. Now I find out that you can’t post buttons using the $_POST method but what you can do is create hidden input fields for each button and post them, if button is on then value of hidden input is 1, if it is off then value is 0.

But I am not sure if I am coding this correctly so what my question is that can somebody review the code below and state if my code below will do the job or does it need some tweaking in order for it to work? Im worried that the hidden inputs are not correct with the associated buttons:

Now below is the code which outputs the letter buttons and their hidden inputs for top option and answer control:

 <table id="optionAndAnswer" class="optionAndAnswer">
    <tr>
        <table id="answerSection">
            <tr>

        <?php
            $i = 1;
            foreach($a as $key => $val){
                if($i%7 == 1) echo"<tr><td>";
                echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answerName[$val]\" class=\"answerBtns answers answerBtnsOff\">";    
                echo"<input type=\"hidden\" value=\"0\" id=\"hiddenAnswer".$val."\" name=\"hidden[$val]\" class=\"offButtons\">";   
                if($i%7 == 0) echo"</td></tr>";
                $i++;
            }
        ?>
            </tr>
            <tr>
        <td>
        <input class="answerBtns answers answerBtnsOff" name="answerName[True]"  id="answerTrue"    type="button"   value="True"    onclick="btnclick(this);"/>
        <input class="offButtons" name="hidden[True]" id="hiddenAnswerTrue" value="0" type="hidden"/>
        <input class="answerBtns answers answerBtnsOff" name="answerName[False]" id="answerFalse"   type="button"   value="False"   onclick="btnclick(this);"/>
        <input class="offButtons" name="hidden[False]" id="hiddenAnswerFalse" value="0" type="hidden"/>
        <input class="answerBtns answers answerBtnsOff" name="answerName[Yes]"   id="answerYes"     type="button"   value="Yes"     onclick="btnclick(this);"/>
        <input class="offButtons" name="hidden[Yes]" id="hiddenAnswerYes" value="0" type="hidden"/>
        <input class="answerBtns answers answerBtnsOff" name="answerName[No]"    id="answerNo"      type="button"   value="No"      onclick="btnclick(this);"/>
        <input class="offButtons" name="hidden[No]" id="hiddenAnswerNo" value="0" type="hidden"/>
        </td>
        </tr>
        </table>
        </td>
        </tr>
        </table>

Below is the code where it outputs the letter buttons and hidden inputs from the top control and appends into the table rows (A user can turn on and off letter buttons in a table row if they wish):

    function insertQuestion(form) {   

                var context = $('#optionAndAnswer');
        var currenttotal = context.find('.answerBtnsOn').length;        



        var $tbody = $('#qandatbl > tbody'); 
        var $tr = $("<tr class='optionAndAnswer' align='center'>");
        var $td = $("<td class='extratd'>");
        var $answer = $("<div class='answer'>3. Answer:<br/></div>");

        var $this, $row, $cell;
        $('#optionAndAnswer .answers').each(function(i, v) {
            $this = $(this);
            if(i%7 == 0) {
                $row = $("<tr/>").appendTo($answer);
                $cell = $("<td/>").appendTo($row);
            }

            var v = $this.val();
            var a = { name:$this.attr('name'), value:$this.val(), class:$this.attr('class'), id:$this.attr('id')+'Row' };
            var h = $this.is(':visible')?'inline-block':'none'
            var $newBtn = $("<input type='button' style='display:" + h + "' onclick='btnclick(this);' />").attr(a);

            var $newHdn = $("<input type='hidden' value='0' id='hiddenAnswer" + v  + "' name='hidden[" + v + "]' class='offButtons' />");

            $newBtn.appendTo($cell);
            $newHdn.appendTo($cell);
        });


        $tr.append($td);
        $td.append($answer);
        $tbody.append($tr); 



    }

Finally below is the code where it turns on and off the letter buttons and their associated hidden inputs:

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

    $(btn).toggleClass("answerBtnsOff");
    $(btn).toggleClass("answerBtnsOn");

        var hiddenId = '#hiddenAnswer'+btn.value;
        if ( $(btn).hasClass("answerBtnsOff") )
        {
            $(hiddenId).val('0');
            $(hiddenId).toggleClass('offButtons');
            $(hiddenId).toggleClass('onButtons');       
        }
        else
        {
            $(hiddenId).val('1');
            $(hiddenId).toggleClass('onButtons');
            $(hiddenId).toggleClass('offButtons');
        }   

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

        return false;
    }

Answer 1

I usually turn hidden input into text input while testing so I can see what is the value.

You can also use Chrome JS console where you can type some JS like $(“#input_id”).val(); and you’ll get the value