如果选择了特定的单选按钮,如何显示窗体
How to show a form if a particular radio button is selected
我想在选择单选按钮时显示一个特定的窗体。该代码似乎对我来说很好,只是当页面加载时,它显示两个表单,而不是在输入标签中检查其值的一个表单
<?php
function print_form()
{
$newform = "
<body>
<section>
<div><strong>Select your Quantity Format</strong></div>
<input type='"radio'" id='"radio1'" name='"radios'" value='"radio1'" checked onclick='"show()'">
<label for='"radio1'">Per Unit</label>
<input type='"radio'" id='"radio2'" name='"radiOS'" value='"radio2'" onclick='"show()'">
<label for='"radio2'">Per Box</label>
<form method='"post'" id='"unit'" action='"{$_SERVER['PHP_SELF']}'" >
<table border=1 cellpadding=3 cellspacing=3 width='30%'>
<tr>
<th colspan=2 align='left' bgcolor='#EAEAEA'>Add Medicine/Item Details</th>
</tr>
<tr>
<td>Medicine/Item Name</td>
<td><input type='"text'" name='"Medicine/Item_Name'"></td>
</tr>
<tr>
<td>Company Name</td>
<td><input type='"text'" name='"Company_Name'"></td>
</tr>
<tr>
<td>Stowage Rack No.</td>
<td><input type='"text'" name='"Rack'" onkeypress='"return isNumberKey(event)'" ></td>
</tr>
<tr><td colspan=2><input type='"submit'" value='"Add Record'">
<input type='"hidden'" value='"true'" name='"unit'"></td></tr>
</table></form>
<form method='"post'" id='"box'" action='"{$_SERVER['PHP_SELF']}'" >
<table border=1 cellpadding=3 cellspacing=3 width='30%'>
<tr>
<th colspan=2 align='left' bgcolor='#EAEAEA'>Add Medicine/Item Details</th>
</tr>
<tr>
<td>Medicine/Item Name</td>
<td><input type='"text'" name='"Medicine/Item_Name'"></td>
</tr>
<tr>
<td>Company Name</td>
<td><input type='"text'" name='"Company_Name'"></td>
</tr>
<tr>
<td>Minimum Stock (Boxes)</td>
<td><input type='"text'" name='"Minimum_Stock_box'" onkeypress='"return isNumberKey(event)'"></td>
</tr>
<tr>
<td>Stowage Rack No.</td>
<td><input type='"text'" name='"Rack'" onkeypress='"return isNumberKey(event)'" ></td>
</tr>
<tr><td colspan=2><input type='"submit'" value='"Add Record'">
<input type='"hidden'" value='"true'" name='"box'"></td></tr>
</table></form>
</section>
<body>
";
return $newform;
}
if(isset($_POST['unit']))
{
save_record_unit();
}
else if(isset($_POST['box']))
{
save_record_box();
}
else
{
print print_form();
}
?>
我为此使用的JavaScript如下
function show()
{
var radios = document.getElementsByName("radios");
var unit = document.getElementById("unit");
var box = document.getElementById("box");
box.style.display = 'block';
for(var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
var val = this.value;
if(val == 'radio1' ){
unit.style.display = 'block';
box.style.display = 'none';
}
else if(val == 'radio2'){
unit.style.display = 'none';
box.style.display = 'block';
}
}
}
}
您似乎忘记了在开头隐藏一个。您可以使用style='display:none'
直接在html中执行,也可以在css类中执行,或者在页面加载时直接使用jquery执行。
这里是您的php函数:
function show()
{
var radios = document.getElementsByName("radios");
var unit = document.getElementById("unit");
var box = document.getElementById("box");
box.style.display = 'none';
for(var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
var val = this.value;
if(val == 'radio1' ){
unit.style.display = 'block';
box.style.display = 'none';
}
else if(val == 'radio2'){
unit.style.display = 'none';
box.style.display = 'block';
}
}
}
}
.alert{ color:white; background-color:red;padding:2em;margin:2em;}
<body>
<?php
function print_form(){
$newform="
<section>
<div><strong>Select your Quantity Format</strong></div>
<input type='"radio'" id='"radio1'" name='"radios'" value='"radio1'" onclick='"show();'" checked>
<label for='"radio1'">Per Unit</label>
<input type='"radio'" id='"radio2'" name='"radios'" value='"radio2'" onclick='"show();'">
<label for='"radio2'">Per Box</label>
<form method='"post'" id='"unit'" action='"'" >
<table border=1 cellpadding=3 cellspacing=3 width='30%'>
<tr>
<th colspan=2 align='left' bgcolor='#EAEAEA'>Add Medicine/Item Details</th>
</tr>
<tr>
<td>Medicine/Item Name</td>
<td><input type='"text'" name='"Medicine/Item_Name'"></td>
</tr>
<tr>
<td>Company Name</td>
<td><input type='"text'" name='"Company_Name'"></td>
</tr>
<tr>
<td>Stowage Rack No.</td>
<td><input type='"text'" name='"Rack'" onkeypress='"return isNumberKey(event);'" ></td>
</tr>
<tr><td colspan=2><input type='"submit'" value='"Add Record'">
<input type='"hidden'" value='"true'" name='"unit'"></td></tr>
</table></form>
<form method='"post'" id='"box'" action='"'" >
<table border=1 cellpadding=3 cellspacing=3 width='30%'>
<tr>
<th colspan=2 align='left' bgcolor='#EAEAEA'>Add Medicine/Item Details</th>
</tr>
<tr>
<td>Medicine/Item Name</td>
<td><input type='"text'" name='"Medicine/Item_Name'"></td>
</tr>
<tr>
<td>Company Name</td>
<td><input type='"text'" name='"Company_Name'"></td>
</tr>
<tr>
<td>Minimum Stock (Boxes)</td>
<td><input type='"text'" name='"Minimum_Stock_box'" onkeypress='"return isNumberKey(event);'"></td>
</tr>
<tr>
<td>Stowage Rack No.</td>
<td><input type='"text'" name='"Rack'" onkeypress='"return isNumberKey(event);'" ></td>
</tr>
<tr><td colspan=2><input type='"submit'" value='"Add Record'">
<input type='"hidden'" value='"true'" name='"box'"></td></tr>
</table></form>
</section>
<script> show();</script>";
return $newform;
}
if(isset($_POST['unit']))
{
//save_record_unit();
echo "<div class='"alert'">save_record_unit</div>";
}
else if(isset($_POST['box']))
{
//save_record_box();
echo "<div class='"alert'">save_record_box</div>";
}
else
{
print print_form();
}
?>
</body>
我把<script> show();</script>
放在函数print_form()的末尾,以便每次php 调用函数时都能由javascript执行
好的,检查我的测试,你会发现它是有效的,可以随意查看源代码:
你的测试页面或此处
function show()
{
var radios = document.getElementsByName("radios");
var unit = document.getElementById("unit");
var box = document.getElementById("box");
box.style.display = 'none';
for(var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
var val = this.value;
if(val == 'radio1' ){
unit.style.display = 'block';
box.style.display = 'none';
}
else if(val == 'radio2'){
unit.style.display = 'none';
box.style.display = 'block';
}
}
}
}
show();//to start hidding box
<section>
<div><strong>Select your Quantity Format</strong></div>
<input type="radio" id="radio1" name="radios" value="radio1" onclick="show();" checked>
<label for="radio1">Per Unit</label>
<input type="radio" id="radio2" name="radios" value="radio2" onclick="show();">
<label for="radio2">Per Box</label>
<form method="post" id="unit" action="" >
<table border=1 cellpadding=3 cellspacing=3 width='30%'>
<tr>
<th colspan=2 align='left' bgcolor='#EAEAEA'>Add Medicine/Item Details</th>
</tr>
<tr>
<td>Medicine/Item Name</td>
<td><input type="text" name="Medicine/Item_Name"></td>
</tr>
<tr>
<td>Company Name</td>
<td><input type="text" name="Company_Name"></td>
</tr>
<tr>
<td>Stowage Rack No.</td>
<td><input type="text" name="Rack" onkeypress="return isNumberKey(event);" ></td>
</tr>
<tr><td colspan=2><input type="submit" value="Add Record">
<input type="hidden" value="true" name="unit"></td></tr>
</table></form>
<form method="post" id="box" action="" >
<table border=1 cellpadding=3 cellspacing=3 width='30%'>
<tr>
<th colspan=2 align='left' bgcolor='#EAEAEA'>Add Medicine/Item Details</th>
</tr>
<tr>
<td>Medicine/Item Name</td>
<td><input type="text" name="Medicine/Item_Name"></td>
</tr>
<tr>
<td>Company Name</td>
<td><input type="text" name="Company_Name"></td>
</tr>
<tr>
<td>Minimum Stock (Boxes)</td>
<td><input type="text" name="Minimum_Stock_box" onkeypress="return isNumberKey(event);"></td>
</tr>
<tr>
<td>Stowage Rack No.</td>
<td><input type="text" name="Rack" onkeypress="return isNumberKey(event);" ></td>
</tr>
<tr><td colspan=2><input type="submit" value="Add Record">
<input type="hidden" value="true" name="box"></td></tr>
</table></form>
</section>
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 如何显示显示的html元素:在特定的媒体屏幕上没有
- yii2:依赖于Action的条件显示/显示字段
- Jquery/JS:通过样式显示显示选择框(无,块)
- 为什么选择显示显示值而不是标签
- 在HTML中显示显示缩进的日志的更好方法是什么
- 如何在javascript中显示显示var值的警报
- 如何在核心PHP上显示显示来自第三方网站的RSS提要的要求
- 使用PHP或JS显示/显示选中的复选框值
- Ag-grid -如何显示显示/隐藏列的selectAll选项企业设置过滤器
- 窗体显示显示在框中