Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Calcul de cotisation - dev"
Bootstrap 4.1.1 Snippet by
numero67
4.1.1
jQuery
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
229
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="./style.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="calc2.js"></script> <div class="container"> <div class="price-box"> <div class="row"> <div class="col-sm-6"> <form class="form-horizontal form-pricing" role="form"> <div class="tarif-selection"> <h4 class="great">Domicile</h4> <span>Lieu de votre résidence principale</span> <p></p> <div class="btn-group btn-group-justified btn-group-toggle" data-toggle="buttons"> <label class="btn btn-info active"> <input type="radio" name="domicile" value="Brumath" autocomplete="off" checked=""> Brumath </label> <label class="btn btn-info"> <input type="radio" name="domicile" value="Exterieur" autocomplete="off"> Extérieur </label> </div> </div> <div class="tarif-selection"> <h4 class="great">Eveil musical</h4> <span>Pour les enfants scolarisés en GS ou CP</span> <p></p> <div class="btn-group btn-group-justified btn-group-toggle" data-toggle="buttons"> <label class="btn btn-info active"> <input type="radio" name="eveil" value="0" autocomplete="off" checked=""> Aucun élève </label> <label class="btn btn-info"> <input type="radio" name="eveil" value="1" autocomplete="off"> Un élève </label> <label class="btn btn-info"> <input type="radio" name="eveil" value="2" autocomplete="off"> Deux élèves </label> </div> </div> <div class="tarif-selection"> <h4 class="great">Cursus standard</h4> <span>Cours individuel, formation musicale et pratique collective</span> <p></p> <div class="btn-group btn-group-justified btn-group-toggle" data-toggle="buttons"> <label class="btn btn-info active"> <input type="radio" name="cursus" value="0" autocomplete="off" checked=""> Aucun élève </label> <label class="btn btn-info"> <input type="radio" name="cursus" value="1" autocomplete="off"> Un élève </label> <label class="btn btn-info"> <input type="radio" name="cursus" value="2" autocomplete="off"> Deux élèves </label> <label class="btn btn-info"> <input type="radio" name="cursus" value="3" autocomplete="off"> Trois élèves </label> </div> </div> <div class="tarif-selection"> <h4 class="great">Adulte</h4> <span>À partir de 21 ans</span> <p></p> <div class="btn-group btn-group-justified btn-group-toggle" data-toggle="buttons"> <label class="btn btn-info active"> <input type="radio" name="adulte" value="0" autocomplete="off" checked=""> Aucun adulte </label> <label class="btn btn-info"> <input type="radio" name="adulte" value="1" autocomplete="off"> Un adulte </label> <label class="btn btn-info"> <input type="radio" name="adulte" value="2" autocomplete="off"> Deux adultes </label> </div> </div> </form> </div> <div class="col-sm-6"> <div class="tarif-affichage"> <div class="form-group"> <div class="row"> <div class="col-sm-6"> <label for="amount_amirol" class="control-label">Écolage (€): </label> <span class="help-text">D'après votre sélection</span> </div> <div class="col-sm-6"> <input type="hidden" id="amount_amirol" class="form-control"> <input class="price lead" name="totalecolage" type="text" id="ecolage" disabled="disabled" style=""> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6"> <label for="amount_amirol" class="control-label">Cotisation familiale (€): </label> <span class="help-text"></span> </div> <div class="col-sm-6"> <input type="hidden" id="amount_amirol" class="form-control"> <input class="price lead" name="totalcotisation" type="text" id="cotisation" style=""> </div> </div> </div> <hr class="style"> <div class="form-group"> <div class="row"> <div class="col-sm-6"> <label for="amount_amirol" class="control-label">Total annuel (€): </label> <span class="help-text"></span> </div> <div class="col-sm-6"> <input type="hidden" id="amount_amirol" class="form-control"> <input class="price lead" name="totalannuel" type="text" id="total" disabled="disabled" style=""> </div> </div> </div> <hr class="style"> <h4 class="great">Règlement en 3 fois</h4> <span class="help-text"><br/>Ce mode de règlement consiste à nous remettre 4 chèques :<br/>- 1 chèque du montant de la cotisation familiale (20€)<br/>- 3 chèques du montant du tiers indiqué ci-après.</span> <p></p> <div class="form-group"> <div class="row"> <div class="col-sm-6"> <label for="amount_amirol" class="control-label">Par tiers (€): </label> <span class="help-text">4 chèques</span> </div> <div class="col-sm-6"> <input type="hidden" id="amount_amirol" class="form-control"> <input class="price lead" name="totaltrimestre" type="text" id="trimestre" disabled="disabled" style=""> </div> </div> </div> <div style="margin-top:30px"></div> <hr class="style"> <h4 class="great">Règlement unique</h4> <span class="help-text"><br/>Ce mode de règlement consiste à nous remettre 2 chèques : <br/>- 1 chèque du montant de la cotisation familiale (20€)<br/>- 1 chèque du montant indiqué ci-après.</span> <p></p> <div class="form-group"> <div class="row"> <div class="col-sm-6"> <label for="amount_amirol" class="control-label">Total (€): </label> <span class="help-text"></span> </div> <div class="col-sm-6"> <input type="hidden" id="amount_amirol" class="form-control"> <input class="price lead" name="totalecolage" type="text" id="annuel" disabled="disabled" style=""> </div> </div> </div> </div> </div> </div> </div> </div>
body { padding-top: 2px; } .price-box { margin: 0 auto; background: #E9E9E9; border-radius: 0px; padding: 20px 20px; /*width: 500px;*/ } .price, .lead p { font-weight: 600; font-size: 32px; display: inline-block; border:0; width: 245px; } h4.great { background: #00ac98; margin: 0 0 25px -26px; padding: 7px 15px; color: #ffffff; margin-bottom: 4px; margin-right: 10px; font-size: 18px; font-weight: 600; border-radius: 0px; display: inline-block; -moz-box-shadow: 2px 4px 5px 0 #ccc; -webkit-box-shadow: 2px 4px 5px 0 #ccc; box-shadow: 2px 4px 5px 0 #ccc; } .total { border-bottom: 1px solid #7f8c8d; /*display: inline; padding: 10px 5px;*/ position: relative; padding-bottom: 20px; } .total:before { content: ""; display: inline; position: absolute; left: 0; bottom: 5px; width: 100%; height: 3px; background: #7f8c8d; opacity: 0.5; } .tarif-selection { margin-bottom: 70px; } .tarif-selection span { font-weight: 200; display: inline-block; color: #7f8c8d; font-size: 13px; } .form-pricing { background: #ffffff; padding: 20px; border-radius: 6px; } .tarif-affichage { background: #ffffff; margin-bottom: 10px; padding: 20px; border: 1px solid #eeeeee; min-height: 520px; border-radius: 6px; /*-moz-box-shadow: 0 5px 5px 0 #ccc; -webkit-box-shadow: 0 5px 5px 0 #ccc; box-shadow: 0 5px 5px 0 #ccc;*/ } .form-group { margin-bottom: 0; } .form-group span.price { font-weight: 200; display: inline-block; color: #7f8c8d; font-size: 14px; } .help-text { display: block; margin-top: -10px; margin-bottom: 10px; color: #737373; /*position: absolute;*/ /*margin-left: 20px;*/ font-weight: 200; /*text-align: right;*/ /*width: 188px;*/ } .tarif-affichage label { font-weight: 400; font-size: 21px; } img.payment { display: block; margin-left: auto; margin-right: auto } .ui-slider-range-min { background: #2980b9; } .active-month, .active-term { background: #3276b1; } /* HR */ hr.style { margin-top: 0; border: 0; border-bottom: 1px solid #ccc; background: #999; }
var fromBrumath = true; var nbEveil = 0; var nbCursus = 0; var nbAdulte = 0; var cotisation = 20; $(document).ready(function () { $("#ecolage").val("0"); $('input:radio').on('change', function (event) { console.info("name: " + $(this).attr('name')); var name = $(this).attr('name'); switch (name) { case 'domicile': fromBrumath = $(this).val() === 'Brumath'; break; case 'eveil': nbEveil = parseInt($(this).val(), 10); break; case 'cursus': nbCursus = parseInt($(this).val(), 10); break; case 'adulte': nbAdulte = parseInt($(this).val(), 10); break; } calculateEcolage(); }); calculateEcolage(); }); function calculateEcolage(val) { console.info('fromBrumath: ' + fromBrumath); console.info('nbEveil: ' + nbEveil); console.info('nbCursus: ' + nbCursus); console.info('nbAdulte: ' + nbAdulte); console.info('cotisation: ' + cotisation); var totalEcolage = 0; if (fromBrumath) { if (nbCursus > 1) { totalEcolage = (174 * nbEveil) + 498 + (432 * (nbCursus - 1)) + (621 * nbAdulte); } else { totalEcolage = (174 * nbEveil) + (498 * nbCursus) + (621 * nbAdulte); } } else { if (nbCursus > 1) { totalEcolage = (186 * nbEveil) + 522 + (450 * (nbCursus - 1)) + (651 * nbAdulte); } else { totalEcolage = (186 * nbEveil) + (522 * nbCursus) + (651 * nbAdulte); } } $("#ecolage").val(totalEcolage.toFixed(2)); $("#cotisation").val(cotisation.toFixed(2)); $("#total").val((totalEcolage+cotisation).toFixed(2)); $("#trimestre").val(Math.round((totalEcolage) / 3).toFixed(2)); $("#annuel").val(totalEcolage.toFixed(2)); }
Related:
See More
Template
Light Bootstrap Dashboard Pro Angular
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76