javascript - 如果选择特定单选按钮如何显示表单

标签 javascript php html forms radio-button

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

<?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 类中或在页面加载时直接使用 jquery 来执行此操作。

关于javascript - 如果选择特定单选按钮如何显示表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29380572/

相关文章:

javascript - jQuery.validate 可能破坏了 Facebox 弹出窗口

javascript - 在 umbraco 7.2.5 中实现标签云和唯一名称验证

javascript - 使用 jQuery 下载 json 对象作为 json 文件

PHP/MySQL : Handling empty sql result in php array

javascript - 获取不可见元素高度

javascript - 在某些事件上动态创建与之关联的 html 元素和对象

javascript - 无法在 Typescript 中提取对象值

javascript - javascript函数如何具有属性?

php - MySQL:查询中的符号

php - 在没有参数的情况下在 PayPal 中返回 url