Missing variable in post PHP Javascript

Question

***EDIT

@alditis TY, tried your suggestion but the Javascript doesn't work after it. This one doesn't need to be that secure as there's no sensitive data involved and I'm kinda learning it as I go along. Also I will be using these queries a lot more down the track so I would prefer having the entire array in there.

@Barmar yes it does, the second last snippet shows how Google Chrome sees the output using it's debugger. This is why it's so weird.

@FreudianSlip I was trying something and never put it back.

@saeed arab sheybani I don't really understand? The code works and the lists populate just fine the problem is $_REQUEST['pos_no'] doesn't exist it seems. It should work on submit as per the output code. Perhaps I am not getting what you are saying, would you have an example you can link me to?

---

I'm trying to get a PHP/Javascript dynamically populated combo box working through mysql queries and to the most part it works fine, that is until I hit the submit button. The scripts do exactly what I want up to this point.

From what I can see the replacement code is left out of the $_POST array. I assume this is happening because once the form loads it lists what fields to expect or creates the $_post array on the spot, therefore by inserting some new code it perhaps ignores it? Just a guess but seems logical, if so, how would one work around this? This has plagued me for a month or so now.

Javascript:

<script type="text/javascript">
    $(document).ready(subpos_selectbox_change);
    function subpos_selectbox_change(){
        $('#subpos').change(update_position_number);
    }
    function update_position_number(){
        var subpos=$('#subpos').attr('value');
        $.get('get_list.php?subpos='+subpos, show_posnumbers);
    }
    function show_posnumbers(ss){
        $('#position_number').html(ss);
    }
</script>

get_list.php

switch($_REQUEST['subpos']){

    case 'AO2';
        $teamQuery = "SELECT * FROM establishment_positions WHERE position_filled='0' AND active='1' AND position_acrynom='AO2'";
        break;

    case 'AO3';
        $teamQuery = "SELECT * FROM establishment_positions WHERE position_filled='0' AND active='1' AND position_acrynom='AO3'";
        break;

    case 'AO4';
        $teamQuery = "SELECT * FROM establishment_positions WHERE position_filled='0' AND active='1' AND position_acrynom='AO4'";
        break;

    case 'AO5';
        $teamQuery = "SELECT * FROM establishment_positions WHERE position_filled='0' AND active='1' AND position_acrynom='AO5'";
        break;

    case 'AO6';
        $teamQuery = "SELECT * FROM establishment_positions WHERE position_filled='0' AND active='1' AND position_acrynom='AO6'";
        break;

    case 'AO7';
        $teamQuery = "SELECT * FROM establishment_positions WHERE position_filled='0' AND active='1' AND position_acrynom='AO7'";
        break;

    case 'AO8';
        $teamQuery = "SELECT * FROM establishment_positions WHERE position_filled='0' AND active='1' AND position_acrynom='AO8'";
        break;

    case 'SO1';
        $teamQuery = "SELECT * FROM establishment_positions WHERE position_filled='0' AND active='1' AND position_acrynom='SO1'";
        break;

}

echo '<select name="pos_number" id="pos_number">';
$ss = null;
$result = mysql_query($teamQuery);
while($row = mysql_fetch_array($result))
{
    $ss.= '<option value=' . $row['position_id'] . '>' . $row['position_number'] . '</option>';

}
echo $ss;
echo '</select>';

..and here id the html code before the Javascript goes to work:

<div class="newusr">
    <table>
        <form id="newusr" action="includes/insertuser.php" method="post">
            <tr><td>First Name: </td><td><input type="text" name="firstname"></td></tr>
            <tr><td>Middle Name: </td><td><input type="text" name="middlename"></td></tr>
            <tr><td>Last Name: </td><td><input type="text" name="lastname"></td></tr>
            <tr><td>Username: </td><td><input type="text" name="usr"></td></tr>
            <tr><td>sex:</td><td><select name="sex"><option value="1">Male</option><option value="0">Female</option></select></td></tr>
            <tr><td>Position: </td><td><select name="subpos" id="subpos"><?php echo $subpos; ?></select><td></tr>
            <tr><td>Position No: </td><td id="position_number"><select name="pos_number"><option value="">choose a Position first</option></select></td></tr>
            <tr><td>Contractor: </td><td><input type="checkbox" name="contractor" value="1"></td></tr>
            <tr><td>Start date: </td><td><input type="date" name="empStrtDte"></td></tr>
            <tr><td>Active: </td><td><input type="checkbox" name="active" value="1"></td></tr>
            <tr><td><?php echo '<input type="submit"><input type="reset" value="Reset"></td></tr>'; ?>
        </form>
    </table>
</div>

HTML code after I change a value in subpos (from Chrome):

<select name="subpos" id="subpos">
    <option value="AO2">AO2</option>
    <option value="AO3">AO3</option>
    <option value="AO4">AO4</option>
    ...
</select></td>
<select name="pos_number" id="pos_number">
     <option value="2">805620121</option>
     <option value="10">805678998</option>
</select>

All looks good, does exactly what I want at this point. Then I print the array and boom, missing the pos_number value and I have no idea why.

Array
(
    [firstname] => test
    [middlename] => test
    [lastname] => test
    [usr] => 
    [sex] => 1
    [subpos] => AO3
    [empStrtDte] => 2012-02-19
)

Answer 1

Problem was Javascript wasn't binding the results to the DOM. Used some JQuery instead. Huzzaah.

Thanks to all that contributed.

JavaScript:

<script type="text/javascript">
            $(document).on('change', "#subpos", function(){
                var subpos=$('#subpos').attr('value');
                $.get('get_list_test.php?subpos='+subpos, function(ss){
                    $('#pos_number').html(ss);
                });
            });
</script>

HTML:

<tr><td>Position No: </td><td><select name="pos_number" id="pos_number"><option value="">choose a Position first</option></select></td></tr>

PHP:

$teamQuery = "SELECT * FROM establishment_positions WHERE position_filled='0' AND active='1' AND position_acrynom='".mysql_real_escape_string($_REQUEST['subpos'])."'";

$ss = null;
$result = mysql_query($teamQuery);
while($row = mysql_fetch_array($result))
{
    $ss.= '<option value=' . $row['position_id'] . '>' . $row['position_number'] . '</option>';

}
echo $ss;

Answer 2

For select menus, the change event occurs when an option is selected by Keyboard and Mouse buttons events and NoScript effectively nterferes. For text fields or text areas, the change event occurs when the field loses focus. thus you can not use "change event" directly (without select any option by Keyboard or Mouse) try this cod:

<select name="subpos" id="subpos">
<option value="1">first</option>
<option value="2">secound</option>
<option value="3">Third</option>
</select>


<script>
    $(function() {
        $('#subpos').change(function() {
            console.log('subpos has changed');
        }); 
        $("#subpos").val('2');//combo box has change but dont appear in console log. why?
   });
</script>

after run ; see console log you can't see 'subpos has changed' in console log . but in action subpos has changed to 'second'
what is happend? its should be logged to the console when the select changes . now by selecting that option from the drop-down you can see cosole log is change