I'm new for Web sites.I have a text box in my page and what i need is when onBlur that text box, call a php method that include sql query.I found something like on the web, but still does net work it.Am i doing wrong?
<?php
if(isset($_POST['Greet']))
{
echo $_POST['Greet'];
}
?>
<html>
<body>
<script type="text/javascript">
function sayHi()
{
var value = $.ajax({
type: "POST",
url: "page.php",
data: "Greet="+$("#Greeting").val(),
async: false
}).responseText;
}
</script>
<input type="text" name="Greeting" id="Greeting" onblur="sayHi()">
</body>
</html>
exit your php for usage in same script, ajax will return entire html.
<?php
if(isset($_POST['Greet']))
{
echo $_POST['Greet'];
die;
}
?>
value will have your response alert(value)
later edit:
<?php
if(isset($_POST['Greet']))
{
echo $_POST['Greet'];
die;
}
?><html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
function sayHi()
{
var value = $.ajax({
type: "POST",
url: "index.php",
data: "Greet="+$("#Greeting").val(),
async: false
}).responseText;
$('#result').html(value);
}
</script>
<span id="result"></span>
<input type="text" name="Greeting" id="Greeting" onblur="sayHi()">
</body>
</html>
You should include the jQuery script to your page to make $.ajax work.
Like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Related
It is showing undefined function in PHP page.And i made every possible way it is not working for me.Please guys help me with this.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">Welcome to stackoverflow</div>
</body>
<script>
$(document).ready(function(){
var mb = $('#myDiv').text();
$.ajax({
action : "six-cuf.php",
type: 'POST',
data: { 'mb': mb},
success:function(data)
{
alert(mb);
}
});
});
</script>
</html>
PHP CODE
<?php
$fname = $_POST['mb'];
?>
Hello
$(document).ready(function(){
var mb = $('#myDiv').text();
$.ajax({
action : "six-cuf.php",
type: 'POST',
data: { mb: mb},
success:function(data)
{
alert(mb);
}
});
});
You can also try this JQuery Post Method
Javascript Code
$.post("six-cuf.php", {'mb': mb}, function (data) {
console.log(data);
});
PHP code
<?php
$fname = $_POST['mb'];
echo $fname;
?>
I'm trying message application. My goal is get sender id and receiver id with a click on one button.
After then post this datas with ajax or ajax(json) to php in same page.
I will use the incoming data in php with mysql_query. I tryed many examples. But never get result. My example code at below.
Little Note: Success alert comes but doesn't print any data on screen.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<button type="button" onclick="myFunc()">Get ID</button>
<script>
function myFunc()
{
var id = 'example';
jQuery.ajax({
url:'index.php',
type: "POST",
data: {'name':id},
success: function(data)
{
alert("success");
}
});
};
</script>
<?php
if(isset($_POST['name']))
{
$value = $_POST['name'];
echo $value;
}
else
{
echo "don't work.";
}
?>
</body>
</html>
<?php
if(isset($_POST['name']))
{
echo json_encode(array(
'value' => $_POST['name']
));
exit();
}
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<button type="button" onclick="myFunc()">Get ID</button>
<script>
function myFunc()
{
var id = 'example';
jQuery.ajax({
url:'index.php',
type: "POST",
data: {'name':id},
dataType : 'json',
success: function(data)
{
alert("success");
}
});
};
</script>
</body>
</html>
I want to pass a variable from file1.php to file2.php using jquery.
file1.php
<?php
$user_rank = $rank;
?>
file2.php
<?php
$user_rank = $_GET['user_rank'];
?>
AJAX
function getRank()
{
$.ajax({
type: "GET",
url: "file2.php",
data: ?????,
success: function(result){
$("#TargetRank").html(result);
}
});
};
Can anyone help me with this?
The passing part can happen in the script where the variable is defined, so in file1.php. Then you get the following files:
file1.php:
<?php
$user_rank = 123;
?>
<script>
function getRank()
{
$.ajax({
type: "GET",
url: "file2.php?user_rank=<?php echo $user_rank; ?>",
success: function(result){
$("#TargetRank").html(result);
}
});
};
</script>
file2.php:
<?php
$user_rank = $_GET['user_rank'];
echo $user_rank;
?>
I'm guessing the Javascript code is used in file1.php. Then your question becomes more like "How do I pass a PHP variable to Javascript?". The best way I have seen is with a "data element" in the DOM.
Add this to file1.php (somewhere logicalish)
<span id="user-rank" data-rank="<?= $user_rank ?>"></span>
Then you can grab that value in your JS
function getRank()
{
var rank = $("#user-rank").attr("data-rank");
$.ajax({
type: "GET",
url: "file2.php?user_rank="+rank,
success: function(result){
$("#TargetRank").html(result);
}
});
};
Assuming your AJAX is in file1.php you could do this:
file1.php
<?php
$user_rank = $rank;
?>
<script>
function getRank()
{
$.ajax({
type: "GET",
url: "file2.php",
data: {user_rank: '<?php echo $user_rank; ?>'},
success: function(result){
$("#TargetRank").html(result);
}
});
}
</script>
On file1.php output the variables as JSON (see Returning JSON from a PHP Script )
Then on the JavaScript do an ajax call to read the variables to an object (let's call it data).
Then do your call placing the data variable where you have the ????? .
Example:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function(){
$.getJSON( "http://dev/json.php", function( data ) {
$.ajax({
type:'GET',
url:'json2.php',
data: data,
success: function(data){
console.log(data);
}
});
});
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
json.php
<?php
header('Content-Type: application/json');
echo '{"name":"Telmo Dias"}';
json2.php
<?php print_r($_GET); ?>
Result:
This is my code and i want to pass javascript variable with ajax to php when i click submit button then the result doesn't show var_data variable from javascript What code is wrong?
This is edit order one before everybody help me
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#sub').click(function() {
var var_data = "Hello World";
$.ajax({
url: 'http://localhost/ajax/PassVariable.php',
type: 'GET',
data: { var_PHP_data: var_data },
success: function(data) {
// do something;
}
});
});
});
</script>
</head>
<body>
<input type="submit" value="Submit" id="sub"/>
<?php
$test = $_GET['var_PHP_data'];
echo $test;
?>
</body>
</html>
and this is source code now
<?php
if (isset($_GET['var_PHP_data'])) {
echo $_GET['var_PHP_data'];
} else {
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$(document).ready(function() {
$('#sub').click(function() {
var var_data = "Hello World";
$.ajax({
url: 'http://localhost/test.php',
type: 'GET',
data: { var_PHP_data: var_data },
success: function(data) {
// do something;
$('#result').html(data)
}
});
});
});
</script>
</head>
<body>
<input type="submit" value="Submit" id="sub"/>
<div id="result">
</body>
</html>
<?php } ?>
this statement if(isset($_GET['var_PHP_data'])) output false and then show Hello World What should i do to do for isset($_GET['var_PHP_data']) is true?
Your solution has PHP issues: you don't check if the data exists, and also, you don't do anything with the result. I've modified the script to do the following:
Check if the var_PHP_data var is set (in PHP, on the server).
If yes, just send a blank text response containing that data.
If no, then draw the form and everything else.
In the form, I've created a #result div.
Ajax response will be shown in this div.
Also make sure that you host the script at localhost and that it is called test.php. To make sure this is resilient, you can change the Ajax URL to
<?php echo $_SERVER['PHP_SELF'];?> to make sure that you'll hit the correct script.
<?php
if (isset($_GET['var_PHP_data'])) {
echo $_GET['var_PHP_data'];
} else {
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
<script>
$(document).ready(function() {
$('#sub').click(function() {
var var_data = "Hello World";
$.ajax({
url: 'http://localhost/test.php',
type: 'GET',
data: { var_PHP_data: var_data },
success: function(data) {
// do something;
$('#result').html(data)
}
});
});
});
</script>
</head>
<body>
<input type="submit" value="Submit" id="sub"/>
<div id="result">
</body>
</html>
<?php } ?>
Try jQuery Form its this will help to solve many problems.
For you question: try url without domain name, add tags 'form', change event click to submit, add data type
what are the contents of PassVariable.php ? if is the same where you have they jquery bit wont work coz php will print all the page again, if the file is different try
success: function(data) {
alert('databack = '+ data);
}
Try placing your input into a form and attaching the ajax call to the form onsubmit event. The way it happens in the provided happen is when you click in the field, in which case it submits before you can write anything really.
$(document).ready(function() {
$('#brn').click(function() {
var var_data = "Hello World";
alert("click works");
$.ajax({
url: 'http://localhost/ajax/PassVariable.php',
type: 'GET',
data: { x: var_data },
success: function(data) {
alert(data);
}
});
});
});
change it to this code
then in PassVariable.php put
make button
<input type="button" id="btn" value="click me" />
it should work because it is very basic example. If it doesn't work check your console if there are any JavaScript errors and remove them.
Problem 1: My content overlaps itself twice after I post some data back to the same page using jQuery.ajax(). The reason why I'm posting data back to the same page is because I need to pass my JavaScript values to the PHP side.
Question: How do I edit my code such that there will only be 1 copy of my content, before and after posting of data to the same page?
Problem 2: You may have noticed there is a $("#test").html(data); in my bingo function and a <span id="test"></span> in my body. I can't seem to remove them if not the passing of Javascript values to the PHP side would not work as shown by my print_r().
Question: Is there any way I can remove them but still pass my values from JavaScript to PHP using jQuery.ajax()?
bingo.php
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<?php
if (!isset($_POST['varA']) && !isset($_POST['varB']))
{
?>
<script type="text/javascript">
$(document).ready(bingo);
function bingo()
{
jQuery.ajax({
type: "POST",
data: {varA: "123", varB: "456"},
success: function(data)
{
alert("POST to self is successful!");
$("#test").html(data);
}
});
}
</script>
<?php
}
else
{
print_r($_POST['varA']);
echo " - ";
print_r($_POST['varB']);
}
?>
</head>
<body>
<input type="text" value="meow"/>
<span id="test"></span>
</body>
</html>
Omg that is so messy! Try the following code anyway:
<?php
if (isset($_POST['varA']) && isset($_POST['varB'])) {
print_r($_POST['varA']);
echo " - ";
print_r($_POST['varB']);
} else {
?>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(bingo);
function bingo()
{
jQuery.ajax({
type: "POST",
data: {varA: "123", varB: "456", ajax: true},
success: function(data)
{
alert("POST to self is successful!");
$("#test").html(data);
}
});
}
</script>
</head>
<body>
<input type="text" value="meow"/>
<span id="test"></span>
</body>
</html>
<?php
}
?>
If you wish to keep your ! in your conditions, you can do it the other way round also.
<?php
if (!isset($_POST['varA']) && !isset($_POST['varB'])) {
?>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(bingo);
function bingo()
{
jQuery.ajax({
type: "POST",
data: {varA: "123", varB: "456"},
success: function(data)
{
alert("POST to self is successful!");
$("#test").html(data);
}
});
}
</script>
</head>
<body>
<input type="text" value="meow"/>
<span id="test"></span>
</body>
</html>
<?php
}
else {
print_r($_POST['varA']);
echo " - ";
print_r($_POST['varB']);
}
?>