jquery & php: saving some data without reload

Question

I have three buttons and need to save some data. I have a idea, I have to set an ID to every button and then let the JS determinate witch button that has been pressed, like:

$("#mySpecifikButton").click(function()
{
....some code here...
});

but then Im stuck. For example I have 9 users. All they have an ID in the db. So now we have all the users in separate rows:

<p><a id="userID">user 0</a></p>
<p><a id="userID">user 1</a></p>
<p><a id="userID">user 2</a></p>
<p><a id="userID">user 3</a></p>
...

When I press on a specifik user I want to add it to db through php with help of jquery. But how do I sent it to php with JS (jquery)?

Im I thinking right or is there better ways?

If I didn't described it well, ask me.

Answer 1

From what I can see, you can use Ajax to send the value of the button that has been pressed to the php script. Search the jQuery site for documentation on $.get and $.post. :)

Edit: Now that I'm not on my iPod, it'll be much easier to type. :P

Here's what I mean:

<input type="button" value="Button 1" id="1" />
<input type="button" value="Button 2" id="2" />
<input type="button" value="Button 3" id="3" />
<input type="button" value="Button 4" id="4" />

Then, use some JS:

<script type="text/javascript">
$("input[type=button]").click(function() {
  $.post("myPHPscript.php",{buttonID: $(this).attr("id")},function(d) {
    //d is the response from the PHP page.
    //Do something with it!
  });
});
</script>

Answer 2

You doesnt have to use jquery for that . Its simple through ajax .

user 0

user 1

user 2

user 3

------------------------------script.js File------------------------------------

var xmlHttp;


ajaxFunction(id){

url = anypage.php?Sentid=id; // here you are sending id through GET to any simple db connection mysql and php based page to add to db or anyother function.

xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true) xmlHttp.send(null)

}//end of function


function stateChanged(){      
if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete" ){    // any operation you want to perform here

    }//end of if 
}//end of function


function GetXmlHttpObject(){    
var xmlHttp =null; 
var xmlHttp =null; 
if (window.XMLHttpRequest){

          // If IE7, Mozilla, Safari, etc: Use native object
          var xmlHttp = new XMLHttpRequest()    
}   
else    {  
    if (window.ActiveXObject){

          // ...otherwise, use the ActiveX control for IE5.x and IE6
          var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
          }

    }   
    return xmlHttp;
 }//end of function

Answer 3

As it sounds like you are making changes to the database, I would recommend using the $.post( url, [data], [callback], [type] ); link. You can just post a form to the server and deal with it like you would any other form post.

Answer 4

You can use AJAX to send a request to a PHP page (as mentioned above with $.post). The easiest way is to have a PHP page - let's say /insert.php:

<?php
    some_insert_function($_REQUEST["userid"], ...);
?>

then use:

function go(el) {
    $.post("/insert.php?items="+el.id);
}

EDIT: You should also add some visual indication that the data has been sent - at least a statusbar message ( setStatus("Sent data"), although these don't always work ), but preferably a colour change or message-in-a-div.

Answer 5

Salty, that is just what im searching for! For that it's easy to add visual indication, like Saved or something like person-b said. But what is the php code behind it, the return value for d, what should it be? A boolean expression?