如何用单按钮通过JavaScript提交表单数据至DocuSign与Zapier

问题分析 #

• DocuSign PowerForm不支持跨域AJAX请求（受CORS策略限制），无法通过$.ajax/$.post直接提交，必须通过表单跳转的方式完成提交
• Zapier的WebHook支持CORS，可以异步提交数据且不会触发页面跳转
• 你之前的代码问题：
  1. 第一段JS中dataString在页面初始化时定义，此时this指向全局对象而非表单，导致序列化数据为空，所以无任何反应
  2. 第二段JS中对DocuSign的AJAX请求被浏览器拦截，因为DocuSign服务器未配置Access-Control-Allow-Origin响应头，违反跨域规则

解决方案 #

核心思路：点击按钮时，先异步提交数据到Zapier，再通过原生表单提交的方式跳转到DocuSign页面（彻底避开CORS问题）。

修改后的HTML代码 #

<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" id="submitBtn">Submit</button>
        </div>
    </div>
</form>

JavaScript代码（基于jQuery） #

$(function() {
    $('#form').on('submit', function(e) {
        // 先阻止表单默认提交行为，优先处理Zapier请求
        e.preventDefault();
        const $form = $(this);
        const formData = $form.serialize();
        const zapierUrl = "https://hooks.zapier.com/hooks/catch/*****/*****/silent/";

        // 异步提交数据到Zapier，无页面跳转
        $.post(zapierUrl, formData)
            .done(function() {
                console.log("Zapier数据提交成功");
            })
            .fail(function() {
                console.error("Zapier数据提交失败");
                // 可根据需求添加失败提示，比如alert('Zapier提交失败，请稍后重试')
            })
            .always(function() {
                // 无论Zapier请求结果如何，都触发表单提交跳转到DocuSign
                // 解除当前submit事件绑定，避免循环拦截
                $form.off('submit').submit();
                // 如果需要在新窗口打开DocuSign，可添加以下代码：
                // $form.attr('target', '_blank').off('submit').submit();
            });
    });
});

关键说明 #

1. Zapier无感知提交：使用Zapier的silent端点提交数据，该端点不会返回跳转页面，实现后台异步提交
2. DocuSign跳转规避CORS：通过原生表单提交跳转，完全绕开跨域限制，和你之前单按钮提交DocuSign的逻辑一致
3. 容错处理：使用always方法确保无论Zapier请求成功或失败，用户都能正常进入DocuSign签名流程，避免业务中断

内容的提问来源于stack exchange，提问作者Galina Tarasyewich