javascript - How to launch bootstrap modal only if one of two options is checked followed by a button submit -
i have standard bootstrap modal http://getbootstrap.com/javascript/
html code :
<!-- button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal"> launch demo modal </button> <!-- modal --> <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mymodallabel">modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">save changes</button> </div> </div> </div> </div> now above modal works, pops once button clicked.
but have 2 radio boxes , want open modal once user checked accept radio option , hits button.
<form> <div class="radio"> <label><input type="radio" name="xx" checked>accept</label> </div> <div class="radio"> <label><input type="radio" name="xx">reject</label> </div> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal"> </form> the problem above code modal popup if user has checked reject choice. don't want happen.
you may want drop procedurally triggering modal add conditions display of modal.
<!-- button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal"> launch demo modal </button> <!-- modal --> <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mymodallabel">modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">save changes</button> </div> </div> </div> </div> <form> <div class="radio"> <label> <input type="radio" name="xx" value=true checked>accept</label> </div> <div class="radio"> <label> <input type="radio" name="xx" value=false>reject</label> </div> <!-- drop attributes trigger modal display --> <button type="button" class="btn btn-primary btn-lg conditional-launch">conditional modal</button> </form> <script> // add in target button , bind click event $(".conditional-launch").click( function(event) { // selected radio button's value var value = $("input[name=xx]:checked").val(); // check value make sure want show modal if (value === 'true') { $("#mymodal").modal('show'); } } ); </script> here jsfiddle check out working: https://jsfiddle.net/z7b5krse/. code here can copy/pasted long have jquery , bootstrap being loaded prior script block.
Comments
Post a Comment