Geek Answers Handbook

Bootstrap switches - adding variables using jquery

I created a form using Bootstrap. The user presses the radio button, and a number is displayed at the bottom of the page.

   <!-- FOOTER -->
   <div class="container">
   <div class="row">
    <div class="col-lg-offset-3 col-xs-12 col-lg-6">
      <div class="jumbotron">
        <div class="row text-center">
          <div class="text-center col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h2>Broadband Speed Calculator</h2>
          </div>
          <div class="text-center col-lg-12"> 
            <!-- CONTACT FORM https://github.com/jonmbake/bootstrap3-contact-form -->
                <form class="form-horizontal" role="form" method="post" action="" id="broadbandForm">

                    <div class="form-group">
                        <label for="video" class="col-xs-12 control-label text-left">Number of people who use streaming video (eg. Youtube or Netflix) on your network</label>
                        <div class="col-xs-12 btn-group" data-toggle="buttons">
                            <label class="btn btn-primary active"><input class="BroadbandRadioClass" type="radio" name="videoStream" value="0" checked>0</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoStream" value="9">1</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoStream" value="18">2</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoStream" value="27">3</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoStream" value="36">4+</label>
                        </div>
                    </div>                

                    <div class="form-group">
                        <label for="videoChat" class="col-xs-12 control-label text-left">Number of people who use video chat (eg. Skype or Facetime) on your network</label>
                        <div class="col-xs-12 btn-group" data-toggle="buttons">
                            <label class="btn btn-primary active"><input class="BroadbandRadioClass" type="radio" name="videoChat" value="0" checked>0</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoChat" value="9">1</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoChat" value="18">2</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoChat" value="27">3</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoChat" value="36">4+</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="gaming" class="col-xs-12 control-label text-left">Number of people who use online gaming on your network</label>
                        <div class="col-xs-12 btn-group" data-toggle="buttons">
                            <label class="btn btn-primary active"><input class="BroadbandRadioClass" type="radio" name="gaming" value="0" checked>0</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="gaming" value="5">1</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="gaming" value="10">2</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="gaming" value="15">3</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="gaming" value="20">4+</label>
                        </div>
                    </div>                       

                    <div class="form-group">
                        <label for="audioStream" class="col-xs-12 control-label text-left">Number of people who use streaming audio on your network</label>
                        <div class="col-xs-12 btn-group" data-toggle="buttons">
                            <label class="btn btn-primary active"><input class="BroadbandRadioClass" type="radio" name="audioStream" value="0" checked>0</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="audioStream" value=".32">1</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="audioStream" value=".64">2</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="audioStream" value=".96">3</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="audioStream" value="1.28">4+</label>
                        </div>
                    </div>    

                    <div class="form-group">
                        <label for="generalUse" class="col-xs-12 control-label text-left">Number of people who use the Internet for general use (shopping, banking, e-mail, social media, etc.) on your network</label>
                        <div class="col-xs-12 btn-group" data-toggle="buttons">
                            <label class="btn btn-primary active"><input class="BroadbandRadioClass" type="radio" name="generalUse" value="0" checked>0</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="generalUse" value=".5">1</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="generalUse" value="1">2</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="generalUse" value="1.5">3</label>
                            <label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="generalUse" value="2">4+</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <div id="CalculationResult" class="col-sm-8 col-sm-offset-4">
                        </div>
                    </div>
                </form>
            <!-- END CONTACT FORM -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- / FOOTER -->

At first, I used the following code, which works fine, except when the Bootstrap script is included. Then it breaks. I understand that this is due to the way Bootstrap handles the form.

$("input[type=radio]").click(function() {
var Broadbandtotal = 0;
$("input[type=radio]:checked").each(function() {
    Broadbandtotal += parseFloat($(this).val());
});

$( "#CalculationResult" ).html( "You need at least " + Broadbandtotal );
console.log(Broadbandtotal);
});

This is normal, except that I want to use Bootstrap. So I replaced a few things and ended up with this:

$(".btn").click(function() {
var Broadbandtotal = 0;
$(" .active input:radio").each(function() {
    Broadbandtotal += parseFloat($(this).val());
});
$( "#CalculationResult" ).html( "You need at least " + Broadbandtotal ); 
console.log(Broadbandtotal);    
});

, . 2 , (.. 1, , "0" - 2, , "1", , , .)

- ? , , , . , - , , . . ! ...

Fiddle: https://jsfiddle.net/99x50s2s/234/

+4
1

click :

$("input[type=radio]").on('change',function() {
    var Broadbandtotal = 0;
    $("input[type=radio]:checked").each(function() {
        Broadbandtotal += parseFloat($(this).val());
    });

    $( "#CalculationResult" ).html( "You need at least " + Broadbandtotal );
    console.log(Broadbandtotal);

    $(" .active input:radio").each(function() {
        Broadbandtotal += parseFloat($(this).val());
    });

});
+1

More articles:


All Articles