Okay I'm in way over my head as AJAX is definitely a weak area. I've got a page that needs to send a signup form via ajax to another domain to get processed and then return with a success / failure message.
When using the following code, the page just gets refreshed and nothing is sent?
Form Code:
<form method="post" onSubmit="return submitGetApp();" class="kinkast_signup">
<input id="login_email" type="text" name="to" />
<input id="signInButtonSubmit" type="submit" name="action" value="Send" />
</form>
jQuery Code: $('#signInButtonSubmit').click(function (e) {
//Get the data from all the fields
var number = $('input[name=to]');
//Simple validation to make sure user entered something
//If error found, add hightlight class to the text field
if (number.val()=='') {
name.addClass('hightlight');
return false;
} else name.removeClass('hightlight');
//organize the data properly
var data = 'number=' + number.val();
//show the loading sign
$('p.ajax_message').hide();
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "http://video.kinkast.com/getapp",
//GET method is used
type: "POST",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function () {
$('p.ajax_message').html('Success!');
alert('Worked!');
},
//Failure
error: function(xhr, status, e) {
alert(status, e);
}
});
//cancel the submit button default behaviours
return false;
});
Can someone check out the code and see what I'm missing? Also, to see it live, visit this link
You cannot do ajax posts to another domain.
This is to help prevent such things as Cross-Site Scripting attacks (XSS attack).
There are frameworks available that allow you to do such things like ACD however in most cases I wouldn't reccomend this practice.
UPDATE
Here's a working version of your code: http://jsfiddle.net/4tMN3/
You'll notice a couple of new things.
Firstly I'm attaching the event using the propper jQuery event mechanism.
$('#mySubmitForm').submit(function(event){})
This is much more prefered than hardcoding the event in the actual form.
Secondly you'll notice the use of:
event.preventDefault();
This is the propper jQuery way to prevent the default behaviour of the form (i.e. submitting) rather than returning false.
There are ways to make cross domain json requests via jquery using a plugin. It uses YQL to return a page dump as a json request. Its not really recomended but if you really need to you can. Here is a link to it, there is a link on here to his github for the most recent version. I have used it recently for some testing and it all worked very well, Ill get a JSFiddle up in a moment.
http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
There is also a page covering posting via YQL: http://www.wait-till-i.com/2009/11/16/using-yql-to-read-html-from-a-document-that-requires-post-data/
Example JSFiddle: http://jsfiddle.net/M6X6n/1/