gpt4 book ai didi

javascript - 无法提交具有多个 div id 的表单...?请帮我

转载 作者:行者123 更新时间:2023-11-28 09:15:28 25 4
gpt4 key购买 nike

无法提交具有多个 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>

最佳答案

问题是您在隐藏输入字段上有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 属性,并在隐藏时将其删除。

要实现此目的,首先定义以下函数:

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 事件中(在最后,在 setVisible 之后)。

关于javascript - 无法提交具有多个 div id 的表单...?请帮我,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15721659/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com