I would like to submit some data. Weather this be using a form, or onClick execute some AJAX, I'm not sure.
For example, I have this input
<input id='inpamount' type="text" name="amount" value="2.00" onkeyup="pad();validatemin();product()">
Now say if I wanted to send this data to a PHP file, using post ( i could just add a form). But then, without reloading the page (I can do this), how could I fetch a response (using AJAX).
Essentially I would like a user to be able to press a button, then to submit the inputs to a php file, and then get the output and assign it to a variable (I know how to do this, I just want to be able to get the data.
The php execute takes a few centiseconds because it comunicates with SQL. (If this matters).
I have considered using invisible forms but it didn't seem to work
If anyone could point me in the right direction, that would be great.
Something like this?
$(document).ready(function(e) {
$('#inpamount').click(function() {
var data = 'myValue=' + $(this).val();
$.ajax({
url: "yourscript.php",
type: "POST",
data: data,
cache: false,
success: function(scriptOutput) {
//handle the result
}
}
});
return false;
});
});
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.
here is my input
<textarea id="mytext" class="txtarea" name="in_content" cols="120" rows="15"><?php echo $term;?></textarea>
here is my ajax code that take value of the textarea above
$('#spdf-form').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#spdf_results').html(data);
$('#spdf-form').fadeOut('slow');
var textAreaValue = $("#mytext").text();
alert(textAreaValue);
}
})
return false;
});
it's works, and show the value in the alert popup. Now i want to show the result as php code. i want to insert the value into tinymce editor, and the editor will be called like this
<?php the_editor(''); ?>
so i think i should do this
$myvalues = something to get the results from ajax function
and then i call the editor like this
<?php the_editor($myvalues); ?>
but i dont know how to do that, can someone help me please? i tried to get the value directly but it didnt work also.
PHP is server-side. JavaScript/jQuery/AJAX is client-side. You can't run PHP on the same page after it's been sent to the client.
You'll need to use AJAX to request your editor code from the server, then take the editor code and insert it into the page.
Whenever I press the submit button on my form it just serializes in the url, the thing here is that I dont have any script/function included to make this happens.
I've another register form that uses ajax but this one is fine, the serialize works as it should.
my script:
$("#frmCadastro").submit( function() {
dataString = $("#frmCadastro").serialize();
$.ajax({
type: "POST",
url: "cadastroUsuario.php",
data : dataString,
dataType: "html",
success: function(retorno) {
$("#resposta").html(retorno);
}
});
return false;
});
Just to mention, I've got 1 registration form that works well and another that I'm programming and this one is giving me headaches. I didn't even include the script and whenever I press submit all the inputs just serialize in the url, but if I put a destination on the action of the form when I press submit the destination is executed.
I think that's it, if you guys want more details just ask.
Adding this as an answer: If your form tag has the method="GET" it will serialize everything. Setting it to method="POST" should stop that, if you haven't tried it. Also, if you want to prevent the form from submitting itself (to let the ajax run first) just put in a return false; statement inside the function. Then after the AJAX runs, if you want, you can submit the form again with a $('formname').submit(); just like you have already.
I have what I think is a fairly classical problem involving what looks to me like a callback race, but in spite of all my reading, I'm still stuck. You'll find the code pasted below.
It's a simple log in form and you can see that when a certain button is clicked, I'll send the form data "ajaxically" to an external php file. Once the php has run, I'm to receive the results back, and as a test here, to simply alert out the email address from the php file.
When I run this, the ajax callback doesn't execute. If I click the button fast and repeatedly, I get the right alert. I also get the right response if I put in an extra alert.
How do I get it to run without doing these other silly things?
Thanks in advance
RR
$('#'+this.loginForm[0].parentId+"logIn")
.on('click', function() {
var jax = $.ajax(
{
type: "POST",
url: "../sharedfunctions3/act-membership.php",
data: {email: document.getElementById(that.parentId+'email').value,
password: document.getElementById(that.parentId+'password').value,
path: that.path,
action: "logIn"
}
});
jax.done(function()
{
obj = JSON.parse($.trim(jax.responseText));
alert(obj.email);
});
jax.fail(function() { alert("error"); });
alert(1);
});
I had a hunch that when you clicked the button the browser was submitting synchronously and asynchronously.
The return false; tells the browser to not submit the form and to prevent default actions from there on.
When a button inside of a form tag is clicked, most browsers will submit the form even though it is not a submit input.
I have a page with multiple forms that do the same thing, acting as a like button for each post in the page, and right next to it the number of likes inside a div named "likes".$id, so I can identify where to write the likes count after the ajax call. I was trying to use jQuery ajax function, but I couldn't set what div to write the results of the function.
$.ajax({
type:'POST',
url: 'likepost.php',
data:$('#like').serialize(),
success: function(response) {
$('#like').find('#likediv').html(response);
}
});
And how would I access the data on likepost.php? I am terrible with javascript, so I hope someone could help me and explain how the jQuery function really works, because I've been copying and pasting it without really knowing what I was doing.
Would this work?
$(function () {
$("#likebutton").click(function () {
var id = $('input[name=id]'); // this is me trying to get a form value
$.ajax({
type: "POST",
url: "likepost.php",
data: $("#like"+id).serialize(), // the form is called like+id e.g. like12
success: function(data){
$("#likes"+id).html(data); // write results to e.g. <div id='likes12'>
}
});
});
});
I put this in the code but when the button is clicked, the usual post refreshing page is done. Why is that?
Making a mini-form, serializing it, and POSTing it seems like a lot of heavy lifting when all you really want to do is send the ID to the likepost.php script.
Why not just retrieve the ID and post it to the script?
First let's break down your function:Type is the type of the request we're making, you specified POST here. This means in your PHP file you'll access the data we're sending using $_POST. Next up is URL which is just the url of where you're sending the data, your php file in this case.
After that is data, that is the data we're sending to the url (likepost.php). You're serializing whatever has a ID of "like" and sending it to the php file. Finally success is a function to run once the request is successful, we get a response back from the PHP and use it in the function to output the response.
As for the multiple forms I'd recommend doing something like:
http://www.kavoir.com/2009/01/php-checkbox-array-in-form-handling-multiple-checkbox-values-in-an-array.html
Here's documentation on the stuff we talked about, if you're every confused about jquery just break it down and search each part.
http://api.jquery.com/serialize/
http://api.jquery.com/jQuery.ajax/
you can try :
function submitform(id) {
var jqxhr = $.post('./likepost.php',$("#"+id).serialize(), function(data) {
$("#"+id).find('#likediv').html(data);
}, "json")
return false;
}
in form:
<form method="post" id="likeForm" onsubmit="return submitform(this.id);">
<input..... />
<input type="submit" value="Submit" />
</form>
in likepost.php add first line:
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != "XMLHttpRequest") {
header("location: " . $_SERVER['HTTP_REFERER']);
exit();
}
you can see more : http://api.jquery.com/serialize/
working for me.