Need to create two functions to POST data from my website form

Question

I have a website with HTML form where after pressing "Sumbit" I need that information to be passed to Docusign as well as Zapier. I've done it with having two buttons but trying to figure out a way to do it with one button using JavaScript.

Ideally when Submit button is pressed I need data to be passed to Zapier without opening Zapier success page and just redirect to Docusign page passing there all info from my web form. How can I achieve it with Javascript?

Here is my html code with two buttons:

<form class="item" id="form" action="https://demo.docusign.net/Member/PowerFormSigning.aspx?PowerFormId=*********" method="POST">
    <div class="box">
        <div class="form-group">
            <label>What product are you applying for?</label>
            <input type="text" class="form-control" name="product" value="EFTPOS">
        </div>

        <div class="title-form">
            <h5>Business Details:</h5>
        </div>

        <div class="form-group">
            <label>Merchant Trading Name:</label>
            <input type="text" class="form-control" name="merchantName">
        </div>

        <div class="text-center">
            <button class="btn btn-success btn-lg" type="submit" formaction="https://demo.docusign.net/Member/PowerFormSigning/*******" name="button" onclick="$('form').attr('target', '_blank')">Submit</button>
            <button class="btn btn-success btn-lg" type="submit" formaction="https://hooks.zapier.com/hooks/catch/*****/*****/" onclick="$('form').attr('target', '_blank')">BUTTON 2</button>
        </div>
    </div>
</form>

I've tried suggested code from another post similar to mine but it's not working: When I try this code below it's just not doing anything at all:

$(function () {
    var dataString = $(this).serialize();
    $('#form').on('submit', function () {
        $.ajax({
            type: 'POST',
            url: "https://demo.docusign.net/Member/PowerFormSigning.aspx?PowerFormId=963864ea-9fde-4243-bcd1-380c5747876a&env=demo&acct=38dc928a-8528-4368-ba2b-d9d980c9a213&v=2",
            crossDomain: true,
            data: dataString,
            success: function (responseData, textStatus, jqXHR) {
                var value = responseData.someKey;
            },
            error: function (responseData, textStatus, errorThrown) {
                alert('POST failed.');
            }
        }).then(function () {
            $.ajax({
                type: 'POST',
                url: "https://hooks.zapier.com/hooks/catch/14888944/33njn26/silent/",
                crossDomain: true,
                data: dataString,
                success: function (responseData, textStatus, jqXHR) {
                    var value = responseData.someKey;
                },
                error: function (responseData, textStatus, errorThrown) {
                    alert('POST failed.');
                }
            })
        })

        return false
    })
})

When I try this code below it posts the data to Zapier (first link) but doesn't post it to the Docusign:

$(function () {
    $('form').submit(function () {
        var data = $(this).serialize();
        
        $.post("https://hooks.zapier.com/hooks/catch/14888944/33njn26/silent/", data, function () {});
        $.post("https://demo.docusign.net/Member/PowerFormSigning.aspx?PowerFormId=963864ea-9fde-4243-bcd1-380c5747876a&env=demo&acct=38dc928a-8528-4368-ba2b-d9d980c9a213&v=2", data, function () {});

        return false;
    });
});

and it gives me this error:

"index.html:1 Access to XMLHttpRequest at 'https://demo.docusign.net/Member/PowerFormSigning.aspx?PowerFormId=963864ea-9fde-4243-bcd1-380c5747876a&env=demo&acct=38dc928a-8528-4368-ba2b-d9d980c9a213&v=2' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

jquery.min.js:4
POST https://demo.docusign.net/Member/PowerFormSigning.aspx?PowerFormId=963864ea-9fde-4243-bcd1-380c5747876a&env=demo&acct=38dc928a-8528-4368-ba2b-d9d980c9a213&v=2 net::ERR_FAILED 307 (Temporary Redirect)"

Docusign link was working in a separate html button but not working when doing this code above

Welcome to SO. Did you try searching here on SO? I found quite a few questions asking the same thing, all with apparently working and upvoted answers, did you see/try any of those? Some examples: https://stackoverflow.com/questions/31558977/submit-form-data-to-2-locations, https://stackoverflow.com/questions/15651139/submit-a-form-to-two-servers, https://stackoverflow.com/questions/19083382/using-ajax-to-submit-form-to-two-locations, ... — Don't Panic, Apr 04 '23 at 06:02
Does this answer your question? [Submit form data to 2 locations](https://stackoverflow.com/questions/31558977/submit-form-data-to-2-locations) — Don't Panic, Apr 04 '23 at 06:02
@Don'tPanic Thank you for your links, I've been searching here all day and trying different codes from different posts and it hasn't been working. I've updated my question with different JS codes I've tried. Can you help me please? — Galina Tarasyewich, Apr 04 '23 at 10:54
"*it's just not doing anything at all*" - you are working blind if you're not using [your browser's devtools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools). Open them up and check the console for errors. I expect the first problem it shows will be something about `dataString` - you should generate that variable inside your submit handler, just like you have in the other snippet you've shown, so that it serialises the form. — Don't Panic, Apr 04 '23 at 13:04
As to the CORS error, that's also a common problem and you'll find a lot of questions and answers here about it. In short - Docusign won't let you make a JS request to their domain from a page not on their domain. Searching for "docusign cors" turns up answers which suggest Docusign do not support that, though they are old and may not be still accurate, and I'm not sure if it applies to exactly what you're doing: https://stackoverflow.com/q/25124213/6089612, https://stackoverflow.com/a/61615301/6089612, https://stackoverflow.com/q/47324899/6089612 ... — Don't Panic, Apr 04 '23 at 13:17
@Don'tPanic Thank you about the CORS error response, I'll look into that. — Galina Tarasyewich, Apr 04 '23 at 21:18
@Don'tPanic About "it's just not doing anything at all"..." I am using browser devtool and that's how I saw those CORS errors. In the code I said "it's just not doing anything at all" the console log stayed empty and no data was posted anywhere — Galina Tarasyewich, Apr 04 '23 at 21:19

kolllk · Answer 1 · 2023-04-05T21:19:39.593

DocuSign does not currently support CORS. This has been a longstanding issue but it should soon be resolved.

4/14/23 is the currently scheduled release date for when you should in a developer account see "CORS" under the "Settings" menu. On the CORS page you will be able to turn on CORS. Additionally you'd then see an option on the integration key to add in the origin URL's along with the approved methods (POST, PUT, GET, DELETE, HEAD).

The ETA for "CORS" appearing in production is set for 5/2/23. These dates are subject to change and might be pushed back further. DocuSign doesn't have public documentation on this yet as the feature is not yet released.

EDIT: One addition note is that this change will apply only to the standard E-signature API.

Need to create two functions to POST data from my website form

1 Answers1