动态更改表单操作不适用于 MailChimp

Question

我正在使用复选框动态更改MailChimp表单上的表单操作。加载 DOM 时，表单操作 URL 如下所示：

https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=XYZ

当我提交表单时，XYZ的EBIRD值被推送到MailChimp。现在，当我选中该复选框时，我可以从 DOM 和控制台中看到新的表单操作是这样的：

https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=NEW-VALUE

那么，为什么提交表单仍然推送XYZ而不是NEW-VALUE？我一直与MailChimp技术支持保持联系。他们说，在页面上选择"查看源代码"时，旧值仍然存在。但这不正是因为这就是页面的加载方式吗？

相关网页：

<form action="https://X.us3.list-manage.com/subscribe/post?u=X&amp;id=X&EBIRD=XYZ" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

相关j查询：

var formActionYes = "https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=NEW-VALUE";
var formActionNo = "https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=NEW-VALUE-2";
$('#cu-ebird').change(function() {
if(this.checked) {
$("#mc-embedded-subscribe-form").prop('action',formActionYes);
console.log($("#mc-embedded-subscribe-form").prop('action'));
} else {
$("#mc-embedded-subscribe-form").prop('action',formActionNo);
console.log($("#mc-embedded-subscribe-form").prop('action'));
}               
});

控制台记录我想要的内容。DOM 显示了我想要的东西。MailChimp 接收旧值。

我错过了什么？

Answer 1

不要在 JavaScript 字符串中使用像&这样的 HTML 实体。这仅在HTML代码中处理，而不是在JavaScript中分配属性时处理。

var formActionYes = "https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=NEW-VALUE";
var formActionNo = "https://X.us3.list-manage.com/subscribe/post?u=X&id=X&EBIRD=NEW-VALUE-2";

虽然我不确定为什么这会影响EBIRD参数。它应该导致id参数重命名为amp;id。

您可以尝试的另一件事是使用.attr()而不是.prop().

Answer 2

这可以通过根本不尝试更改表单操作来解决。只需从表单操作中删除合并字段即可。相反，您需要在表单中添加隐藏的输入字段：

<input id="ebird" type="hidden" name="EBIRD" value="">

然后使用脚本更改此值：

$("#ebird").attr('value','NEW-VALUE');

瞧，一切都出现在 MailChimp 中，因为它应该。