Question

I have 2 drop-down menu forms ‘category’ and ‘sub-category’. in ‘category’ I have options music and film and in the subcategories I have options ‘pop’ and ‘rock'(f1) and in film ‘comedy’and ‘drama'(f2). the problem is, with the code I have the subcategories for film should register as follows(cat,subcat): film-drama=2,5 and film-comedy=2,6 however they both register as 2,0 when entered in the mysql table. here is the code:

 <form action='submitsite.php' method='POST'>
 <table>
 <tr>
 <td>category(optional)</td>
 <td><select name='cat' id = "opts" onchange = "showForm()">
 <option value = "0">Select</option>
 <option value = "1">music </option>
 <option value = "2">film </option>
 </select> 

 <div id = "f1" style="display:none">
 <form name= "subcat">
 <select name='subcat' id = "opts" onchange = "showForm()">
 <option value = "0">Select</option>
 <option value = "3">pop</option>
 <option value = "4">rock </option>
 </select>
 </form>
 </div>

 <div id = "f2" style="display:none">
 <form name= "subcat">
 <select name='subcat' id = "opts" onchange = "showForm()">
 <option value = "0">Select</option>
 <option value = "5">comedy</option>
 <option value = "6">drama</option>
 </select>
 </form>
 </div>

 <script type = "text/javascript">
 function showForm()
{
 var selopt = document.getElementById("opts").value;
 if (selopt == 1) 
{
  document.getElementById("f1").style.display="block";
  document.getElementById("f2").style.display="none";
}
 if (selopt == 2) 
{
  document.getElementById("f2").style.display="block";
  document.getElementById("f1").style.display="none";
}

}

and here is the variable declarations and mysql query:

$cat=$_POST['cat'];
$subcat=$_POST['subcat'];

$sql="INSERT INTO favorites VALUES('$cat','$subcat')";

it’s not a mysql issue I just added that part to give a better overall picture.

Answer 1

You can’t have nested forms in HTML. The markup is not valid and I guess you get unexpected behavior when submitting. The solution to this is using a single form. There’s more than one way to do this, but here’s one example:

HTML code:

<form action='submitsite.php' method='POST'>
<table>
<tr>
<td>category(optional)</td>
<td><select name='cat' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "1">music </option>
<option value = "2">film </option>
</select> 

<div id = "f1" style="display:none">
<select name='subcat1' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "3">pop</option>
<option value = "4">rock </option>
</select>
</div>

<div id = "f2" style="display:none">
<select name='subcat2' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "5">comedy</option>
<option value = "6">drama</option>
</select>
</div>
</form>
....

PHP code:

$cat = $_POST['cat'];
$subcat = $_POST['subcat' . $cat];

Keep in mind that all user-submitted values must be validated before being used further. In this case, you would check for is_numeric(), check to see if it’s in your accepted range of values and maybe cast to an int.