如果我在驱动器上本地运行该文件,以下代码可以正常工作。不幸的是,我需要将此表单上传到名为MasterControl的软件中。这是行不通的。我想知道是否存在另一种对本地通用的编码方式以及上传到MasterControl的服务器。
此代码的目的是 - 在第一级问题上单击“是”按钮后,将显示下一级问题。如果您单击第一级上的“否”按钮,如果显示下一级问题,则会清除所有选定的按钮并隐藏第二级问题的部分。
以下是代码:
HTML代码:
<div id="divDeathOccurred" class="fieldRow">
<div class="leftLabel labelWidth22">
<label for="">A. Has a death occurred?</label>
</div>
<div class="leftField">
<div class="formField34">
<input id="rbDeathOccurred" name="rbDeathOccurred"
type="radio" class="radiobuttonfield" title="Death Occurred"
value="Yes" onclick="javascript:USAYesNoCheckDO();" />Yes
<input id="rbDeathOccurred" name="rbDeathOccurred"
type="radio" class="radiobuttonfield" title="Death Occurred"
value="No" onclick="javascript:USAYesNoCheckDO();" />No
</div>
</div>
<p> </p>
<div id="USADOYesNo" style="display:none">
<ol type="1" class="indentList">
<li>Is there a reasonable possibility that a device failure
or malfunction was a direct or indirect factor in the death?
<br>
<input id="rbDOYesNo" name="rbDOYesNo" type="radio"
class="USDO radiobuttonfield" title="Yes Reportable" value="Yes"
onclick="javascript:USDeviceFailure30Days();" />
<label for="rbDOYesNo" class="rptColor">Yes -
reportable</label>
<input id="rbDOYesNo" name="rbDOYesNo" type="radio"
class="USDO1 radiobuttonfield" title="No" value="No"
onclick="javascript:USDeviceFailure30Days();" />No - No
Report
<div id="calc" class="indentListCalc">
<input id="dt30Days3" type="text" class="textfieldCalc
labelWidth25" alt="Device Malfunction" />
</div>
<p></p>
</li>
<li>Is there a reasonable possiblity that a device design
defect was direct or indirect factor in the death?
<br>
<input id="rbDOYesNo1" name="rbDOYesNo1" type="radio"
class="USDO2 radiobuttonfield" title="Yes Reportable" value="Yes"
onclick="javascript:USDeviceDesign30Days();"/>
<label for="rbDOYesNo1" class="rptColor">Yes -
Reportable</label>
<input id="rbDOYesNo1" name="rbDOYesNo1" type="radio"
class="USDO3 radiobuttonfield" title="No" value="No"
onclick="javascript:USDeviceDesign30Days();" />No - No Report
<div id="calc1" class="indentListCalc">
<input id="dt30Days1" type="text" class="textfieldCalc
labelWidth25" alt="Device Design" />
</div>
<p></p>
</li>
<li>Is there a reasonable possiblity that the device
labeling was direct or indirect factor in the death?
<br>
<input id="rbDOYesNo2" name="rbDOYesNo2" type="radio"
class="USDO4 radiobuttonfield" title="Yes Reportable"
value="Yes" onclick="javascript:USDeviceLabeling30Days();"/>
<label for="rbDOYesNo2" class="rptColor">Yes -
Reportable</label>
<input id="rbDOYesNo2" name="rbDOYesNo2" type="radio"
class="USDO5 radiobuttonfield" title="No" value="No"
onclick="javascript:USDeviceLabeling30Days();"/>No - No Report
<div id="calc2" class="indentListCalc">
<input id="dt30Days2" type="text" class="textfieldCalc
labelWidth25" alt="Device Labeling" />
<p></p>
</div>
</li>
</ol>
</div>
</div> <!-- final section Death Occurred end -->
Javascript代码:
function USAYesNoCheckDO() {
if (document.getElementById('rbDeathOccurred').checked) {
document.getElementById('USADOYesNo').style.display = 'block';
} else {
document.getElementById('USADOYesNo').style.display = 'none';
document.getElementsByClassName('USDO')[0].checked = false;
document.getElementsByClassName('USDO1')[0].checked = false;
document.getElementById('calc').style.display = 'none';
document.getElementsByClassName('USDO2')[0].checked = false;
document.getElementsByClassName('USDO3')[0].checked = false;
document.getElementById('calc1').style.display = 'none';
document.getElementsByClassName('USDO4')[0].checked = false;
document.getElementsByClassName('USDO5')[0].checked = false;
document.getElementById('calc2').style.display = 'none';
}
}
我仍然在学习所有这些HTML,Javascript,而我刚刚进入JQuery。
如果您需要我将这些代码放入jsfiddle,请告诉我。
非常感谢你,
IreneS
更新
我忘了添加代码在您选择按钮和显示和隐藏时在服务器上工作 - 一件事不起作用就是清除所选按钮。
再次感谢你。
更新2:
经过几个小时的研究并试图学习Jquery,希望它能给我另一种方法来解决这个问题并让它在服务器上运行,不幸的是它没有。我之所以尝试使用Jquery,是因为我正在查看MasterControl服务器上的其他表单,并且它们是用Jquery编写的。不幸的是,作为Jquery的初学者,我无法让它在双方 - 本地驱动器和服务器上工作。请有人检查一下,看看我错过了什么或做错了什么。
function getChecked(radioGroupName, index)
{
var oRadioList = document.getElementsByName(radioGroupName);
return oRadioList[index].checked;
}
function setChecked(radioGroupName, index, state)
{
var oRadioList = document.getElementsByName(radioGroupName);
oRadioList[index].checked = state;
}
function USAYesNoCheckDO()
{
if(getChecked("rbDeathOccured",0) == true)
{
$('#USADOYesNo').slideDown(1000);
}
else
{
$('#USADOYesNo').slideUp(1000);
setChecked("rbDOYesNo",0,false);
setChecked("rbDOYesNo",1,false);
setChecked("rbDOYesNo1",0,false);
setChecked("rbDOYesNo1",1,false);
setChecked("rbDOYesNo2",0,false);
setChecked("rbDOYesNo2",1,false);
}
}
或者,如果您有任何想法如何解决此问题。正如我之前提到的,按钮工作以及问题的显示和隐藏起作用,问题是当我想重置并将其设置回原始状态时 - 空白。
再次感谢您,感谢任何帮助。
IreneS
更新3:
请有任何人对如何解决此问题有任何想法/想法。
我真的很感激任何帮助。
谢谢,
IreneS
更新4:
只是因为有人遇到与我相同的问题并需要一个解决方案,我终于找到了一个网站,经过所有这段时间的搜索,给了我答案,它的确有效!叶!我只是根据我的需要定制了编码,它可以在本地和服务器上运行。
http://www.electrictoolbox.com/javascript-clear-form/
IreneS。
答案 0 :(得分:0)
您对多个元素使用相同的id
属性。 id
在页面上应该是唯一的,只有name
可以相同,以便对同一类型的多个输入元素进行分组。我不知道这是否是主要问题,但这是一个开始。