如果選擇了特定的單選按鈕，如何顯示表單
[英]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';
}
}
}
}
3 個解決方案
解決方案1
1 2015-04-01 00:14:27
似乎您忘記了在開始時就隱藏一個。 您可以直接在HTML中使用style='display:none'或在CSS類中執行此操作，也可以直接在頁面加載時使用jquery執行此操作。
解決方案2
0 2015-04-01 13:23:26
好的，請檢查我的測試，您將看到它的工作原理，請隨時查看源代碼：
您的測試頁或此處
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>
解決方案3
0 已采納 2015-04-01 14:30:56
這是您的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執行
jQuery-在表單重新加載上顯示textarea和標簽是yes單選按鈕
[英]jquery - show textarea and label on form reload is yes radio button selected
如何根據是否選擇了最接近的單選按鈕來顯示隱藏按鈕？
[英]How to show-hide the button based on if the closest radio button is selected?
單擊特定的單選按鈕時，如何設置選擇表單？
[英]How to set a select form to be required when a particular radio button is clicked?
選擇單選按鈕時如何更改隱藏表單數據的值？
[英]How to change the value of hidden form data when a radio button is selected?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.