[英]Javascript mouseup event with toggle buttons in bootstrap - the event fires too early
[英]Please help me prevent Bootstrap radio buttons from submitting my form too early (using Javascript?)
我的過程:
問題:
破壞表單的部分是Bootstrap單選按鈕切換開關使用輸入type =“ button”,而我試圖將MailChimp表單映射為使用type =“ radio”。
如果我不使用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&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>
您是否嘗試過在表單上放置“ onsubmit”並通過函數運行以確定測試?
翼
<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"
onsubmit="return checkValidity(this);">
並在您的js代碼中:
function checkValidity(form){
if(){
// return false <-- doesn't submit
}
}
因此,我在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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.