如果选择了特定的单选按钮，如何显示表单答案

【问题标题】：How to show a form if a particular radio button is selected如果选择了特定的单选按钮，如何显示表单
【发布时间】：2015-03-31 23:57:54
【问题描述】：

我想在选择单选按钮时显示特定的表单。该代码似乎对我来说很好，除了当页面加载时它显示两个表单而不是一个表单，其值在输入标签中被检查

<?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';
    }    

  }
 }
}

【问题讨论】：

如果你想要一个单选按钮从服务器中提取信息，你应该使用 AJAX。如果您已经知道表单的外观取决于所选的收音机，那么您可以使用 JavaScript 完成这一切。
@PHPglue 我知道表单的外观，并且我正在使用 JavaScript，但问题是一旦页面加载，两个表单都会出现而不是一个。

标签： javascript php html forms radio-button

【解决方案1】：

您似乎忘记在第一次开始时隐藏一个。您可以直接在 html 中使用style='display:none' 或在 css 类中或在页面加载时直接使用 jquery。

【讨论】：

我已更改脚本，但仍显示两种形式。 //rest of the script same unit.style.display = 'none'; // I think this was missing box.style.display = 'block'; for(var i = 0; i < radios.length; i++) { //rest of the script same as previous
id='radio2' 的 name='radiOS' 有错误
我从来没有尝试不显示表单，这是我第一次看到这个。如果它不起作用，请创建一个 div 来包装您的表单并为其提供表单的 id。一个 div id="unit" 和一个 div id="box"，它应该可以工作。
还有body标签最后没有关闭。
name='radiOS' 错误只是类型错误以及正文标记。我检查了原始代码，div也不起作用。

【解决方案2】：

这里是你的 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 执行

【讨论】：

【解决方案3】：

好的，看看我的测试，你会发现它有效，请随意查看源代码：
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 变量，你就会看到没问题。如果您在 id radio2 中更正了 name='radios'，请在您的 javascript 中将 box.style.display 设置为 none，并在 javascript 的末尾显示第一次调用的 show() 顺序，然后就可以了。编辑你的代码，我会在我的服务器端试试。
非常感谢<script> show();</script>trick 完成了这项工作。