Jquery & php: saving some data without reloading
I have three buttons and need to save some data. I have an idea, I have to set an id for each button and then click the deterministic witch JS button that was clicked, like this:
$("#mySpecifikButton").click(function()
{
....some code here...
});
but then I got stuck. For example, I have 9 users. They all have an ID in db. So now we have all the users on different lines:
<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 click on the specifier user I want to add it to the db via php using jquery. But how did I post it to php using JS (jquery)?
Im thinking right or are there better ways?
If I didn't describe it well, ask me.
source to share
From what I can see you can use Ajax to send the value of the button that was clicked on the php script. Search the jQuery site for documentation on $ .get and $ .post. :)
Edit: Now that I'm not on my iPod, it will be much easier to type.: P
This is 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>
source to share
You don't need to use jquery for this. Its simple via 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
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 a visual indication that data has been sent - at least a status bar message ( setStatus("Sent data")
although they don't always work), but a color change or message-in-a-div is preferred.
source to share