我创建了一个包含两个单选按钮的表单。
单击时,每个单选按钮都会显示一个单独的表单。
取消单击按钮时,表单从 View 中消失(不显示)
我还添加了第二个 JavaScript 函数,如果没有单击任何单选按钮,该函数将禁用“提交”按钮。
该程序运行良好............但我有以下问题:
(a) 由于某种原因,我可以单击两个单选按钮!单选按钮不应允许多于一项的选择。但是,在我的表单中,两个单选按钮都是可单击的
(b) 第二个 JS 函数不工作;禁用“提交”按钮很容易。但是............当我单击任一单选按钮时,“提交”按钮未启用。
这是第一个 JS 函数(用于“隐藏”每个单选按钮下的表单)
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>
<script type='text/javascript'>
function displayForm(c) {
if (c.value == "2") {
jQuery('#firstformContainer').toggle('show');
jQuery('#secondformContainer').hide();
}
if (c.value == "1") {
jQuery('#secondformContainer').toggle('show');
jQuery('#firstformContainer').hide();
}
};
</script>
第二个函数,用于禁用“提交”按钮:
<script type="text/javascript">
function fCheck() {
document.my_form.submit.disabled
=!(document.my_form.formselector1.checked ||
document.my_form.formselector2.checked);
}
</script>
这是表格:
<form name="my_form" id="my_form">
<input value="1" type="radio" name="formselector"
id="formselector1" onClick="displayForm(this); fCheck()"></input>Input
Firstname
<div style="display:none" id="firstformContainer">
<form id="firstform">
<input type="text" "16" id="firstname"
name="firstname" value="$firstname">
</form>
</div>
<br>
<br>
<input value="2" type="radio" name="formselector"
id="formselector2" onClick="displayForm(this); fCheck()">
</input>Input Surname
<div style="display:none" id="secondformContainer">
<form id="secondform">
<input type="text" id="surname" name="surname"
value="$surname">
</dd>
</form>
</div>
<br>
<input type="submit" name="submit" value="REGISTER" disabled>
</form>
我错过了什么?
更新
我已经解决了RADIO BUTTON问题。
现在,我需要使用 JS 函数解决第二个问题:fCheck ()
它不起作用。
我感觉这是因为:我没有在ONCLICK中正确调用两个函数。
<input value="1" type="radio" name="formselector" id="radio1"
onClick="displayForm(this); javascript:fCheck()"></input>
<input value="2" type="radio" name="formselector" id="radio2"
onClick="displayForm(this); javascript:fCheck()"></input>
最佳答案
您不能嵌套表单。这使得第二个单选按钮不在表单内,因此它允许您同时选择这两个按钮。像这样重写你的 html
<form name="my_form" id="my_form">
<input value="1" type="radio" name="formselector" id="formselector1" onClick="displayForm(this); fCheck()"></input>
<input value="2" type="radio" name="formselector" id="formselector2" onClick="displayForm(this); fCheck()"></input>
<input type="submit" name="submit" value="REGISTER" disabled>
</form>
Input Firstname
<div style="display:none" id="firstformContainer">
<form id="firstform">
<input type="text" "16" id="firstname" name="firstname" value="$firstname">
</form>
</div>
<br>
<br>
Input Surname
<div style="display:none" id="secondformContainer">
<form id="secondform">
<input type="text" id="surname" name="surname" value="$surname">
</form>
</div>
<br>
关于JavaScript 函数弄乱了我的单选按钮显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29952557/