0

This is driving me nuts. This is as simple an example as it can get. All the links are absolute so you should literally be able to copy this into a file called "test.html", load it up, hit submit, and see the word "empty" be changed to the results of http://www.w3schools.com/php/welcome.php.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
    $('#create').submit(function() {
        $.ajax({
            data: $(this).serialize(),
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            success: function(response) {
                $('#created').html(response);
            }
        });
        return false;
    });
});

</script>
</head>
<body>

<form id="create" method="POST" action="http://www.w3schools.com/php/welcome.php">
<input type="submit" value="Submit" />
</form>
<div id="created">empty</div>

</body>
</html>

When I click Submit, nothing happens. What am I doing wrong?

chappy
  • 1,077
  • 1
  • 10
  • 14
  • 4
    possible duplicate of [Cross domain ajax request](http://stackoverflow.com/questions/15477527/cross-domain-ajax-request) – Austin Brunkhorst Aug 15 '14 at 17:27
  • Define "nothing happens". Are there errors? Have you tried adding some `console.log` to see which parts of the code are being hit? Have you tried a debugger? How about inspecting network activity (potentially through Chrome dev tools or Fiddler)? – Ryan Kinal Aug 15 '14 at 17:27
  • Did you read the console log? `XMLHttpRequest cannot load http://www.w3schools.com/php/welcome.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.` – APAD1 Aug 15 '14 at 17:28
  • Or maybe @AustinBrunkhorst is right, and you just can't do that. That's probably the answer. – Ryan Kinal Aug 15 '14 at 17:28
  • Yep, cross-origin. Firebug reports: _Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.w3schools.com/php/welcome.php. This can be fixed by moving the resource to the same domain or enabling CORS._ – Slippery Pete Aug 15 '14 at 17:30
  • 1
    Cross domain requests are by default, a security risk. In order to properly complete the request, the receiving side needs to send a JSONP response, but there are also many other ways to get around this policy. You can find more info [here](http://jquery-howto.blogspot.com/2013/09/jquery-cross-domain-ajax-request.html). – Austin Brunkhorst Aug 15 '14 at 17:31
  • Wow, thank you all, and sorry for the stupid question. (1) I should have seen this immediately in the console. (2) I should have remembered this from the last time when I had this exact same problem. (3) It should have been obvious when NONE of the simple examples online used absolute links to cross-domain pages. – chappy Aug 15 '14 at 17:33

2 Answers2

1

The problem is that you are making a cross-domain ajax call to w3shools and this is a high security risk so the call was blocked and you got this message:

XMLHttpRequest cannot load http://www.w3schools.com/php/welcome.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

You do not have permissions to make ajax calls to that domain. To learn this matter you should create a new page in your computer and make an ajax call to that page.

I hope I have helped you.

Regards.

Daniel Oliveira
  • 1,280
  • 14
  • 36
0

You do not have permissions to make ajax calls to that domain.

Secondly you don't need it when you specify the action attribute to form tag and submit button.You should use any one of the 2 methods.

The difference between the 2 methods is that ajax does not redirect you the new page.

In this case you can simply post the form by submit button 

<form id="create" method="POST" action="http://www.w3schools.com/php/welcome.php">
<input type="submit" value="Submit" />
</form>

see the fiddle

http://jsfiddle.net/ghmoerov/

user3260861
  • 149
  • 6