Bootstrap radio buttons - adding variables with jquery -
i built form using bootstrap. user clicks radio button , number displayed @ bottom of 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 use streaming video (eg. youtube or netflix) on 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 use video chat (eg. skype or facetime) on 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 use online gaming on 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 use streaming audio on 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 use internet general use (shopping, banking, e-mail, social media, etc.) on 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 --> i used following code first, works fine, except when bootstrap script included. breaks. understand because of way bootstrap handles form.
$("input[type=radio]").click(function() { var broadbandtotal = 0; $("input[type=radio]:checked").each(function() { broadbandtotal += parsefloat($(this).val()); }); $( "#calculationresult" ).html( "you need @ least " + broadbandtotal ); console.log(broadbandtotal); }); this fine, except want use bootstrap. replaced few things , ended this:
$(".btn").click(function() { var broadbandtotal = 0; $(" .active input:radio").each(function() { broadbandtotal += parsefloat($(this).val()); }); $( "#calculationresult" ).html( "you need @ least " + broadbandtotal ); console.log(broadbandtotal); }); this works, has strange quirk. have click 2 buttons number displayed @ bottom (i.e. click button 1, tells answer "0" - click button 2 , tells answer "1" should clicking first button.)
am missing here? seems should run same first code, has no issues. seems somehow adding variables after rest of code has run, haven't been able figure out. console says same thing. hints needed desperately! thanks...
i made both click events 1 change event:
$("input[type=radio]").on('change',function() { var broadbandtotal = 0; $("input[type=radio]:checked").each(function() { broadbandtotal += parsefloat($(this).val()); }); $( "#calculationresult" ).html( "you need @ least " + broadbandtotal ); console.log(broadbandtotal); $(" .active input:radio").each(function() { broadbandtotal += parsefloat($(this).val()); }); }); 
Comments
Post a Comment