1

我的过程：

  1. 首先，我使用 Bootstrap 为我的网站设计了一个注册表单
  2. 然后，我使用 MailChimp 创建了一个注册表单，这样我就可以跟踪和联系我的注册
  3. 然后我生成了嵌入表单 HTML 标记，并将两者结合起来

问题：

破坏表单的部分是 Bootstrap 单选按钮切换使用输入类型 =“按钮”，而我试图将其映射到的 MailChimp 表单使用类型 =“收音机”。

如果我不使用 type="radio"，则提交工作有效，但是当我在 MailChimp 中检查订阅者的信息时，我会丢失表单中该部分的数据。

如果我使用 type="radio"，当用户尝试使用切换按钮时，表单会过早提交，所以基本上表单会在他们完成填写表单的其余部分之前提交。

问题的 JSFiddle 演示在这里：http: //jsfiddle.net/halsey/qwPzy/9/

解决方案？

我知道这样的线程，它说您需要使用 javascript 覆盖此行为，但我找不到如何执行此操作的示例。

我确信这非常容易，但我无法找到资源来帮助我学习如何解决这个问题。提前感谢您提供的任何帮助。

脚注

StackOverflow 阻止我在不嵌入代码的情况下链接到 JSFiddle。我鼓励您使用上面的链接，但我嵌入代码的失败尝试如下。为奇怪的格式道歉，但我无法将代码嵌入到一个块中 - 我是 StackOverflow 初学者。

HTML：

<form action="http://foorder.us6.list-manage1.com/subscribe/post?u=81c3da3b3ebbf564cf50a78ff&amp;id=f16451f556" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

                            <fieldset class="mc-field-group">


                                <div class="form-field input-prepend">

                                        <span class="add-on">http://Foorder.com/</span>

                                        <input class="span3 required" id="prependedInput mce-MMERGE2" type="text" placeholder="YourProfile" value="" name="MMERGE2">

                                 </div><!-- / .formfield .input-prepend -->


                                <div class="form-field">


                                       <input type="email" class="span3 required email" placeholder="Email" value="" name="EMAIL" id="mce-EMAIL">



                                    <input type="text" class="span2 required" placeholder="Zip Code" value="" name="MMERGE8" id="mce-MMERGE8">

                                </div><!-- / .formfield -->

                                <div class="form-field">



                                      I want to&nbsp;&nbsp;
                                        <div class="btn-group" data-toggle="buttons-radio">
                                             <button type="radio" class="btn" value="Buy" name="MMERGE3" id="mce-MMERGE3-0">Buy</button>
                                             <button type="radio" class="btn" value="Sell" name="MMERGE3" id="mce-MMERGE3-1">Sell</button>
                                        </div>
                                      &nbsp;&nbsp;items on Foorder

                                </div><!-- / .formfield -->

                                <div class="form-field">

                                        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#promo-code-toggle">

                                            Have a promo code?

                                         </button>


                                        <div id="promo-code-toggle" class="collapse">

                                                   <input type="text" class="span2" placeholder="Promo Code" value="" name="MMERGE1 promocodeinput" id="mce-MMERGE1 promo-code-input">


                                        </div><!-- / .formfield -->




                                </div><!-- / .formfield -->


                                 <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>  


                                <div class="form-field">


                                    <button type="submit" class="button btn btn-primary" value="Subscribe" name="subscribe" id="mc-embedded-subscribe">Submit</button>

                                </div><!-- / .formfield -->


                            </fieldset>

                       </form>

CSS HEAD 链接：

<link href="http://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link href="http://foorder.com/_Resources/SBX/css/bootstrap.css" rel="stylesheet">
<link href="http://foorder.com/_Resources/SBX/css/bootstrap-responsive.css" rel="stylesheet">

Javascript 正文链接：

<script src="http://foorder.com/_Resources/SBX/js/jquery.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-transition.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-alert.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-modal.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-dropdown.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-scrollspy.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-tab.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-tooltip.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-popover.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-button.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-collapse.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-carousel.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-typeahead.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-affix.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/holder/holder.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/google-code-prettify/prettify.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/application.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/custom.js"></script>
4

2 回答 2

1

您是否尝试过在表单上放置“onsubmit”并通过函数运行以确定测试？

翼

<form action="http://foorder.us6.list-manage1.com/subscribe/post?u=81c3da3b3ebbf564cf50a78ff&amp;
    id=f16451f556" method="post" id="mc-embedded-subscribe-form" 
    name="mc-embedded-subscribe-form" class="validate" target="_blank" 
    onsubmit="return checkValidity(this);">

在你的 js 代码中：

function checkValidity(form){
  if(){
       // return false <-- doesn't submit
      }
  }
于 2013-03-01T05:56:34.600 回答
0

所以我在 Bootstrap Github 上找到的这个 JSFiddle 对我有用：http: //jsfiddle.net/charettes/SauLj/

HTML：

<div class="btn-group">
<input type="radio" name="radios" id="radio_1" />
<label class="btn" for="radio_1">Radio one</label>
<input type="radio" name="radios" id="radio_2" />
<label class="btn" for="radio_2">Radio two</label>
<input type="radio" name="radios" id="radio_3" />
<label class="btn" for="radio_3">Disabled radio three</label>

CSS：

    .btn-group > input {
    display: none;
}

.btn-group input:first-child + .btn {
     /* This is an actual copy/paste of the .btn-group .btn:first-child style */
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    margin-left: 0;
}

input:checked + label.btn {
    /* This is an actual copy/paste of the .btn:active style */
    background-color: #E6E6E6;
    background-image: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.5);
    outline: 0 none;
}

input[disabled] + label.btn {
    /* This is an actual copy/paste of the .btn:disabled style */
    background-color: #E6E6E6;
    background-image: none;
    box-shadow: none;
    cursor: default;
    opacity: 0.65;
}
于 2013-03-02T04:58:19.437 回答