simple ajax form sumbit

Hello Experts,

Simple Ajax form submission.
The form is being submitted to 3rd part URL that collects the data.
The data is being received fine.
The problem: the success function does not seem to execute.

Please help :-) thank you!




$(document).ready(function() {
    
   var form = $('#guideDownload');

   $(form).on("submit", function(evt) {
      
      evt.preventDefault();	   
      submitForm();
      
   });

   function submitForm() {
   
      var formData = $(form).serialize();
      
      var first_name = $("#first_name").val();
      var last_name = $("#last_name").val();
      var email = $("#email").val();
      var mid = 'ls09khl';
      var source = 'guide';  
   
      $.ajax({
         type: "POST",
         url: "https://www.3rdpartwebsite?encoding=UTF-8",
         data: formData,
         success : function() {
           $(form).hide();		
           $( "#msgSubmit" ).html("Thank you for your inquiry");
         }
      });
   }
});

Open in new window

RefaelAsked:
Who is Participating?
 
zephyr_hex (Megan)DeveloperCommented:
I would recommend you debug by adding an error clause.
success : function() {
//..your current code
},
error: function(error) {
    console.log(error); //use F12 console to inspect
}

Open in new window


If that doesn't yield any results, try using a complete clause instead of error:

complete: function(response) {
     console.log(response); //use F12 console to inspect the response
}

Open in new window

0
 
RefaelAuthor Commented:
Hi, I did not look at the console and now I see this message:

XMLHttpRequest cannot load http://www.thesiteireferto.com?encoding=UTF-8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mysite.com' is therefore not allowed access.

(i changed the names of the sites as it is a client website).
0
 
RefaelAuthor Commented:
I just checked the if the form data is sent to the URL and it is sent. The URL i am sending the data to is sent and i see the form variables all fine.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
RefaelAuthor Commented:
I used the complete function instead of success and it is working.
0
 
Julian HansenCommented:
What does this do
 
$.ajax({
         type: "POST",
         url: "https://www.3rdpartwebsite?encoding=UTF-8",
         data: formData
      }).done(function() {
           $(form).hide();		
           $( "#msgSubmit" ).html("Thank you for your inquiry");
         }
      });
   }

Open in new window

Success has been deprecated in future versions of jQuery in favour of the above.
0
 
zephyr_hex (Megan)DeveloperCommented:
According to that error, I'm surprised it's working for you.  That's a Cross Domain block from your browser.  There are quite a few methods for dealing with CORS:  http://techblog.constantcontact.com/software-development/using-cors-for-cross-domain-ajax-requests/
1
 
Julian HansenCommented:
Second zephyr_hex on this one missed the post with the error.

You need to add a header to the server that allows origin to be your domain
For example
Access-Control-Allow-Origin: *

Open in new window

If you don't have access to the server to make this change then you will be unable to make the request. If you do control the server then simply add the above header to your output to allow your AJAX script to call it from a different domain.
0
 
zephyr_hex (Megan)DeveloperCommented:
The OP stated it was a 3rd party server, which I took to mean that it is not under the OP's control.
0
 
RefaelAuthor Commented:
Thank you all for your always great help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.