1

无法提交具有多个 div id 的表单，当我只有一个 div id 表单正确提交时，当我使用多个 div id 表单未提交时。我想在按下单选按钮时显示新字段，为了隐藏和可见性，我使用了 div id（具有不同 id 名称的四个 div id）请帮忙

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
    <title>Report Generation</title>
    <link rel="stylesheet" media="screen" href="../css/formstyle.css">
    <script language="javascript" type="text/javascript">
    function setVisible(id, visible) {
        var o = document.getElementById(id);
        if (typeof(o) != 'undefined') o.style.visibility = visible ? 'visible' : 'hidden';
        if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
    }

    function setDisplay(id, visible) {
        var o = document.getElementById(id);
        if (typeof(o) != 'undefined') o.style.display = visible ? 'block' : 'none';
        if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
    }
    </script>
</head>

<body   onLoad="setVisible('Div4', false); setVisible('Div1', false);setVisible('Div3', false);setVisible('Div2', false);">
<form class="reg_form" action="pr.php" method="post" name="reg_form">

<ul>
    <li>
        <p>What type of Report you want to Create ?</p><br/>
     </li> 
     <li>
        <input type='radio' name='myradio' value='1' onclick="setVisible('Div1', true); setVisible('Div2', false);setVisible('Div3', false);setVisible('Div4', false);" />Based on Date<br/>
        <input type='radio' name='myradio' value='2' onclick="setVisible('Div2', true); setVisible('Div1', false);setVisible('Div3', false);setVisible('Div4', false);"  />Based on Income<br/>
        <input type='radio' name='myradio' value='3' onclick="setVisible('Div3', true); setVisible('Div1', false);setVisible('Div2', false);setVisible('Div4', false);" />Based on District<br/>
        <input type='radio' name='myradio' value='4' onclick="setVisible('Div4', true); setVisible('Div1', false);setVisible('Div3', false);setVisible('Div2', false);" />Based on Age<br/>
    </li>
    <li>
    <div id='Div1'>

                        <p>From Date:</p> <input type="date" name= "from" required><br/>
                        <p>To Date:</p> <input type="date" name= "to" required><br/>

    </div>
    </li>
    <li>

    <div id='Div2'>
                        <p>Select Slab:</p>
                        <input type="radio" name="slab" value="s1">Slab-1<br/>  
                        <input type="radio" name="slab" value="s2">Slab-2<br/>
            <input type="radio" name="slab" value="s3">Slab-3<br/>
    </div>
    </li>
    <li>
    <div id='Div3'>
                        <p>Enter District:</p><br/>   
                        <input type="text" name= "dist" required>
    </div>
    </li>
    <li>
    <div id='Div4'>
                        <p>Select Age From:</p><br/>     
                        <input type="number" name= "afrom" required>
                        <p>To:</p>      
                        <input type="number" name= "ato" required>
    </div>
    </li>
    <li>
        <button class="submit" type="submit">Submit Form</button>
    </li>
</ul>
    </div>

</form>
</body>
</html>
4

2 回答 2

0

问题是您required在隐藏的输入字段上有属性。当表单提交时隐藏了这些字段（并且它们没有值），您会收到错误消息：

An invalid form control with name='from' is not focusable.
An invalid form control with name='to' is not focusable.
An invalid form control with name='dist' is not focusable.
An invalid form control with name='afrom' is not focusable.
An invalid form control with name='ato' is not focusable.

通过显示所有字段或删除required属性，表单可以正常提交。对此的解决方案是required在显示时添加属性并在隐藏时将其删除。

为此，首先定义以下函数：

function setRequired()
{

  var r = document.getElementsByClassName('required')

  for (var i in r)
  {

    if (r[i].parentNode && r[i].parentNode.style.visibility == 'visible')
    {
      r[i].required = true
    }

    else
    {
      r[i].required = false
    }

  }

}

其次，将所有required属性替换为class="required". 第三，添加四个单选按钮;setRequired()的onclick事件（最后，在setVisibles 之后）。

于 2013-03-30T18:10:33.287 回答
0

改变：

<button class="submit" type="submit">Submit Form</button>

到：

<input type="submit">Submit Form</input>

于 2013-03-30T18:13:45.457 回答