Пожалуйста, помогите мне предотвратить слишком раннюю отправку моей формы радиокнопками Bootstrap (используя Javascript?)

Мой процесс:

  1. Сначала я разработал форму регистрации для своего веб-сайта с помощью Bootstrap.
  2. Затем я создал форму регистрации с помощью MailChimp, чтобы я мог отслеживать свои подписки и связываться с ними.
  3. Затем я сгенерировал HTML-разметку встроенной формы и объединил два

Проблема:

Часть, которая нарушает форму, заключается в том, что переключатель переключателя Bootstrap использует input type = "button", а форма MailChimp, которую я пытаюсь сопоставить, использует type = "radio".

Если я не использую type = "radio", отправка работает, но когда я проверяю информацию о своих подписчиках в MailChimp, мне не хватает данных из этой части формы.

Если я использую type = "radio", форма преждевременно отправляется, когда пользователь пытается использовать переключатель, поэтому в основном форма отправляется до того, как они смогут завершить заполнение остальной части формы.

Демонстрация проблемы JSFiddle находится здесь: http://jsfiddle.net/halsey/qwPzy/9/

Решение?

Мне известны темы вроде this, в которых говорится, что вам нужно переопределить это поведение с помощью 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 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>

javascript forms twitter-bootstrap radio-button mailchimp
person Halsey    schedule 01.03.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы пробовали поместить «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
      }
  }
person james emanon    schedule 01.03.2013
comment
Спасибо за вашу помощь. Я пытался проголосовать, но, похоже, у меня здесь недостаточно репутации :) - person Halsey; 02.03.2013
comment
о, не беспокойтесь. Если вы воспользуетесь этим решением, не бойтесь «принять» ответ. Щелкните изображение проверки. Но не беспокойтесь, рад помочь. - person james emanon; 02.03.2013

arrow_upward
0
arrow_downward

Итак, этот JSFiddle, который я нашел в Bootstrap Github, работал у меня: 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;
}
person Halsey    schedule 02.03.2013