jQuery .submit() - Redesigning a website that used frames/sets

Question

I'm redesigning a website that was originally written in the 90's :( and can see it's used frames/framesets.

There are a number of pages that allows users to enter customer, product, order details and all perform a submit action. On this submit, the forms are sent to a 3rd party and an reference code is generated and displayed to the user.

As the site was developed using framesets, that individual frame is sent leaving the header, navigation and footer in place appearing like the generate code (which is created by the third party) appears within the application.

Example of current html:

<form method="post" name="ReqForm" action="https://3rdparty.com/cgi-bin/3rdparty.cfg/php/enduser/custoption.php">

Example of current js:

document.forms[0].submit();

Which submits the above form successfully.

My new html:

<form method="post" id="openAccount" name="ReqForm">

My new JS:

$("#openAccount").attr("action","https://3rdparty.custhelp.com/cgi-bin/3rdparty.cfg/php/enduser/custoption.php");
$("#openAccount").submit();

My new code successfully submits the form and generates the code, but (like a href), the application goes to the 3rd party site and displays the reference number.

How can i capture the detials of the form submission (uniq ref for example), and display within my current page/site?

Should i hide a new form?

Thanks

UPDATE following Kevins comment:

Within my the HTML of my form, i have a button:

<button type="button" class="one-sixth submitForm">Submit Details</button>

Which is linked to an onClick in my JS:

$(".submitForm").click(function () {

....
....
Field validations...
....
....

if (isValid) {
   $("#openAccount").attr("action","https://3rdparty.custhelp.com/cgi-bin/3rdparty.cfg/php/enduser/custoption.php");
   $("#openAccount").submit();
}

});

UPDATE isValid:

if (isValid) {

    alert('1');

    $("#openAccount").submit(function(e){
        e.preventDefault();

        alert('2');

        $.post("https://3rdparty.custhelp.com/cgi-bin/3rdparty.cfg/php/enduser/custoption.php",function(result){
            //result should contain the response from 3rd party
            //execute success actions here
        });


        alert('3');

    });

  }

Answer 1

Use an Ajax request to send a request to the 3rd party site instead of submitting the form. This will allow you to capture the 3rd parties response in a success handler without completely reloading the page.

$("#openAccount").submit(function(e){
    e.preventDefault();
    $.post("https://3rdparty.custhelp.com/cgi-bin/3rdparty.cfg/php/enduser/custoption.php",function(result){
        //result should contain the response from 3rd party
        //execute success actions here
    });

});