CODEWITHSUNDEEP
javascriptphphtmlformsradio-button
Awais
Awais

Reputation: 3

How to show a form if a particular radio button is selected

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

  }
 }
}

Upvotes: 0

Views: 1481

Answers (3)

DDA
DDA

Reputation: 161

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

Upvotes: 0

DDA
DDA

Reputation: 161

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>

Upvotes: 0

DDA
DDA

Reputation: 161

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.

Upvotes: 1

Related Questions