如果选择了特定的单选按钮,如何显示表单
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';
}
}
}
}
你好像一开始忘了隐藏一个。您可以直接在 html 中使用 style='display:none'
或在 css class 中或在页面加载时直接使用 jquery 进行操作。
确定检查我的测试,你会看到它有效,随时查看源代码:
your test page
或者这里
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>
这是你的 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 执行 php
我想在选中单选按钮时显示特定的表单。 该代码似乎对我来说很好用,除了当页面加载时它显示两种形式而不是一种形式,其值在输入标记中检查
<?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';
}
}
}
}
你好像一开始忘了隐藏一个。您可以直接在 html 中使用 style='display:none'
或在 css class 中或在页面加载时直接使用 jquery 进行操作。
确定检查我的测试,你会看到它有效,随时查看源代码:
your test page
或者这里
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>
这是你的 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 执行 php