从两个从属下拉列表获取表单数据到PHP

I have a form on my page which includes 2 dependent drop down lists. When user selects value from 1st list, it populates the second list and user then selects value from 2nd list.

I want to submit form data to php page to insert into table in mysql, but when it submits, all data is passed EXCEPT value from 2nd list. Value from 1st list and other input fields are passed OK. I've tried everything I know and I can't make this work. Any ideas how to implement this?

This is the form from index2.php (EDIT: simplified the form element):

<form name="part_add" method="post" action="../includes/insertpart.php" id="part_add">
                <label for="parts">Choose part</label>
                    <select name="part_cat" id="part_cat">
                        <?php while($row = mysqli_fetch_array($query_parts)):?>
                        <option value="<?php echo $row['part_id'];?>">
                        <?php echo $row['part_name'];?>
                        </option>
                        <?php endwhile;?>
                    </select>
                    <br/>
                <label>P/N</label>
                    <select name="pn_cat" id="pn_cat"></select>
                <br/>
                <input type="text" id="manufactured" name="manufactured" value="" placeholder="Manufactured" />
                <input id="submit_data" type="submit" name="submit_data" value="Submit" />
            </form>

And this is javascript:

$(document).ready(function() {
$("#part_cat").change(function() {
    $(this).after('<div id="loader"><img src="img/loading.gif" alt="loading part number" /></div>');
    $.get('../includes/loadpn.php?part_cat=' + $(this).val(), function(data) {
        $("#pn_cat").html(data);
        $('#loader').slideUp(200, function() {
            $(this).remove();
        });
    });
});
});

And this is php to load 2nd list:

<?php 
include('db_connect.php');
// connects to db
$con=mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);
$part_cat = $_GET['part_cat'];
$query = mysqli_query($con, "SELECT * FROM pn WHERE pn_categoryID = {$part_cat}");
while($row = mysqli_fetch_array($query)) {
echo "<option value='$row[part_id]'>$row[pn_name]</option>";
}
?>

I am getting $part_cat from 1st list to insertpart.php, but $pn_cat.

EDIT: this is insertpart.php (simplified and it just echos resuls)

<?php
//Start session
session_start();

//Include database connection details
require_once('../includes/db_details.php');

//DB connect
$con=mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);

// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

// escape variables for security
// find part name based on ID
$part_typeID = mysqli_real_escape_string($con, $_POST['part_cat']);
$part_name_result = mysqli_query($con, "SELECT part_name FROM parts WHERE part_id = $part_typeID");
$part_row = mysqli_fetch_array($part_name_result, MYSQL_NUM);
$part_type = $part_row[0];
echo"part_type='$part_type'";

//find pn value based on id
$pn_typeID = mysqli_real_escape_string($con, $_GET['pn_cat']);
$pn_name_result = mysqli_query($con, "SELECT pn_name FROM pn WHERE pn_id = $pn_typeID");
$pn_row = mysqli_fetch_array($pn_name_result, MYSQL_NUM);
$pn = $pn_row[0];
echo"pn='$pn'";

mysqli_close($con);
?>

It's still work in progress, so the code is ugly, and I know I'm mixing POST and GET that is being rectified. If I echo $pn_cat on this page there is no output, $part_type is OK.

Solved it! It was just a stupid typo, can't believe I've lost 2 days over this! In loadpn.php instead of: $row[part_id] it should read: $row[pn_id] For some reason drop down worked, but offcourse value of pn_cat wasn't being set.

Also this works in setting 2 field values (which now I don't need but if somebody wants to know):

$(document).ready(function() { $("#part_cat").change(function() { $('#pn_hidden').val($(this).val()); }); $("#pn_cat").change(function() { $('#pn_hidden2').val($(this).val()); }); });

Also changed js to post:

$(document).ready(function() { $("#part_cat").change(function() { $.post('../includes/loadpn.php', 'part_cat=' + $(this).val(), function(data) { $("#pn_cat").html(data); }); }); });

And thanks for the:

<option value="" disabled selected="selected">Select</option>

It really helps with user experience.

Can you try swapping the $_GET in

$pn_typeID = mysqli_real_escape_string($con, $_GET['pn_cat']);

with $_POST?

$pn_typeID = mysqli_real_escape_string($con, $_POST['pn_cat']);

EDIT: based on asker's feedback and idea for a work-around

NOTE: This edit is based on what you suggested, even though I tested your original code and received satisfactory results (after I removed the PHP and MySQL from the code and replaced them with suitable alternatives).

The Work-Around

Here's the HTML for the hidden field:

<input type="hidden" id="test" name="test" value="" placeholder="test" />

Here's a simple Javascript function:

function setHiddenTextFieldValue(initiator, target){
    $(initiator).change(function() {
        $(target).val($(this).val());
    });
}

You can call the above function within the function(data) { of your original code with something like:

setHiddenTextFieldValue('#pn_cat', '#test'); // note the hashes (#)

I also recommend you to hard-code the following HTML into your HTML and PHP files, right before the looping of the <option>s begin:

<option value="" disabled selected="selected">Select</option>

The above line could improve user experience, depending on how you want your code to work. Note however, that this is entirely optional.