php - Sending Multiple variables with Jquery ajax

Question

General Overview

Hi all, I have 4 spans in which values are inputted dynamically but for the purpose of this question i put in some values. I want to get the value from the spans, send them using ajax to a php file. If they meet the criteria set in the php file then the alert some message. This is what i have so far..

The HTML

This basically contains the span and some numbers within the span, the button below has an onclick event to call a JavaScript function called check.

 <span id="first" name="first">40</span>
      <span id="second" name="second">50</span>
      <span id="third" name="third">30</span>
      <span id="fourth" name="fourth">40</span></center>
      <input type="button" id="button" name="button" onClick="check()"/>

The JavaSript

This basically stores the value of each span field in a specified variable then tries to send these variable using ajax, then it alerts a message in retrieving a success message and same for a failed message.

 function check() {
      var    one = $('#first').val();
       var   two = $('#second').val();
       var  three = $('#third').val();
       var  four = $('#fourth').val();  

    $.post("test.php",{ data : "one"+"&two"+"&three"+"&four" } ,function(data)
        {

         if (data=="yay") //for no input
         { alert("yay");
         }
         else 
         {
         alert("nay");
         }

         }


        } 

The PHP These are the conditions the values in the span fields have to meet, the ajax function retrieves the success and failed messages from here.

  $one = $_POST["first"];
        $two = $_POST["second"];
         $three =$_POST["third"];
         $four = $_POST["fourth"];
         if($one > 5)        {

         echo "yay";
                           }
     elseif($two > 10 )        {

         echo "yay";  }

             elseif($three > 15 )        {

         echo "yay";  }

             elseif($four > 20 )        {

         echo "yay";  }

           else{
               echo "nay";
           }

The Problem

After a bit of debugging it doesn't seem that the php is getting any value which means the data hasn't been passed properly. I don't think that's the way to pass multiple items through ajax. Does anyone know how i can fix this? Many Thanks in adance..

Answer 1

The second argument of .post can be a map of parameters to send along with the request:

$.post("test.php", { 
    first: one,
    second: two,
    third: three,
    fourth: four
}, function(data) {
    //Done!
});

The keys of the map (e.g. first, second etc.) are the names with which you'll be able to access the values from your PHP script.