Javascript 无法提交具有多个div id的表单。。。?请帮帮我
无法提交具有多个div id的表单,当我只有一个div id时表单提交正确当我使用多个div id时表单未提交。我想在按下单选按钮时显示新字段,出于隐藏和可视性的目的,我使用了div idfour div id和不同的id名称,请帮助Javascript 无法提交具有多个div id的表单。。。?请帮帮我,javascript,html,forms,Javascript,Html,Forms,无法提交具有多个div id的表单,当我只有一个div id时表单提交正确当我使用多个div id时表单未提交。我想在按下单选按钮时显示新字段,出于隐藏和可视性的目的,我使用了div idfour div id和不同的id名称,请帮助 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Report Generation</title> &l
<!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>
问题是您在隐藏的输入字段上有必需的属性。当提交表单时,隐藏了这些字段,并且这些字段没有值,则会出现以下错误:
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.
通过显示所有字段或删除所需的属性,表单可以正常提交。解决方法是在显示时添加所需属性,在隐藏时将其删除
为此,首先定义以下功能:
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
}
}
}
其次,用class=required替换所有必需的属性。第三,增加;setRequired可在可设置的Visibles之后,单击最后四个单选按钮的onclick事件。更改:
提交表格
致:
提交表格您所说的多个部门id是什么意思?我可以看到你的部门有唯一的id;所以我看不出这有什么问题…你说没有正确提交是什么意思-有错误吗?我测试了你的代码,它正确地发送了所有数据…,但是,我删除了所有required=attribute:不,甚至没有调用pr.php文件。。。当删除3个div id并仅使用一个时,将调用pr.php。但是当前的表单甚至没有调用pr.phpy您的输入元素格式不正确,因为它们没有正确关闭-而且在关闭后您有一个关闭标记。谢谢,它工作了,并且如何添加和删除所需的内容,如您所说?我有一个想法,所以只是问问而已。请帮帮我,兄弟…使用提交表单没有问题,这不是问题的原因。