如何在没有刷新页面且没有单击“发送”按钮的情况下从下拉选择中将值发送到MYSQL？

Question

In a PHP page I have a simple selection with some values like this:

<div class="container">      
  <section>
    <select>
      <option value="" disabled selected>Select an activity</option>
      <option value="1">1</option>
      <option value="2">2</option>
      ...
    </select>
  </section>      
</div>

I have a database MYSQL to store the choiced value like this:

table name= user_favorite with 2 columns respectively called items and values

items values
item1 value1
item2 value2
etc.

When a user select an item from the dropdown list I wish to send automatically to MYSQL the value chosen (inside the values column) without click on a send button. Is it possible and how to achieve?

Answer 1

As @NishantSolanki said, you should use Ajax. Here an example using jQuery.

HTML FILE:

<div class="container">      
   <section>
       <select id="options">
           <option value="" disabled selected>Select an activity</option>
           <option value="1">1</option>
           <option value="2">2</option>
       </select>
   </section>      
</div>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#options").on("change", function(){ //listen when the option change   
            var optionValue = jQuery(this).val();   //get the new value

            $.ajax({
                url: "fileWhichSaveTheValue.php", //php file which recive the new value and save it to the database
                data: { "newValue": optionValue },  //send the new value
                method: "POST"                    //use POST method
            });
        });
    });
</script>

PHP FILE:

$newValue = $_POST["newValue"]; //if you used POST method on the javascript, you have to use $_POST here to get the data


//HERE YOUR MYSQL CONNECTION AND YOUR QUERY FOR SAVING THE VALUE

Answer 2

Use onchange event on select

<?php
    if($_POST){
     $item = $_POST['item'];
     $link = mysql_connect('host', 'username', 'password');
     mysql_select_db('database_name', $link);
     //write your sql query to enter into table
    }
 ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<div class="container">      
  <section>
    <select onchange="save_record(this.value);">
      <option value="" disabled selected>Select an activity</option>
      <option value="1">1</option>
      <option value="2">2</option>
      ...
    </select>
  </section>      
</div>


<script type="text/javascript">
function save_record(item){
    //call an ajax here to post item 
    $.post( "your_php_page_name.php",
      {item:item}, 
      function( data ) {
        // do something after ajax result
      });
}
</script>

On your php page you can retrieve post data by $_POST variable