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

Posted 2023-03-07

【中文标题】Chrome 自动检查单选按钮，隐藏 div，带有“必需”阻止 POST

【英文标题】：Chrome Auto-checked radio button, hidden div with "required" blocking POST

【发布时间】：2014-07-01 02:11:12

【问题描述】：

编辑 3：啊哈……有些进展。问题实际上出在我遗漏的 div 下面的一些代码中（更新了下面的 html 以反映）。第二个 div 包含一个“必需的”输入，因此只需通过 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 团队似乎在以后的版本中进行了更改，使该解决方案变得多余。

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

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

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

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

此JS根据DB设置正确的单选按钮，并在页面加载时显示正确的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>

如果我不更改单选按钮，即如果加载时选中“点”并单击“保存”按钮，任何人都知道如何加载此页面并发布表单？

【参考方案1】：

输入单选组必须具有相同的名称但不同的 id， 所以你应该为其中一个更改 id="selection"。

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

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

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

你可以用另一个单选按钮做同样的事情 还有 div 的 pointsdiv 和 stampdivs

【讨论】：

谢谢。但没有喜悦。我在问题的第二个块中删除了我的整个 JS 集。我按照建议更改了收音机的 ID，并将 php 插入到这样的输入中： /> 等...并在 div 中如下： > etc... 仍然没有运气 - 正在显示正确的收音机和 div，但除非我点击不同的收音机，然后返回原来的收音机，表单不会发布