My first question :)
I am using Mootools and i have a JavaScript function, my issue is how to post data to form without refreshing the page.
I think that my code is not working with Mootools, Please check and advise
<script type="text/javascript">
function (PostData) {
$.ajax({
type: "POST",
url: "form.php",
data: { userid: 1111, test: 'test'}
})
}
</script>
Thanks
As it was already stated. the $.ajax method is a Jquery method. If you want to do it in mootools you should use the Request Class.
Here's the Mootools request documentation in case you want (and should) dig a little deeper.
Here's what you want to achieve using Mootools
var request = new Request({
url: 'form.php',
method: 'post',
data: {
userId:1111,
test: 'test'
},
onSuccess: function(response){ Whatever you want to do}
}
request.send();
You could also use the Request.JSON object, which automatically decodes the response into a Json object.
Related
I've been trying to learn basic AJAX and Javascript by following various tutorials and examples online, but I've hit a wall. I'm trying to write a simple script to take user-input from a form using AJAX and submit it to a PHP script, which then just echos the input.
All I can really tell is that whatever is being entered is not going through, but I'm not at the point yet where I can say why. I've tried with both POST and GET, and with various dataTypes, with the same result. I'm certain that I'm doing something wrong or misunderstanding something, but I'm not sure what.
HTML/ AJAX
<form id="my_form">
word <input type ="text" id="word1"/><br/>
<input type="submit">
</form>
<script>
$(document).ready(function(){
$("#my_form").on(function(e){
e.preventDefault();
var verb = $("word1").val();
$.ajax({
url: "testrun.php",
data: "verb",
type: "POST",
});
});
});
</script>
PHP
if (isset($_POST['verb'])){
$x= $_POST['verb'];
echo $x;
}else {
echo "not working";
}
EDIT: I've tried a few of the suggestions thus far, copying and pasting them directly, and none of them have actually done anything that I can see. I think I'm starting to understand a bit more about how AJAX should work, based on the responses, but it's still not reaching the PHP for some reason. I've tried both with the AJAX/HTML in a separate file that calls to the testrun.php script and with putting everything into the testrun.php file and basically having it call itself with the AJAX, but neither approach has achieved anything.
If the AJAX that I've gotten from the responses is fine, then am I misunderstanding something in how the PHP should be set up in order to actually receive the POST data? I'm still rather lost.
Three changes:-
1.var verb = $ ("word1").val(); need to be var verb = $ ("#word1").val();because its id (word1)
2.data: "verb", needs to be data: {"verb":verb},
3.form submission need to be correct so code given below (missing submit):-
Correct code:-
$(document).ready(function(){
$("#my_form").on('submit',function(e){ // check here you have one missing `submit`
e.preventDefault();
var verb = $("#word1").val(); // remove space between `$` and `(`
$.ajax({
url: "testrun.php",
data: {"verb":verb},
type: "POST",
});
});
});
You can not send data as data: "verb", in ajax. you need to send your data in params.
Second, you can not get the value of word1 input as $("word1").val(); you need to use # for get input by IDs.
Example:
$(document).ready(function(){
$( "#my_form" ).submit(function( e ) { //CHANGED using submit event.
e.preventDefault();
var verb = $("#word1").val(); //CHANGED
$.ajax({
url: "testrun.php",
data: "verb="+verb, //CHANGED
type: "POST",
});
});
});
You forgot # foe id selector of word1.
.on() needs event to bind to. In your case of form submit, it's submit
Data should be passed as object. In your case, you will be able to access it with $_POST['verb']
$(document).ready(function ()
{
$("#my_form").on('submit', function (e)
{
e.preventDefault();
var verb = $("#word1").val();
$.ajax({
url: "testrun.php",
data: {verb: verb},
type: "POST"
});
});
});
you miss to give the # sign in var verb = $("word1").val();
and use a variable just as a variable to the data like data: {"your_var_name" : verb}
Try this ...
$.ajax({
type: "POST",
url: "testrun.php",
data: "paramname=value", // access in php $_POST['paramname']
success: function(data){
// if page request is success
},
error: function(data){
// if page request failes
}
});
You have to do this:
var verb = $("#word1").val(); //Don't forget to add #
$.ajax({
url: "testrun.php",
data: {"verb":verb},
type: "POST",
});
verb is a variable, no need to put in between quotation!
The correct answer is
HERE by Anant
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 looking to POST very simple data to a page for a "favorite" button, called "postData.php" where I already understand how to handle POST data and send it to the server. What I'm unsure of is how to set up the jquery .ajax function to make this work.
I understand that there will be
$('#myDiv').click(function(){}
for the function call, but what do I include in the function? The data sent in your example can be generic as I just need to understand jquery-ajax a little better.
Any help would be greatly appreciated.
There is a shortcut function called $.post().
$.post('postData.php', { name: "John", time: "2pm" }, function(data) {
$('.result').html(data);
});
Otherwise, this is how the $.ajax() function is used.
$.ajax({
type: "POST",
url: 'postData.php',
data: data,
success: success,
dataType: dataType
});
For the event itself, assuming jQuery 1.7X or later.
$(document).on("click", "#myDiv", function(){
$.post("filethatacceptspostdata.php", {'data':'object', item2:'data', item3:'data'}, function(myreturndata){
//Whatever you want to do with myreturndata here.
//I would have the filethatacceptspostdata.php file output a number 1 if the data was successfully stored.
});
});
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
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().