0

I am trying to post data by a form.

I need to submit the form on other website and have to save the data in my database as well. I tried my best but did not find the solution for this.

Here is my form:

<form class="formaction" action="http:www.demo.com" method="post">
   <input type="text" value="1" name="quantity" class="form-style pull-left">
   <input type="hidden" name="stock" value="1100">
   <input type="submit" value="Add" style="display: block;" class="button-style">
</form>

Case I:

In this case form is submitted to www.demo.com , but it causes error at mystagingserver/addtotrolley

Ajax function:

 $('.formaction').submit(function() {
    $.ajax({
        type: 'POST',
        url: 'mystagingserver/addtotrolley',
        data: { 
               quantity: $( "input[name$='quantity']" ).val(), 
               stockcode: $( "input[name$='stockcode']" ).val()
              }
    });
}); 

Case II:

In this case Form is not submitted to www.demo.com but ajax works properly, and it saves my data to database from mystagingserver/addtotrolley

$('.formaction').submit(function() {
    $.ajax({
        type: 'POST',
        url: 'mystagingserver/addtotrolley',
        data: {
               quantity: $( "input[name$='quantity']" ).val(), 
               stockcode: $( "input[name$='stockcode']" ).val()
              }
    });
    return false;
}); 
Kobi K
  • 7,743
  • 6
  • 42
  • 86
Amuk Saxena
  • 1,521
  • 4
  • 18
  • 44

1 Answers1

1

From Case I what I gathered is, when the user clicks Submit, it makes an ajax call. And immediately attempts to submit the form to www.demo.com. Meaning you are moving away from the page and probably losing the connection. What error message are you getting exactly?

The best approach would be to make an AJAX call to your staging server. If it succeeds only then proceed with the regular form submission or make another AJAX post request to the third party domain.

Something like below would be ideal:

$('.formaction').submit(function() {
    $.ajax({
        type: 'POST',
        url: 'mystagingserver/addtotrolley',
        data: {
               quantity: $( "input[name$='quantity']" ).val(), 
               stockcode: $( "input[name$='stockcode']" ).val()
              },
        success: function(resp) {
            $.ajax({
                type: 'POST',
                url: 'http:www.demo.com',
                data: {
                       quantity: $( "input[name$='quantity']" ).val(), 
                       stockcode: $( "input[name$='stockcode']" ).val()
                      },
                success: function(resp) {
                    alert("Successfully submitted to both!");
                }
            });
        }
    });
    return false;
});
roosevelt
  • 1,874
  • 4
  • 20
  • 27
  • How to remove the cross domain error? It will work, but it getting error for browser cross domain. How to resolve it. First ajax is completed successfully, but when it reaches to success function it shows browser cross connection error. This error comes because my staging server has another ip address, and i am posting data to www.demo.com, which has another ip address. – Amuk Saxena Aug 05 '14 at 07:12
  • 1
    I didn't see your comment until now. To enable cross domain POST, you have to enable 'Cross-Origin Resource Sharing' on both servers. It's ugly and tedious. You can use a proxy for such requests... make another request on a PHP file/path on your server and use CURL or something similar to POST data to your other server. Here's an example http://stackoverflow.com/a/2559062/2535984 – roosevelt Mar 16 '16 at 19:27