$.post to remote website then submit default action

Question

function post()
{
   var cvs = $('#client-nbr').val();
   var cs = $('#cs').val();
   $.post('http://sitea.com/a.php',{postcvs:cvs,postch1:cs});
   return false;
}

call the function onsubmit :

<form action="http://siteb.com/b.php" method="post" id="formID" onsubmit="post()">
  <input type="text" name="client-nbr" id="client-nbr" /> <br>
  <input type="text" name="cs" id="cs" /> <br>
  <button type="submit" name="submit" id="submit">subscribe</button>
</form>

I want to wait the function post() to finish posting after that submit default action its possible ?

Why don't you just do two $.posts with jQuery instead of one submitting through default action and one with jQuery? Trigger the second post in a .done or .complete function of other post. — tylerism, Apr 20 '16 at 16:20
tylerism i didnt understand what do you mean can you give an example ? — Sharondelmar, Apr 20 '16 at 17:57

score 2 · Answer 1 · answered Apr 20 '16 at 18:05

2

<form action="http://siteb.com/b.php" method="post" id="formID">
    <input type="text" name="client-nbr" id="client-nbr" /> <br>
    <input type="text" name="cs" id="cs" /> <br>
    <!-- http://stackoverflow.com/a/23968244/2240375 -->
    <button type="submit" name="submit_btn" id="submit_btn">subscribe</button>
</form>
<script>
    $("#formID").submit(function (objEvent) {
        // Prevent your form submition
        objEvent.preventDefault();
        $.ajax({
            type: 'POST',
            url: "http://sitea.com/a.php",
            data: {
                postcvs: $('#client-nbr').val(),
                postch1: $('#cs').val()
            },
            success: function (strResponseData) {
                // After successfull ajax request submit the form
                $("#formID")[0].submit();
            }
        });
    })
</script>

answered Apr 20 '16 at 18:05

AsgarAli

2,201
1
20
32

Ali Khanusiya The code work only with site A and after the page freeze cant submit default action to siteb.com/b.php – Sharondelmar Apr 20 '16 at 18:59
@AliKhanusiya , You can't submit the form from within the submit event! At best, the browser will prohibit it, at worst, you'll hit an infinite recursion. Clarification: the submit() you invoke will trigger the submit event again, which will be blocked because of the objEvent.preventDefault() – ChiralMichael Apr 20 '16 at 20:30
@ChiralMichael : I have submitted the form using core JavaScript. So it will not trigger jQuery submit event. Kindly visit **http://stackoverflow.com/a/11558049/2240375** for more details – AsgarAli Apr 21 '16 at 10:38
@Sharondelmar : It happens because your Ajax request to site A does not finish and until your ajax request does not get success, you won't be able to execute code that is inside *success: function (strResponseData)* – AsgarAli Apr 21 '16 at 10:42

score 2 · Answer 2 · answered Apr 20 '16 at 18:12

$.post() returns a promise object. A promise object has various methods to hook into events regarding the completion of a task, like "done". If I strictly needed to wait until after an external ajax call completed before doing my form post I would do the following:

Javascript

$('#my-button').click( function( e) {
    e.preventDefault();
    var cvs = $('#client-nbr').val();
    var cs = $('#cs').val();
    $.post('http://sitea.com/a.php',{postcvs:cvs,postch1:cs}).done( function() {
        $(e.target).closest("form").submit();
    });

    return false;
}

HTML

<form action="http://siteb.com/b.php" method="post" id="formID">
    <input type="text" name="client-nbr" id="client-nbr" /> <br>
    <input type="text" name="cs" id="cs" /> <br>
    <button id="my-button" type="submit" name="submit" id="submit">subscribe</button>
</form>

HOWEVER, it seems unlikely that you actually need to wait for the post results. If there is no timing concern and you do not need to do anything with the post results, I suggest you simple fire and forget.

score 1 · Answer 3 · answered Apr 20 '16 at 18:06

If this js script is hosted at site A you will be able to post there:

                $.ajax({
                    url: 'http://sitea.com/a.php',
                    type: 'post',
                    data: {"postcvs":cvs, "postch1":cs},
                    success: function(data, status) {
                        console.log("success!");
                    }, error: function(xhr, desc, err) {
                        console.log(xhr);
                        console.log("Details: " + desc + "\nError:" + err);
                    }
                }); // end ajax call

However if your script is on site B you will only be able to post to site B. More on the same origin policy here.

fruitoftheloins yes the js script is hosted at site A but i can get data in a.php ! thank for your answer — Sharondelmar, Apr 20 '16 at 18:53

$.post to remote website then submit default action

3 Answers3