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']);
}
?>
Related
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'm trying to echo $_POST with $.ajax in PHP with no success. In Xdebug I see the $_POST get the right value and executing the echo $_POST line, but I keep getting the else output clause. Also in chrome I see the headers that are sent valid. All the code is in the same page index.php.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
<button type="button" id="but">Click Me!</button>
<script>
$('#but').click(function() {
$.ajax({
type: "POST",
url: "index.php",
data: {name: "John"},
success: function() {
alert('success');
}
});
});
</script>
</body>
</html>
<?php
if ($_SERVER['REQUEST_METHOD'] == "POST") {
echo $_POST['name'];
} else {
echo "Nothing to Show";
}
?>
At the moment the whole page is being returned in response to your AJAX request; HTML and all. You're also not retrieving the value returned from the request in your JS code, to do that you just need to accept a parameter on your success handler. Try this:
In it's own file, say foo.php:
<?php
if ($_SERVER['REQUEST_METHOD'] == "POST") {
echo $_POST['name'];
} else {
echo "Nothing to Show";
}
?>
Then in your HTML:
<script>
$('#but').click(function() {
$.ajax({
type: "POST",
dataType: 'text', // to ensure jQuery doesn't try to deserialise the repsonse
url: "foo.php",
data: { name: "John" },
success: function(response) {
console.log(response.trim()); // = 'John'
}
});
});
</script>
Ajax will return a response and you can use that response to display. It will not work on the same page.
Try as below :
main.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
<button type="button" id="but">Click Me!</button>
<div id="result"></div>
<script>
$('#but').click(function() {
$.ajax({
type: "POST",
url: "test.php",
data: {name: "John"},
success: function(data) {
alert('success');
$('#result').html(data);
}
});
});
</script>
</body>
</html>
test.php
<?php
if ($_SERVER['REQUEST_METHOD'] == "POST") {
echo $_POST['name'];
} else {
echo "Nothing to Show";
}
?>
this is my html code when i click on submit button it displays alert and then when i open the retrieveform.php it does not show me the value please solve this mystery
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'retrieveform.php',
data: $('form').serialize(),
success: function () {
alert('helllo');
}
});
});
});
</script>
</head>
<body>
<form>
<input type="text"name="t1">
<input type="submit"name="s1"value="submit">
</form>
</body>
</html>
and my retrieveform.php is
<?php
if($_POST['t1'])
{
echo $_POST['t1'];
}
else
{
echo "hekllojjio";
}
?>
Is it possible that the element "t1" is present since it's part of your form, but empty or just empty characters .. perhaps check if this is the case?
<?php
if($_POST['t1'] && !empty($_POST['t1'])) {
echo "You submitted t1 of: ".$_POST['t1'];
} else {
echo "t1 is empty";
}
?>
Also of note is you may want to use something like firebug to view the ajax page loaded and its results. The echo statement on the ajax loaded page will not display on the parent page unless you set the contents of the response into the page:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$('.form').on('submit', function (e) {
tValue = $(this).find(input[type=text]:first).val();
e.preventDefault();
$.ajax({
type: 'post',
url: 'retrieveform.php',
data: $('form').serialize(),
success: function (response) {
alert('helllo');
$('#placeholder').html(response);
$('#placeholder2').html(tValue);
}
});
});
});
</script>
</head>
<body>
<?PHP for ($i = 1; $i <= 10; $i++) { ?>
<form class="form" name="form_<?PHP echo $i; ?>" id="form_<?PHP echo $i;?>">
<input type="text" id="t<?PHP echo $i; ?>" name="t<?PHP echo $i; ?>">
<input type="submit" name="s<?PHP echo $i; ?>" value="submit">
</form>
<?PHP } ?>
<div id="placeholder"></div>
<div id="placeholder2"></div>
</body>
</html>
with this your ajax loaded page's echo will be put on the page in the "placeholder" div.
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>
I'm using jQuery's .ajax() to post to a PHP file called process.php. Process.php has a lot of code in it, but for simplicity's sake, let's just say it contains <?php echo 'hello'; ?>.
Is this the proper jQuery to insert process.php's results into div.results? :
$.get('process.php', function(data) {
$('.results').html(data);
});
So far it doesn't seem to be working.
Here's the HTML/Javascript file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("form#form").submit(function() {
var username = $('#username').attr('value');
$.ajax({
type: 'POST',
url: 'process.php',
data: 'username=' + username,
success: function() {
$('form#form').hide(function() {
$.get('process.php', function(data) {
$('.results').html(data);
});
});
}
});
return false;
});
});
</script>
</head>
<body id="body">
<form id="form" method="post">
<p>Your username: <input type="text" value="" name="username" id="username" /></p>
<input type="submit" id="submit" value="Submit" />
</form>
<div class="results"></div>
</body>
</html>
Here's process.php (greatly simplified):
<?php
/* get info from ajax post */
$username = htmlspecialchars(trim($_POST['username']));
echo $username;
?>
If you simply want to place the resulting string back into an element, use load().
$('.results').load('process.php');
However, looking at your code...
$.ajax({
type: 'POST',
url: 'process.php',
data: 'username=' + username,
success: function() {
$('form#form').hide(function() {
$.get('process.php', function(data) {
$('.results').html(data);
});
});
}
});
...shows you have misunderstood something. The correct anonymous function to assign to the success callback would be...
function(data) {
$('form#form').hide()
$('.results').html(data);
}
You could try something like this.
function ajax_login() {
if ($("#username").val()) {
$.post("/process.php", { username : $("#username").val() }, function(data) {
if (data.length) {
$("#login_form").hide();
$("#login_result").html(data);
}
})
} else {
$("#login_result").hide();
}
Then in process.php just echo out some text if the post sucesses.
process.php =>
if (isset($_POST['username'])
{
echo 'hello '.$_POST['username'];
}