Question

我使用Constant Contact在我们的网站上创建注册表单。我希望在页眉和页脚中显示表单。

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

问题在于，如果我提交顶层表单，那么无论服务器给出什么响应，它都会以两种形式显示。

如果服务器返回错误，则javascript会输出错误两次。

我该如何解决这个问题？

Answer 1

当表单的服务器端验证完成时，结果显示在第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，则会单独处理这些表单的相互作用。）。注意：如果成功完成一个表单的响应，则只有该表单将更改为表示注册已完成。我不确定这会如何影响重定向。

如果您的目的是仅隐藏验证消息，那么您可以识别主函数的两个表单，并在不修改的情况下准确定位脚本的工作方式，然后从onsubmit属性传递发出调用的元素。 “this”onsubmit =“javascript：sendForm（this）”并进行一些小的调整，以便在显示验证消息时引用提交请求的表单。

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

Answer 2

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

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

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

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

常量在同一页面上联系两个表单

2 个答案: