私のプロセス:
- 最初に、Bootstrap を使用して Web サイトのサインアップ フォームを設計しました
- 次に、MailChimp を使用してサインアップ フォームを作成し、サインアップを追跡して連絡できるようにしました。
- 次に、埋め込みフォームの HTML マークアップを生成し、2 つを組み合わせました。
問題:
フォームを壊している部分は、Bootstrap ラジオ ボタン トグルが input type="button" を使用し、それをマップしようとしている MailChimp フォームが type="radio" を使用することです。
type="radio" を使用しない場合、送信は機能しますが、MailChimp で購読者の情報を確認すると、フォームのその部分のデータが欠落しています。
type="radio" を使用すると、ユーザーがトグル ボタンを使用しようとするとフォームが途中で送信されるため、基本的にフォームは残りのフォームへの入力を完了する前に送信されます。
問題の JSFiddle デモはこちら: http://jsfiddle.net/halsey/qwPzy/9/
ソリューション?
この動作を JavaScript でオーバーライドする必要があると言う、このようなスレッドを認識していますが、これを行う方法の例が見つかりません。
これは恥ずかしいほど簡単だと思いますが、これを修正する方法を学ぶのに役立つリソースを見つけるのに苦労しています. ご協力いただきありがとうございます。
脚注
StackOverflow が原因で、コードを埋め込まずに JSFiddle にリンクできません。上記のリンクを使用することをお勧めしますが、コードを埋め込む私の失敗した試みは以下のとおりです。奇妙なフォーマットで申し訳ありませんが、コードを 1 つのチャンクに埋め込むのに問題があります - 私は StackOverflow の初心者です。
HTML:
<form action="http://foorder.us6.list-manage1.com/subscribe/post?u=81c3da3b3ebbf564cf50a78ff&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
<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>
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 BODY リンク:
<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>