Submit data from drop down menu to mysql without page refresh

Question

I am trying to find a way that I can submit data from a drop down menu to a php script without the page refreshing. At the moment, when the user clicks an option in the drop down menu, the form action is to send it to a php script which then runs the query to update the database. Here is the code for one of the drop down menus I am using. Any help would be amazing!

<form action="P1Append.php?PrimaryID=<?php echo $rows['PrimaryID']; ?>" method="post">
    <?php 
    $Check1=$rows['P1'];
    echo $check1;
    if($rows['PeriodInValue'] > '1' && $rows['Day'] == '1') {
    echo '<td bgcolor="#000000">' . $rows['P1'] . '</td>';  
    } else if ($rows['PeriodOutValue'] < '12' && $rows['Day'] == '2') { 
    echo '<td bgcolor="#000000">' . $rows['P1'] . '</td>';  
    } else if(empty($Check1)) {
                    echo '<td><b><select onchange="this.form.submit()" style=" width:30px; height:30px;font-size:12pt; background-color:white;" type="text" name="P1" id="P1" maxlength="15" size="1"><option disabled selected></option><option>G</option><option>R</option></td>';
                      }else if($rows['P1'] == 'G'){
                      echo '<td bgcolor="#02A10C">' . $rows['P1'] . '</td>';        
                      }else if($rows['P1'] == 'R'){
                      echo '<td bgcolor="#FF0000">' . $rows['P1'] . '</td>';
                      }else{

    }
    ?></form>

So I have been doing some searching on here, and i have found somebody else who has come up with a solution. I have implemented this into my code, but can't seem to get it working?? Any Help??

    <form onsubmit="return false">
        <?php 
        $Check1=$rows['P1'];
        echo $check1;
        if($rows['PeriodInValue'] > '1' && $rows['Day'] == '1') {
        echo '<td bgcolor="#0f5b92">' . $rows['P1'] . '</td>';  
        } else if ($rows['PeriodOutValue'] < '12' && $rows['Day'] == '2') { 
        echo '<td bgcolor="#0f5b92">' . $rows['P1'] . '</td>';  
        } else if(empty($Check1)) {
                        echo '<td><b><select style=" width:30px; height:30px;font-size:12pt; background-color:white;" type="text" name="P1" id="P1" maxlength="15" size="1"><option disabled selected></option><option>G</option><option>R</option></td>';
                          }else if($rows['P1'] == 'G'){
                          echo '<td bgcolor="#02A10C">' . $rows['P1'] . '</td>';        
                          }else if($rows['P1'] == 'R'){
                          echo '<td bgcolor="#FF0000">' . $rows['P1'] . '</td>';
                          }else{

        }
        ?></form>
        <script type="text/javascript">
        //on the click of the submit button 
$("#P1").onchange(function(){
 //get the form values
 var P1 = $('#P1').val();

 //make the postdata
 var postData = 'P1='+P1+;

 //call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status)
$.ajax({
    url : "P2Append.php?PrimaryID=<?php echo $rows['PrimaryID']; ?>",
    type: "POST",
    data : postData,
    success: function(data,status, xhr)
    {
        //if success then just output the text to the status div then clear the form inputs to prepare for new data
        $("#status_text").html(data);
        $('#name').val('');
        $('#brand').val('');
    },
    error: function (jqXHR, status, errorThrown)
    {
        //if fail show error and server status
        $("#status_text").html('there was an error ' + errorThrown + ' with status ' + textStatus);
    }
});
</script>

Answer 1

You can make your life a lot easier by POSTing the data in JSON format.

$("#P1").onchange(function(){
//get the form values
var P1 = $('#P1').val();
var PrimaryID = <?php echo $rows['PrimaryID']; ?>;
//make the postdata
var postData = {
    P1: P1,
    PrimaryID: PrimaryID
}

 //call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status)
$.ajax({
    url : "P2Append.php",
    type: "POST",
    data : postData,
    success: function(data,status, xhr) {
    //if success then just output the text to the status div then clear the form inputs to prepare for new data
    $("#status_text").html(data);
    $('#name').val('');
    $('#brand').val('');
},

In your php script, you can simply grab the values via $_POST["PrimaryID"] and $_POST["P1"]