I am working on an instant search thing and when I submit the form search-form it is going to make an ajax post to PHP. It sends and everything but then the PHP page says that the variable has no value but the data is clearly being posted.
$('#search-form').submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "Search.php",
cache: false,
data: $("#search-form").serialize(),
success: function(data) {
alert($("#search-form").serialize());
$("#searched").fadeIn("fast");
$("#results").empty();
$("#results").append(data);
}
});
return false;
});
Make sure you have a console opened up in your browser, Firefox: bugzilla, Chrome and IE have a built-in. It shows you what is happening in asynchronous requests.
in your php file at the top do this:
var_dump($_POST);
//OR DO THIS:
// print_r($_POST);
Then look at your browser console to see what the response is. It should spit out an array. and you can see what the name of your data is. This is the quickest way to debug any ajax request.
Also, don't forget that you serialized the data with .serialize();
Related
I have a form, running through jquery validation which then submits via ajax to a PHP script to handle backend functions. Ajax collects form values through serializeArray() and looks to do the job. Script fires and data is sent through(I think) to PHP. I've tried probably close to 100 combinations to receive the data at the PHP side but with no luck. I'm convinced this must be simple, something I've overlooked. Code for the ajax is below, along with a screenshot of developer tools showing what's being sent.
No matter what I try on the PHP side, I either get an empty array, NULL through $_POST/$_GET. I've tried json_decode, parsing the string, var_dump etc.
var data=$(form).serializeArray();
$.ajax({
cache: false,
type: "POST",
dataType: "JSON",
url: "process/create_site.php",
data: data,
success: function(response) {
console.log(response);
//$(form).html("<div id='message'></div>");
//$('#message').html("<h2>Your request is on the way!</h2>")
// .append("<p>someone</p>")
// .hide()
// .fadeIn(1500, function() {
// $('#message').append("<img id='checkmark' src='images/ok.png' />");
// });
}
});
I managed to get to the bottom of this, after an embarrassing amount of time. I'd like to post the simple reason here to help others.
The entire JS block was wrapped in $(document).ready(function(){
which was causing the values to be stripped when posting to the PHP.
I can't find any documentation or answer to a question with a similar scenario - so here it is!
Thanks for your time in reading this post.
I am facing issues while passing javascript variable to php file.
Please look at the below code for your reference which i have written in checkout.php.
$.ajax({
type: "POST",
url: "checkout.php",
data: localStorage.getItem("simpleCart_items"),
success: function(data) {
console.log("result"+JSON.stringify(data))
My php code :
<?php $data=$_POST['data']; echo $data;?>
Redirect is happening but $data value is null.
The { data: data } is passed only to the first checkout.php call using POST method. When you redirect the user with window.location.href it has nothing to do with the previous call.
Depending on your use-case you could in the first call to checkout.php save data to session and the access it in the second call but it really depends what you're trying to do.
Edit: jQuery's data parameter is the entire payload you want to send to server. So if you were sending:
$.post({
data: {
message: 'Hello'
}
...
});
It'll be available in checkout.php as $_POST['message'] and not $_POST['data']['message'].
Sorry if this is a silly question but I'm completely new to AJAX and I'm wondering why my code is not working like I want..
I have the following:
an Ajax Call looking like that:
$.ajax({
type: "POST",
url: "/newnote.php",
data: {
content: content
},
success: function() {
}
});
and on the beginning of the page newnote.php (which is exactly the one, where the ajax-call is on, I have the following PHP:
if(!empty($_POST)){
header("Location:index.php");
}
But the php on the beginning of the page is not executed, of course, because the site seems not to be reloaded, but, when looking in developer tools under "network", i see that there is a post request on newnote.php with the values I want. But the question is: How can I access them? So for example, if I post the following data: content: "test", that I can write in PHP sth. like <?=$_POST['content'];?>... So how can I access the $_POST-Data from AJAX? Do I need to refresh the page or how does this work?
Thanks for your help
after exchanging I now got the question:
to access to your code you must use the callback of your ajax call
success: function(result){
$("#div1").html(result); // here you put the content that echoes your php inside your div1 on the actual page without reload
}
On the php side where the content is posted you must echo something that will be caught by this ajax call
I have two PHP files with one posting via ajax to the other one. The post works great in chrome. But it doesnt work in firefox. A debug with firebug shows "POST error" in red color. I am pasting my codes below.
Ajax:
var data_val={'user_name' : response.name,
'user_id' : response.id,
'user_first' : response.first_name,
'user_email' : response.email,
'user_birthday': response.birthday,
'user_location': response.location.name,
'user_hometown':response.hometown.name,
'user_bloodGroup':window.bloodGroup,
'user_bloodRare':window.user_bloodRare,
'user_phone_no':window.user_phone,
};
$.ajax({
type: "POST",
url: "buddha.php",
data: data_val,})
});
The file into which it is being posted, buddha.php.
$name1 = $_POST['user_name'];
$email1 = $_POST['user_email'];
$birthday1=$_POST['user_birthday'];
$location1=$_POST['user_location'];
$hometown1=$_POST['user_hometown'];
$fbbloodgroup=$_POST['user_bloodGroup'];
$fbuserid=$_POST['user_id'];
$user_phone=$_POST['user_phone_no'];
$user_bloodRare=$_POST['user_bloodRare'];
$user_email=$_POST['user_email'];
The above ajax is inside a javascript function,
function fetchUserDetail()
It is called in a buttonclick as follows.
<a class="button_for_me" onclick="checkFacebookLogin()" >Register Me </a>
I have to repeat, this works perfectly and pleasantly in chrome. Initially i thought it was the problem of the success alerts shown at he return of the ajax function, but its not.
Assuming from your question that "response" is an object returned by FB API call, I would like to say that the problem is with the Facebook API. Sometimes, the user doesn't have value for variables like "Hometown" and "CurrentTown". In that case, the following assign operations in your code would fail.
'user_location': response.location.name,
'user_hometown':response.hometown.name,
'user_bloodGroup':window.bloodGroup,
Try changing the ajax from:
$.ajax({
type: "POST",
url: "buddha.php",
data: data_val,})
});
to remove the extra closing tags and comma after data_val like
$.ajax({
type: "POST",
url: "buddha.php",
data: data_val
});
Check out this jsFiddle i created for you with an event binding on the class to trigger the ajax request when clicked.
First the code below works, but truth be told i don't know why :) it just worked after many trial and errors
I need the $_POST data submitted through the #filter-form, for loading the page as action1 function will require $_POST data.
If i remove +data or .html(data) it doesn't work anymore.
Also if i change url:"..." it does not work anymore either and i don't understand why as i don't need to to anything here, all i need is to load this page.php page and pass the $_POST so that it can output properly.
My QUESTION is, WHY does it work ? (i want to understand why putting +data or html(data) is so important to make sure $_POST is passed) and how can i make it more proper ?
Thanks for your help
<script type="text/javascript">
$("#filter-form").submit(function(event) {
$.ajax({
type: "POST",
url: "includes/page.php?action=action1",
//Specify the datatype of response if necessary
data: $("#filter-form").serialize(),
success: function(data){
alert("succeess");
$("#tableresult").load("includes/page.php?action=action1"+data).html(data);
}
});
event.preventDefault();
return false;
});
</script>';
You don't need to use .load() at all. It should be:
success: function(data) {
alert("success");
$("#tableresult").html(data);
}
This takes the response that the AJAX server returned, which should be HTML code, and puts it into the tableresult element.
The way you had it written, you're calling the server twice, which doesn't seem right.