复选框影响其他表单

时间:2014-04-15 04:03:32

标签: html css forms checkbox

我已经彻底搜索了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类以查看是否可以解决问题,但行为仍然存在。任何想法将不胜感激

1 个答案:

答案 0 :(得分:0)

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

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

<强>摘要

如果您想在同一页面上使用多个mailchimp表单(即使在弹出窗口中),请将它们包含在iframe中以避免出现问题。