Why doesn't this jQuery AJAX work? - php

I don't understand why this form wont send.
The coding is very long and I don't think it would be good idea to post all of it here.
Link to form here
Link to Script here
I just tried loading the PHP file in browser and it wouldn't work. I will save it as a .txt file so you can view it. It will be # ......multiform/post.txt
On top of that, how would I send the entire form instead of stating all the values for the 'data' bit:
$.ajax({
type: 'POST',
url: 'post.php',
data: {subject:options.subject, name:$(this_id_prefix+'#adycustlname').val(), email:$(this_id_prefix+'#email').val(), message:$(this_id_prefix+'#zip').val()},
success: function(data){
Also ignore the success: function(data){ section, this form is going to be put in a slide panel so that is for what the slider should do after. I have a feeling it is wrong, but
the main issue is to get the form to send.
EDIT
$('#submit_seventh').click(function(){
//send information to server
$.ajax({
type: 'POST',
url: 'post.php',
data: $('#bob').serialize(),
success: function(data){
$(this_id_prefix+'#loading').css({display:'none'});
if( data == 'success') {
$(this_id_prefix+'#callback').show().append(options.recievedMsg);
if(options.hideOnSubmit == true) {
//hide the tab after successful submition if requested
$(this_id_prefix+'#contactForm').animate({dummy:1}, 2000).animate({"marginLeft": "-=450px"}, "slow");
$(this_id_prefix+'div#contactable_inner').animate({dummy:1}, 2000).animate({"marginLeft": "-=447px"}, "slow").animate({"marginLeft": "+=5px"}, "fast");
$(this_id_prefix+'#overlay').css({display: 'none'});
}
} else {
$(this_id_prefix+'#callback').show().append(options.notRecievedMsg);
setTimeout(function(){
$(this_id_prefix+'.holder').show();
$(this_id_prefix+'#callback').hide().html('');
},2000);
}
},
error:function(){
$(this_id_prefix+'#loading').css({display:'none'});
$(this_id_prefix+'#callback').show().append(options.notRecievedMsg);
}
});
alert('Data sent');
});
} else return false;
alert('Fail');
});
^^^^^ Why wont the above code work? ^^^^^

At the end of your script you have to replace
$('#submit_fourth').click(function(){
//send information to server
alert('Data sent');
});
with the correct URL to send to.

Related

Returning php variable from jQuery ajax call

Im sure this is a simple solution, however I have had no success in my attempts as my jQuery & ajax is not the greatest. I am making an ajax call to my php script which is doing error checking for a form. If there are errors, I am showing a hidden div and displaying the error messages no problem. However if there are no error messages, I would like an alert to appear. The issue is the alert does not display when there are no errors
Javacript
$.ajax({
url: '../assets/inc/process.php',
type: 'post',
data: formData,
dataType: 'html'
})
.always(function(data){
if (data == 'success'){
alert('it worked!');
}
else{
$('#responsediv').show();
$('#responsediv').html(data);
}
});
});
I have also tried
if (data.success == 'success'){
alert('it worked!');
}
else{
$('#responsediv').show();
$('#responsediv').html(data);
}
PHP
if ($result_new_row){
$success = 'success';
echo $success;
}
I know for sure that the new row is being inserted as I can see it in the database.
Any help is appreciated. Thanks!
Pass the data back from PHP as an array (PS data type should be json)
PHP
if ($result_new_row){
$return['result'] = 'success';
//comment this out when you are positive it's working
echo "hello";
} else {
$return['result'] = 'error';
}
print(json_encode( $return);
jQuery
$.ajax({
url: '../assets/inc/process.php',
type: 'post',
data: formData,
dataType: 'json'
})
.always(function(data){
if (data.result == 'success'){
alert('it worked!');
} else {
$('#responsediv').show();
$('#responsediv').html(data);
}
});
});
If this isn't returning correctly make sure your PHP function is actually working right first.
If you use Chrome you can see your AJAX calls by bringing up the inspector and changing to the network tab, then clicking XHR will show you each AJAX request, what is being sent and the response.

Send ajax request for multiple urls

I want to trigger 2 emails with different templates for different recipients. I tired to add another url next to url:, however it didn't work. Is there a way to add more that one emailer to ajax request? Your advice is much appreciated. Thanks
$.ajax({
type: "POST",
url: "../wp-admin/emailer.php","../wp-admin/emailer2.php" // add more emailers
data: dataString,
success: function(){ return true;}
});
window.location.href = "thank-you";
You can't do that becuase a single AJAX request can only talk to one URL, but you can create multiple AJAX requests for different URLs, and they will do their work simultaneously - you wouldn't need to wait for one to complete before firing off the next one. So in that case you have to take an array where you reserve all the urls.Then you need is $.each and the two parameter form of $.ajax
var urls = ['/url/one','/url/two', ....];
$.each(urls, function(i,u){
$.ajax(u,
{ type: "POST",
data: dataString;
success: function(){
return true;
}
}
);
});
window.location.href = "thank-you";
}
Can use $.when() to fire after multiple requests succeed:
var req1 = $.post("../wp-admin/emailer.php", dataString);
var req2 = $.post("../wp-admin/emailer2.php", dataString);
$.when(req1,req2).then(function(){
// all requests succeeded
window.location.href = "thank-you";
}).fail(function(){
// oops, something went wrong with at least one of the requests
})
If you want to handle the callback for each email and given you will have less than 100 emails, you can use recursion
Eg Show a thank you only when all the emails have been sent successfully
var urls=["url1","url2","url3","url4"];
var done=true;
function sendEmails(){
if(urls.length==0 && done){
alert("All emails sent successfully");
return true;
}else if(urls.length>0 && !done){
alert("There was an error");
return true;
}
else{
var url=urls.pop();
$.ajax({
type: "POST",
url: url,
data: dataString,
success: function(){
sendEmails()
},
error:function(){
done=false;
sendEmails();
}
});
}
}
sendEmails();
Use This Methods to Call Multiple URl withb Data....
It also help for future call or Dynamic call in any where in Your code
function sendMyAjax(URLAdd,dataString){
$.ajax({
type: "POST",
url: URLAdd
data: dataString,
success: function(){ return true;}
});
window.location.href = "thank-you";
}
};
sendMyAjax("../wp-admin/emailer.php","DataString");
sendMyAjax("../wp-admin/emailer.php","DataString");
You Can Use Array for the store URL and Data

Send variable to PHP using AJAX

I've got a variable that I want to send to my PHP code that is on top of the code but I keep getting an error and undefined. dTotaal is the variable name and it contains a number. All this code is in the same page, so i am posting to the same page.
$('#emailVerzenden').click(function() {
$.ajax({
url: "content.php",
type: "post",
data: ({
totaal: dTotaal
}),
success: function(msg) {
alert('Data saved: ' + msg);
},
error: function(error) {
alert("couldnt be sent " + error);
}
});
On top of my page I've got this code. I'm not sure if it's correct, I am new at this.
if(isset($_POST['emailVerzenden']))
{
$totaal = $_POST['totaal'];
var_dump($totaal);
}
What I wanted was to put the value of the totaal data in $totaal but that is not working. The data is not being sent. I keep getting the error alert().
In your PHP code, you are checking the presence of a variable to use another. For me it should be:
if(isset($_POST['totaal']))
{
$totaal= $_POST['totaal'];
var_dump($totaal);
}
You are on right track but seperate PHP codes with jQuery codes then you will have full control of processing data asynchronously.
index.php
$('#emailVerzenden').click(function()
{
$.ajax
({
url: "content.php",
type: "post",
data:{totaal: dTotaal},
success: function(msg)
{
alert('Data saved: ' + msg);
},
error: function(error)
{
alert("couldnt be sent ".error);
}
});
And in your php file first check whether $_POST data is set
content.php
if(isset($_POST))
{
$totaal= $_POST['totaal'];
var_dump($totaal);
}
Mention your data which you wanna send in html & give it an ID.
<div id="total"> HERE COMES THE VARIABLE YOU WISH TO SEND </div>
Then pick up the data in that <div> by its ID document.getElementById('total').value like below:
var total=document.getElementById('total').value;
<script> var total=document.getElementById('total').value;
$.post('content.php',
{'total':total},
function(response){
if(response == 'YES'){}
});
</script>
Hope this will resolve your problem. Good Luck!
Kind of look like i didnt use preventDefault() thats why it wasnt working.
$('#emailVerzenden').click(function(e)
{
cms=$('#sCms').val();
templates= $('#templates').val();
onderdelen = $('input:checkbox:checked').map(function() {
return this.value;
}).get();
email = $('#email').val();
e.preventDefault();
$.ajax
({
type: "POST",
url:"test.php",
data:{postEmail : email,postOnderdelen : onderdelen,postCms : cms,postTotaal : postTotaal, postTemplates : templates},
success: function(rs)
{
alert("Data saved:" + rs);
},
error: function(error)
{
alert("couldnt be sent" + error);
}
});
e.preventDefault();
});

Submit to multiple php scripts

I have a javascript function which I'm using to change the action field of a form and then submit it. Here's the function
function printmulti(){
form=document.forms['form2'];
form.action="http://localhost/output_sample1.php/";
form.target = "_blank"; // Open in a new window
form.submit();
form.action="http://localhost/output_sample2.php/";
form.target = "_blank";
form.submit();
return true; }
But somehow only output_sample2.php is being shown. Why isn't the first part of the code being executed?
you cant submit to multiple forms like that, you need to use something like ajax and make the requests that way. Currently you are starting the submit for the first and then starting the second right after so the second one stops the first one from submitting.
Ajax Tutorial
Use ajax like this:
$.ajax({
type: 'POST',
url: 'http://localhost/output_sample1.php/',
data: 'var1='+var1+'&var2=var2', //your variables sent as post at output_sample1.php
success: function( data ) {
//do success stuff
},
error: function(xhr, status, error) {
alert(status); //if any error
},
dataType: 'text'
});
$.ajax({
type: 'POST',
url: 'http://localhost/output_sample2.php/',
data: 'var1='+var1+'&var2=var2', //your variables sent as post at output_sample2.php
success: function( data ) {
//do success stuff
},
error: function(xhr, status, error) {
alert(status); //if any error
},
dataType: 'text'
});
Hope will give you some idea to start your work. For more info visit this link ajax example

Creating an Authentication Platform, POST between JQuery?

Okay, so this is a proof of concept project that I want to do. I have one page that is checking for the authentication status though some sort of POST response in JQuery. Here's that code:
$('#submit').click(function(){
window.open('http://authorize.openauth.tk/','title', 'width=360, height=240');
return false;
$.ajax({
type: POST,
url: "http://authorize.openauth.tk/",
success: function(data){
if(data == '1'){
$('h1').fadeToggle(function(){
$('#authStat').css('color', 'green').html("Authenticated!");
$('h1').fadeToggle();
});
}
else{
$('h1').fadeToggle(function(){
$('#authStat').css('color', 'red').html("Not authenticated.");
$('h1').fadeToggle();
});
}}
});
});
When I click Login, it opens the login window, and that it. In Firebug, I don't see a POST request to "authorize.openauth.tk". Now, I know that the above code is NOT doing what I described. What code should I use? My main goal: Click a button, open a connection to a page, open that page in a separate window, and then having the page in the window report back to the main page.
Here's the code for "the page in the window":
var referrer = document.referrer;
$('#submit').click(function(){
$.ajax({
type: 'POST',
url: "auth.php",
data: $('form').serialize(),
success: function(data) {
if(data == "0"){
$('h1').html("Wrong Username/Password");
}
else{
$.post(referrer, data);
}
}
});
alert(referrer);
});

Categories