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..

James Allardice · Accepted Answer · 2011-10-07 14:05:59Z

8

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.

answered Oct 7, 2011 at 14:05

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GordonM · Accepted Answer · 2011-10-07 14:07:41Z

2

$.post ("test.php", { first: one, second: two, third: three: four } /*...*/);

answered Oct 7, 2011 at 14:07

GordonM

31.9k17 gold badges94 silver badges134 bronze badges

Collectives™ on Stack Overflow

Sending Multiple variables with Jquery ajax

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related