影响其他表单的复选框答案

【问题标题】：Checkboxes affecting other forms影响其他表单的复选框
【发布时间】：2014-04-15 04:03:32
【问题描述】：

我已经彻底搜索了 google 和 stackoverflow 来寻找这个问题的答案，但我似乎无法自己解决这个问题。

我在网站每个页面的底部都有一个表单，用户可以在其中订阅时事通讯。有多个时事通讯选项，因此表单有一个复选框。在同一页面上，我有一个弹出窗口，它还邀请用户订阅时事通讯。它是连接到同一个邮件列表的相同表单。（参数必须相同才能连接到同一个邮件列表）

复选框在页脚中的表单上效果很好，但是在尝试单击弹出复选框时会出现问题。当我单击弹出复选框时，它会在页脚中选中它的姊妹复选框，但仍处于未选中状态。这可能只是一个视觉问题，但无论哪种方式我都需要修复它。

这是代码：（这是一个 mailchimp 表单）

<div id="mc_embed_signup">
<form action="http://myaction" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="mc-field-group">
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="First Name" required>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME" placeholder="Last Name" required>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address" required>
</div>
<div class="mc-field-group input-group">
<div class="explain"><strong>Send me information about:</strong></div>
<div class="options"><input type="checkbox" value="1" name="group[88888888][1]" id="mce-group[88888888]-88888888-0" class="css-checkbox"><label for="mce-group[88888888]-88888888-0" class="css-label side">Arizona</label>
<input type="checkbox" value="2" name="group[88888888][2]" id="mce-group[88888888]-88888888-1" class="css-checkbox"><label for="mce-group[88888888]-88888888-1" class="css-label side">Nevada</label></div>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
<div id="mce-responses" class="clear">
    <div class="response" id="mce-error-response" style="display:none"></div>
    <div class="response" id="mce-success-response" style="display:none"></div>
</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="216818354ab65ad5465ad554ad585" value=""></div>
</form>
</div>

我尝试重命名 css 类以查看是否可以解决问题，但行为仍然存在。任何想法将不胜感激

【问题讨论】：

你能发布一些代码或jsfiddle吗？
是 - 添加了示例和代码。谢谢！ :)
确保它们具有唯一的名称和 ID
他们能否拥有唯一的名称和 ID，同时仍然提交到 mailchimp 上的相同列表？名称和 ID 由 mailchimp 分配。我认为这可能是问题所在。如果有人有办法解决这个问题，我很乐意尝试。
如果有人有兴趣...在 mailchimp 注册表单的范围内，我可能需要将两个表单之一放在 iframe 中以避免 2 个表单在 1 页上的问题.

标签： html css forms checkbox

【解决方案1】：

事实证明，问题在于我的表单没有唯一的名称和 ID。当然，对于 mailchimp 表单，这是一个问题，因为您无法控制简单 HTML mailchimp 表单的名称和 ID。在正常情况下，如果您使用的是简单的 html mailchimp 表单，则一页上不能有 2 个表单。

但是，如果您将表单放在 iframe 中，则可以解决此问题。您的浏览器将其加载为完全唯一的表单，并且避免了相同的名称/ID 问题。

总结

如果您想在同一页面（甚至在弹出窗口中）使用多个 mailchimp 表单，请将它们包含在 iframe 中以避免出现问题。

【讨论】：