Question

编辑3：啊哈......有些进展。问题实际上是在我遗漏的div之下的一些代码中（下面更新了HTML以反映）。第二个div包含一个＆＃34; required＆＃34;输入，所以只需通过javascript将div更改为display = none，实际上不会使页面完全忽略隐藏的Div。所以我的问题的角度略有改变 - 如何调整下面的代码以完全忽略隐藏的div，以便不读取所需的字段？

编辑2：我尝试删除下面的第二个JS代码块并将动态PHP代码直接插入input和div标签以更改显示 - 仍然没有运气。

编辑1：为了确认，类似问题的解决方案在这种情况下无效：Auto checked radio buttons and php form processing - How to avoid blank field?似乎Chrome团队在以后的版本中进行了更改，使此解决方案变得多余。< / p>

网站上的用户可以选择积分或邮票 - 我通过PHP从数据库中获取值，表格应该选中相关的单选按钮，并且只显示与该单选按钮相关的Div。

一切正常，但是，除非我手动更改单选按钮，否则它不会让我发布表单，即我无法使用自动从数据库中选择的值发布 - 这似乎是一个类似的问题（Chrome Browser Ignoring AutoComplete=Off） - 但无论我使用Chrome自动填充功能做什么，它都无法正常工作。此外，页面还将收音机识别为已选中，因为它在正确的位置显示了我的点。（编辑3：仍然不确定为什么这在Mozilla中有效但在Chrome中不起作用 - 但最新的Edits使这一点变得不那么重要了）

如果单选按钮被更改，那么我的JS会显示正确的Div：

$(function () {
          var $divs = $('#option > div');
           $('input[type=radio]').change(function() {
                  $divs.hide();
                  $divs.eq( $('input[type=radio]').index( this ) ).show();
              });
    });

这个JS根据数据库设置正确的单选按钮，并在页面加载时显示正确的div：

$(function() {
        var $radios = $('input:radio[name=selection]');
        var $type = "<?php echo $type; ?>";


        if($type === 'points') {
            $radios.filter('[value=points]').prop('checked', true);
            document.getElementById('pointsdiv').style.display = 'block';
            document.getElementById('stampdiv').style.display = 'none';

        }
        else if($type === 'stamp') {
            $radios.filter('[value=stamp]').prop('checked', true);
            document.getElementById('stampdiv').style.display = 'block';
            document.getElementById('pointsdiv').style.display = 'none';

        }
    });

我的HTML和PHP：

$type = $_SESSION['user']['type']; //Note: This is actually set at the very top of the page i.e. before the JS

<form autocomplete="off" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST" role="form">

                <input type="radio" id="selection" name="selection" value="points"></input><label>Points</label>
            &nbsp;
            &nbsp;    
                <input type="radio" id="selection" name="selection" value="stamp"></input><label>Stamps</label><br></br>


                <div id="option"> 

                        <div id="pointsdiv"> 
                            //Points related information here
                           <input type="text" required="required"/>
                        </div>
                        <div id="stampdiv"> 
                            //Stamp related information here - below input is required so when pointsdiv is displayed, this entire div should not even load
                          <input type="text" required="required"/>
                        </div>


                   </div>
<button type="submit" class="button">Save</button>
</form>

任何人都有任何想法如何我可以加载此页面并发布表格，如果我不更改单选按钮 - 即如果它加载＆＃34;点＆＃34;选中，然后点击“保存”按钮？

Answer 1

输入广播组必须具有相同的名称，但ID不能相同，所以你应该改变id =＆＃34; selection＆＃34;其中一个。

如果所有内容都在同一页面中且页面在php中，那么你必须在设置输入值之前等待dom准备好。

有一种不使用javascript的动态方式：

<input type="radio" <?=$type =='points'?='checked="checked"':''?> id="selection" name="selection" value="points">

你可以用另一个radiobutton做同样的事情以及divs pointsdiv和stampdivs

Chrome自动选中单选按钮，隐藏的div带有“必需”阻止POST

1 个答案: