generating dynamic select box after form submit - php

Question

Im building an upload form where a user can upload a document along with details about the document such as its name etc. The issue that I am having is that when a user selects a category using a select I have to generate another select which then gives the user the option of choosing a sub category. see the following:-
$(".department").change(function() {
var url = "includes/get-categories.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#upload-modal").serialize(), // serializes the form's elements.
success: function(data){
//this is where the select is generated
$(".sub").html(data); // show response from the php script.
//The alert works but the above line does not
alert("yeahhhhhhhhhhhhhhh boi");
}
});
Now this works like it should in that when the select is changed it generates another select from get-categories and gives the user another select box. But for some reason when a user submits the form and they are presented with a list of errors in the form (fields left blank etc) the select box will no longer be generated by selecting a category. I even tested the code with an alert which did work so im really confused as to why the following line doesnt work
$(".sub").html(data);
Here is my form which is pretty standard
echo "<form enctype='multipart/form-data' action='".$_SERVER['PHP_SELF']."' method='POST' autocomplete='off' id='upload-modal'>";
echo '<fieldset>';
echo '<legend>Please fill in all the fields below:- </legend>';
echo '<label for="docname">Document name</label>';
echo '<input class="block" type="text" name="docname" id="docname" value="'.$_POST['docname'].'" />';
echo '<label for="version">Version (if left blank it will be entered as 1.0)</label>';
echo '<input class="block" type="text" name="version" id="version" value="'.$_POST['version'].'" />';
//We need to now give a drop down for the admin to select a department
try {
$conn = new PDO(DB_HOST,DB_USER,DB_PASS);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare('SELECT X FROM Y WHERE Z = :id');
$stmt->execute(array('id' => A));
while($row = $stmt->fetch()) {
// if the user is an admin we provide them with the admin link
if($row['admin_level']=="super" || $row['admin_level']=="admin" && $row['department']=="Assurance" ){
echo '<select id="department" class="block department" name="department">';
echo '<option value="0">department...</option>';
echo '<option value="policies">Policies</option>';
echo '<option value="procedures">Procedures</option>';
echo '</select>';
}
echo '<p class="sub"></p>';
}
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
echo '<label for="keywords">Enter keywords (seperate with ",")</label>';
echo '<textarea id="keywords block" name="keywords" rows="4" cols="50" value="'.$_POST['keywords'].'"></textarea> ';
echo '<label for="filename">Supported formats - .docx & .pdf</label>';
echo '<input type="file" name="filename" id="filename" title="Supported formats - .docx and .pdf" />';
echo '<input class="submit-ie6" type="submit" name="submit" value="Upload" id="upload-modal-submit" />';
echo '</fieldset>';
echo '</form>';
Any help is most appeciated

Answer 1

Try using a tool like Firebug and see why after the submit, this: $(".sub").html(data); does not work. The reason probably is because after you submit the form(with errors) the:
echo '<p class="sub"></p>';
is not there.
I would suggest the below:
Get your
<p class="sub"></p>
out of try{} and just use css like:
<p class="sub" style="display:none;"></p>
So all you have to do, is when the user selects a category, create the second select box and remove the display:none from the p like:
$(".sub").html(data);
$(".sub").show();