Question

i need a tips, how to make a AJAX request with mootools, when some value from a dropdown list is selected, i mean to catch this event + make a ajax request to a external php page. And on this php page i need to run a mysql query. Thanks.

<form name ="f1" action=""> 
     <select id="myr" NAME ="s1" onChange = "GetSelectedItem()"> 
          <OPTION VALUE = "meshed" selected >-- Please Select --</OPTION> 
          <OPTION VALUE = "girls">Male seeking Female</OPTION> 
          <OPTION VALUE = "mens">Female seeking Male</OPTION> 
          <OPTION VALUE = "mens">Male seeking Male</OPTION> 
          <OPTION VALUE = "girls">Female seeking Female</OPTION> 
     </select> 
</form>

php

$dbhost = 'localhost'; 
$dbuser = 'root'; 
$dbpass = ''; 
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql');     
$dbname = 'ratings'; 
mysql_select_db($dbname) or die('Error connecting to database'); 
$sql = "TRUNCATE TABLE rabid_ratings"; 
$re = mysql_query($sql) or die(mysql_error()); 
echo "done";

mootools

<script type="text/javascript">
      window.addEvent('domready',function(){
          var myRequest = new Request({
               url: 'truncate.php',
               method: 'post',
               onRequest: function(){
               },
               onSuccess: function(responseText){
                    alert("done!"+ responseText);
               },
               onFailure: function(){
                    alert("failed");
               }
          });

          $('myr').addEvent('change', function(event){
               event.stop();
               myRequest.send();
          });
      });
</script>

Answer 1

Add a change even to your select drop down. Let’s name the id of it “mydropdown”:

$('mydropdown').addEvent('change', function(){
     //do your request (AJax) here
});

Here is the demo from Mootools. You can also use Request.HTML or Request.JSON depends on what you are seeking to return.

Simple Request W/ Mootools

Update: Example based off what you present

First let’s see if your ajax is setup correctly by using the following simple ajax code. Once you get this working, then we can explore the PHP side. So, please try the following codes:

html:

<select id="myr" NAME ="s1"> 
    <OPTION VALUE = "meshed" selected >-- Please Select --</OPTION> 
    <OPTION VALUE = "girls">Male seeking Female</OPTION> 
    <OPTION VALUE = "mens">Female seeking Male</OPTION> 
    <OPTION VALUE = "mens">Male seeking Male</OPTION> 
    <OPTION VALUE = "girls">Female seeking Female</OPTION> 
</select> 

generic truncate php that echos whatever post var we send it:

<?php
  echo $_POST['s1'];
?>

Mootools, when on success should output “done! “:

window.addEvent('domready', function(){
    var myRequest = new Request({
        url: 'truncate.php',
        method: 'post',
        onRequest: function() {
        },
        onSuccess: function(responseText) {
            alert("done! " + responseText);
        },
        onFailure: function() {
            alert("failed");
        }
    });

    $('myr').addEvent('change', function(event) {
        event.stop();
        var data = this.name + '=' + this.value;  //s1=<option value>, which is the post data we are sending to the php script
        myRequest.send(data);
    });
});