not working - insanely simple jquery ajax form submit and put response into div

Question

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?

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
– Ryan Kinal, Commented Aug 15, 2014 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
– APAD1, Commented Aug 15, 2014 at 17:28
Or maybe @AustinBrunkhorst is right, and you just can't do that. That's probably the answer. — Ryan Kinal
– Ryan Kinal, Commented Aug 15, 2014 at 17:28
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. — Austin Brunkhorst
– Austin Brunkhorst, Commented Aug 15, 2014 at 17:31

Daniel Oliveira · Accepted Answer · 2014-08-15 17:34:05Z

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.

user3260861 · Accepted Answer · 2014-08-15 17:59:49Z

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/

Collectives™ on Stack Overflow

not working - insanely simple jquery ajax form submit and put response into div

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related