时间戳

首页 > 解决方案 > 由于我被阻止的 div 的必需输入，无法提交表单

html - 由于我被阻止的 div 的必需输入，无法提交表单

问题描述

我需要提交一个表单，但我的被阻止的 div 上的一些输入是必需的。

当我单击“否”然后提交时无法提交，我认为这是由于我的“div1”所需的输入。

当“div1”被阻止时，我应该怎么做才能删除所需的输入？

这是我的代码：

<!DOCTYPE html>
<html>
<body>
<script>
function show2(){
  document.getElementById('div1').style.display = 'block';
}
function show1(){
  document.getElementById('div1').style.display = 'none';
}
	  </script>
<form action="/action_page.php">
 	<input type="radio" name="C" value="Yes" onclick="show2();" required> Yes <br>
  	<input type="radio" name="C" value="No" onclick="show1();" required> No <br>
    
    
    <div id="div1" class="div1" style="display:none;">
	<hr>
	<h4>Div1</h4>
	<input type="radio" name="V" value="Yes"  required> Yes <br>
	<input type="radio" name="V" value="No"  required> No <br>
	
	</div>
  <input type="submit">
</form>
</body>
</html>

标签： htmlformsinputrequired

解决方案

您是否希望动态设置输入字段的所需状态？

希望这种方法有效。

  1. 将选项输入字段（id div1 下的字段）声明为非必填字段。
  2. 在单选按钮更改时，动态更新输入字段的有效性。

<form action="/action_page.php">
    <input type="radio" name="C" value="Yes" onclick="show2();" required> Yes <br>
    <input type="radio" name="C" value="No" onclick="show1();" required> No <br>


    <div id="div1" class="div1" style="display:none;">
        <hr>
        <h4>Div1</h4>
        <input type="radio" name="V" value="Yes"> Yes <br>
        <input type="radio" name="V" value="No"> No <br>

    </div>
    <input type="submit">
</form>
<script>
    function show2() {
        document.getElementById('div1').style.display = 'block';
        setFiledValidity(true);
    }

    function show1() {
        document.getElementById('div1').style.display = 'none';
        setFiledValidity(false);
    }

    function setFiledValidity(validityStatus) {
        const inputs = document.getElementById('div1').getElementsByTagName('input');
        for (let index = 0; index < inputs.length; index++) {
            // Setting validity
            inputs[index].required = validityStatus;
        }
    }

    // Initializing 
    setFiledValidity(false);
</script>

希望这是您正在寻找的解决方案。

推荐阅读