How to show a form if a particular radio button is selected
Question
I want to show a particular form when a radio button is selected. The code seems to work for me fine except for that when the page loads it shows both the forms instead of one form whose value is checked in the input tag
<?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();
}
?>
The JavaScript I used for this is as below
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 answers
solution1
1 2015-04-01 00:14:27
it seems you forgot to hide one at the first beginning. You can do it directly in the html with style='display:none' or in a css class or directly with jquery at the load of the page.
solution2
0 2015-04-01 13:23:26
ok check my test, you will see it works, feel free to look at the source code:
your test page or here
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>
solution3
0 ACCPTED 2015-04-01 14:30:56
here it is with your php function :
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>
i have placed <script> show();</script> at the end of the function print_form() for it to be executed by javascript each time the function is called by php
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Show form if radio button is selected
Show the form only when a radio button is selected
jquery - show textarea and label on form reload is yes radio button selected
Show alert() if no radio button is selected
Show Field if Radio Button is Selected
If radio button is selected show alert
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?
how to populate radio button selected value in edit form in angular
Related Tags