Is it possible to access $_POST variables without appending all the form elements into the data attribute?
Ajax call:
$.ajax({
type: "POST",
url: "ajax/user.php",
data: {**data**},
success: this.saveUserResponse
});
Accessing variables:
if(isset($_POST['saveUser']) && $_POST['saveUser']){
$user = $_POST['username'];
...
...
exit;
}
Or do i need to append all form elements to the data attribute, like:
var userId = $('#userId').val();
$.ajax({
type: "POST",
url: "ajax/user.php",
data: {user : userId, etc... },
success: this.saveUserResponse
});
Thanks for your help
You can use the .serialize() method on the form to do that for you.
$.ajax({
type: "POST",
url: "ajax/user.php",
data: $("#formid").serialize(),
success: this.saveUserResponse
});
See Help with Jquery and multiple forms on a page.
You can also use the jQuery Form plugin to make this work a lot simpler. Using that, you can create a normal form in HTML (which you already have), set it up using method="POST" and action="ajax/user.php", and then call $("#formid").ajaxForm(this.saveUserResponse) on load. This sets up everything and has the additional advantage that it will probably also work (in most rudimentary form) when JavaScript is disabled.
jQuery will only send data that you explicitly pass to the server.
You can pass the values of all of the form elements by passing $('form').serialize().
Related
I have a PHP script that generates identical forms with different values (ie. lines of a database)
When one form is submitted, I want it to trigger an AJAX request that will update just that line of the database without reloading the page.
I have this AJAX script in my header:
function ajaxCall() {
$.ajax({
url:"database_quickupdate.php",
type: "POST",
success:function(result){
alert(result);
}
});
And obviously all forms have onsubmit="ajaxCall()" attributes set
But when I try to return the $_POST array from database_quickupdate.php, it comes back empty (meaning no data is passed to the script)
I tried various versions of serializing the data, including this here:
$.ajax({
type: "POST",
url: 'database_quickupdate.php',
data: $(this).serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
but this didn't work either.
Of course I can assign unique ID-s to each of the forms, but then how can I tell ajaxCall in the header that I want the values from the form that_has_just_been_submitted?
It must be something very basic, still, I'm lost. I think I'm missing something on the jQuery side, but I'm not even sure about that.
Thanks for your help
onsubmit="ajaxCall()"
You're calling ajaxCall() by itself, so inside it this is the default object (window in a browser).
So then:
$(this).serialize()
You are trying to serialize the window and not the form.
You need to pass the form.
Don't use on... attributes. They come with a host of issues.
Bind your event handlers with JavaScript instead.
jQuery("form").on("submit", ajaxCall);
That will pass the form as the value of this.
I'm trying to save a data attribute of a div on click into a variable PHP. So I used $.ajax to send data with POST but it return an empty array.
However, the POST is visible in the console with good data.
AJAX
$('.get-thumbnail-id').click(function() {
var thumbnail_id = $(this).data('id');
$.ajax({
type: "POST",
url: "gallery.php/",
data: {thumbnail_id: thumbnail_id}
});
});
GALLERY.PHP
var_dump($_POST['thumbnail_id']);
I must have done something wrong but I really don't know what... any help is appreciated, thanks.
You should be doing
var_dump($_POST['thumbnail_id']);
Because the POST variable you are passing in the AJAX call has name thumbnail_id not just id
and check it with
$.ajax({
type: "POST",
url: "gallery.php/",
data: {thumbnail_id: thumbnail_id},
success : function(data){console.log(data);}
});
Check whether is prints anything in the console.
I want to pass a value from my jquery code to a php variable after a user inputs through a textbox, but I don't receive any value at all in the PHP side through POST.I'm using .change and .post, does anyone here knows how to do it properly?
here's my code:
$(document).ready(function(){
$("#packagename").change(function(){
var packagename = $('#packagename').val();
var url = '{{url}}'; //localhost/test/test.php
$.ajax({
type: 'post',
url: url,
dataType:html,
data:{'val':packagename},
});
});
});
try it
$(document).ready(function(){
$("#packagename").change(function(){
var packagename = $('#packagename').val();
var url = '{{url}}'; //localhost/test/test.php
$.ajax({
type: 'post',
url: url,
dataType:text,
data:{'val':packagename},
success:function(result){
alert(result);
}
});
});
});
The only problem that I can see offhand is that the html in dataType:html, needs to have quotes around it like this: dataType: 'html',. Otherwise your code will look for the variable html, not find it, and throw an error.
http://api.jquery.com/jQuery.post/
dataType
Type: String
The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
change dataType: html, to dataType: 'html',
Have you tried just putting the url into the url field instead of whatever that object is you are trying to use?
I will assume you are not trying to ajax to the page you are currently on and expecting the php variable to display on the current page.
I'm not sure this question has the best of titles but I'm not sure what else to call it so sorry for that.
I'm using ajax to pull in content for a div on my website (after an option is selected). The content is a form generated by a PHP script. When the form is submitted a JavaScript function should be called but I'm just getting an error that says the function can't be found.
The JavaScript is pulled in via ajax with the form and I can't really change that as it needs to change demanding on the option selected.
My question is should this work? if not I'll just have to re think the way I'm doing it, just wanted to check if it wasn't working because it never will or if I'm doing something wrong.
I would show the code but it's very long.
Thanks in advance!
Edit: thanks for all the comments ect, apologies for not including the code before here it is.
function select(id){
$.ajax({
url: 'select/'+id,
type: 'GET',
dataType: 'html',
success: function(msg) {
$('.product_details').html(msg);
return false;
}
});
}
Are you using a javascript library?
With jQuery specify a data type of html and make sure the script tags are before the HTML in the response
$.ajax({
url: "something.php",
dataType: "html",
success: function(data, text, request) {
...
}
});
in mootools...
var myRequest = new Request({
url: "something.php",
evalScripts: true,
onSuccess: function(responseText, responseXML){
....
}
});
myRequest.send();
Now your passed tags will be evaluated and available to the DOM
I'm going to use a time interval to call function autoSave(). Inside the function I'm going to use AJAX to send the content what has been written inside the forms textarea. Hmmm, how do I get a variable or something that holds the text from the form to send with AJAX to a PHP page?
In the PHP page I'm going to use code like this to get te content of the textarea
$articleText = isset($_POST['articleText']) ? $_POST['articleText'] : '';
But I need some help to pass the text from the form togehter with som info like ?p=add-reply'
I guess the AJAX would look like something like this, but I'm not sure about the variables?
$.ajax({
url: "PStoreForm.php",
type: "POST",
dataType: "text",
data: ??????????????
});
This should work
$.ajax({
url: "PStoreForm.php?param=xxxx¶m2=yyy",
type: "POST",
dataType: "text",
data: "articleText="+$("#yourtextareaid").val()
});
Try this:
//...
data: document.getElementsByTagName("textarea") [0].value
try
$.post("PStoreForm.php", {articleText: $('#textarea').val()}, function(){alert("saved");} );