将订阅表单合并为1

Question

不是要求客户使用多个表单订阅，而是尝试使用复选框选项将表单连接在一起。

订阅服务的表单具有唯一的Data-ID，否则它们是相同的。

形式1:

<form class="form" id="subForm" action="https://WEBSITE/LINK/HERE" method="post" data-id="987ZXY">
<label>Email </label>
<input autocomplete="Email" aria-label="Email" id="fieldEmail" maxlength="200" name="form" required="" type="email">
<button type="submit">Subscribe</button>
</form>

形式2:

<form class="form" id="subForm" action="https://WEBSITE/LINK/HERE" method="post" data-id="123ABC">
<label>Email </label>
<input autocomplete="Email" aria-label="Email" id="fieldEmail" maxlength="200" name="form" required="" type="email">
<button type="submit">Subscribe</button>
</form>

我试图允许用户选择他们想要订阅的复选框，然后在提交之前包含适当的数据id。但我正在挣扎。表单提交给电子邮件服务提供商，这意味着我无法控制表单提交之外的任何内容。

<form class="form" id="subForm" action="https://WEBSITE/LINK/HERE" method="post">
<label>Email </label>
<input autocomplete="Email" aria-label="Email" id="fieldEmail" maxlength="200" name="form" required="" type="email">
<h3>Subcribe to the following</h3>
<input type="checkbox" id="987ZXY" name="subscription1" value="987ZXY">
<label for="subscription1"> Subscription A</label><br>
<input type="checkbox" id="123ABC" name="subscription2" value="123ABC">
<label for="subscription2"> Subscription B</label><br>
<button type="submit">Subscribe</button>
</form>

提交时，表单不起作用。data-id元素解决方案未更新。

Answer 1

在浏览器表单提交中没有任何东西会接受"data-id"从一个表单，所以一定有其他东西提交。

注意我必须改变标签的for属性

您可以像这样设置表单data-id，但是您只能有一个

window.addEventListener("load", function() {
document.getElementById("subForm").addEventListener("submit", function(e) {
const rad = document.querySelector("[name=subscription]:checked");
if (rad) this.dataset.id = rad.value
else {
alert("please select a subscription")
e.preventDefault()
}
})
})

<form class="form" id="subForm" action="https://WEBSITE/LINK/HERE" method="post">
<label>Email </label>
<input autocomplete="Email" aria-label="Email" id="fieldEmail" maxlength="200" name="form" required="" type="email">
<h3>Subcribe to the following</h3>
<input type="radio" id="subscription1" name="subscription" value="987ZXY">
<label for="subscription1"> Subscription A</label><br>
<input type="radio" id="Subscription2" name="subscription" value="123ABC">
<label for="subscription2"> Subscription B</label><br>
<button type="submit">Subscribe</button>
</form>

如果提交处理程序可以处理dataid中的两个id，则可以使用复选框

window.addEventListener("load", function() {
document.getElementById("subForm").addEventListener("submit", function(e) {
const chk = [...document.querySelectorAll("[name=subscription]:checked")].map(chk => chk.value);
if (chk) this.dataset.id = chk.join(", ")
else {
alert("please select a subscription")
e.preventDefault()
}
})
})

<form class="form" id="subForm" action="https://WEBSITE/LINK/HERE" method="post">
<label>Email </label>
<input autocomplete="Email" aria-label="Email" id="fieldEmail" maxlength="200" name="form" required="" type="email">
<h3>Subcribe to the following</h3>
<input type="checkbox" id="subscription1" name="subscription" value="987ZXY">
<label for="subscription1"> Subscription A</label><br>
<input type="checkbox" id="Subscription2" name="subscription" value="123ABC">
<label for="subscription2"> Subscription B</label><br>
<button type="submit">Subscribe</button>
</form>