asked on

Send jquery data to a php file using ajax

Hi E's, I have a script write in jquery, that contain a variable (send), and I want to send that variable to a php file (receive.php), using ajax.
The objective is understand how Ajax send data (not fetch) between files.
What I need is when I click in the div info, the contain of variable send, send to the php file for future treatment (maybe send that data to a database).
This is the code of my main file (index.php):

<html>
<head>
<title>ajax example</title>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
var send;
send = "00:11:44";
$(document).ready(function(){ 
$("#info").click(function(){ 
        $(this).html(send); 
    }); 
 }); 
</script>
<div id="info">444</div>
</body>
</html>

Open in new window

How I send the variable 'send' to the receive.php file using ajax.

The best regards, JC

Ray Paseur

Have a look at this page. I'll see if I have an example in my teaching library.
http://www.w3schools.com/jquery/jquery_ref_ajax.asp

SOLUTION

haloexpertsexchange

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pedro Chagas

ASKER

Hi E's, thanks for the answers.
Please don't post more possible solutions, I will test all more few hours.

~JC

Pedro Chagas

ASKER

Hi E's, @ChrisStanyon and @Ray_Paseur solutions work, but the example of @hielo have some problem.
For test the solution of @hielo, I create the file receive.php, that is receive the post data and send a e-mail:

<?
//receive.php
$info = $_POST["dataSent"];
$para = "xxxxx@xxxxxxxxx";
$assunto = "test ajax";
mail($para, $assunto, $info);
?>

Open in new window

and this is the code of index.php:

<html>
<head>
<title>ajax example</title>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
var send;
send = "00:11:44";
$(document).ready(function(){ 
$("#info").click(function(){ 
        $.ajax({ "url":"receive.php"
                    ,"data": {"dataSent":send}
                    ,"success":function(data, textStatus, jqXHR){
                          alert( "the server sent the following response" + data );

                          //you can take that data and update some element in your page
                          //$('#updatedContent').html(data);
                     }
                 }); 
    }); 

 }); 


</script>
<div id="info">444</div>
</body>
</html>

Open in new window

The call to receive.php is carried out (I receive the e-mail), but without the variable.
@hielo, can you see please what is wrong?
I like your solution, so I will wait some couple of hours before I close this question.

The best regards, JC

SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pedro Chagas

ASKER

Thanks for all.
~JC