Question

在使用相关按钮

显示正确的隐藏输入时，我需要一些帮助

我有一个应用程序，您可以查看here

请按照以下步骤使用申请表：

点击“打开网格”链接并选择“5”按钮，您将看到下面出现5个按钮“A-E”。
点击按钮'A'和'C'，这些按钮会变为绿色，表示它们已经打开。
现在点击“添加问题”按钮，将您已完成的内容附加到下面的表格行中。
现在请再次重复步骤1-3，但这次选择按钮“7”，这样您就会看到“AG”按钮并点击按钮“B”，“D”和“F”，这样这些按钮就会打开。

现在您将看到有2个表行，第一个表行的按钮'A'和'C'打开，第二行有按钮'B'，'D'和'F'打开。

现在我想要做的只是发布（使用$ _POST方法）仅打开的按钮。现在我发现你不能使用$ _POST方法发布按钮，但你可以做的是为每个按钮创建隐藏的输入字段并发布它们，如果按钮打开则隐藏输入的值为1，如果它关闭则值为0.

但我不确定我是否正确编码，所以我的问题是，有人可以查看下面的代码，并说明我的代码是否可以完成这项工作，还是需要进行一些调整以使其正常工作？我担心相关按钮的隐藏输入不正确：

现在，下面是输出顶部选项和答案控件的字母按钮及其隐藏输入的代码：

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

下面是代码，它从顶部控件输出字母按钮和隐藏输入并附加到表格行中（如果用户愿意，用户可以打开和关闭表格行中的字母按钮）：

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



    }

最后，下面是打开和关闭字母按钮及其相关隐藏输入的代码：

    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

我经常在测试时将隐藏的输入转换为文本输入，这样我就可以看到它的值是什么。

您还可以使用Chrome JS控制台，您可以在其中键入一些JS，如$（“＃input_id”）。val（）;你会得到价值

在将隐藏输入与按钮相关联时，下面的代码是否可行？

1 个答案: