同一页面上的恒定联系两个表格答案

【问题标题】：Constant Contact two forms on the same page同一页面上的恒定联系两个表格
【发布时间】：2017-03-17 01:00:37
【问题描述】：

我正在使用 Constant Contact 在我们的网站上创建一个注册表单。我想让表单显示在页眉和页脚中。

这是我需要在页面中包含的 JavaScript，以便表单能够正常工作https://static.ctctcdn.com/h/contacts-embedded-signup-assets/1.0.2/js/signup-form.js

问题是，如果我提交最上面的表单，那么无论服务器给出什么响应，它都会被两个表单显示。

如果服务器返回错误，javascript 会打印两次错误。

我该如何解决这个问题？

【问题讨论】：

标签： javascript html forms

【解决方案1】：

可以为您的表单实现这一点，为每个表单添加一个唯一的类名（即顶部底部弹出窗口），然后为每个表单调用您的主函数

  main(jQuery,'top');
  main(jQuery,'bottom');
  main(jQuery,'mpopup');

并像这样编辑您的主要功能

function main($, position) {
    .....
    var _form = $('.'+ position +'[data-id="embedded_signup:form"]');
    .....
}

【讨论】：

【解决方案2】：

当表单的服务器端验证完成时，结果将显示在表单上，该表单已在第 24 行分配给 _form 变量 var _form = $('[data-id="embedded_signup:form"]');

我建议单独从 dom 中检索表单并修改 main() 以允许传递应该连接的表单。

function hookForms(){
    var f1 =document.querySelector('#myform1');
    var f2 =document.querySelector('#myform2');
    main(jQuery,f1);
    main(jQuery,f2);
} 
hookForms();

main 中的第一行应该改为

function main($, form) {
   $.support.cors = true;
   if (typeof postURL === 'undefined') {
       postURL = 'https://visitor2.constantcontact.com/api/signup';
   }
   var _form = form;

hookForms 函数将替换第 12 行和第 16 行中显示的对 main 的调用。这尚未经过测试，但是仅提供一个表单元素应该只授予 main 函数和 xhs 回调访问以更改已传递的一种表单（如果您再次使用第二种形式调用 main，则这些形式的交互将被单独处理。）。注意：如果一个表格的回复成功完成，则只有该表格将更改为注册已完成。我不确定这将如何影响重定向。

如果您的意图是仅隐藏验证消息，那么您可以将这两个表单都标识到 main 函数，并在不修改的情况下准确定位它们现在脚本的工作方式，然后通过 onsubmit 属性传递进行 post 调用的元素"this" onsubmit="javascript:sendForm(this)" 并进行一些小的调整以在显示验证消息时引用提交请求的表单。

您可以只使用一个表单，使用 css 弹出窗口和页眉和页脚中的链接来执行此操作，然后您就不必编辑脚本了。

【讨论】：

谢谢！所以我应该制作一份他们的 JS 的本地副本，然后在我的表单中调用那个副本？
是的，还要更改两个表单的 html 中的属性，使它们具有唯一的 id 选择器。让我知道这是否适合您。
jsfiddle.net/tugg56so 是我的本地 js（它的顶部），表单都可以工作，但不是返回内联验证（成功或错误），而是打开一个带有 json 响应的新选项卡
小提琴没有html，只显示了部分脚本。因为这是在加载 cors json，fiddle 可能无法完成任务。你是从小提琴上运行的还是在你自己的服务器上本地运行的？