Twitter Bootstrap Question posted in

Show output not in an input-Twitter bootstrap

I created a slider, which fulfills my needs.
But I do not want to show the output value in an input.

Here is my Codepen:
https://codepen.io/anon/pen/MOZGVx?editors=1010

$( document ).ready(function() {
function update() {            
     $optiona = $("#optiona").val();
     $optionb = $("#optionb").val();
     $totalsum = ($optiona * 0.75 * $optionb * 9) - ($optiona * $optionb);
     $("#totalsum").val($totalsum);
}
 
debugger;
 
$("#slider-optiona").slider({
    max:30,
    min:1,
    step:1,
    slide: function(event, ui) {  
    $(this).parent().find("#optiona").val(ui.value);
    $("#optiona").val(ui.value);
                update();
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find("#optiona").val());
    }
});
 
  
$("#slider-optionb").slider({
    max:100,
    min:1,
    step:1,
    slide: function(event, ui) {  
     $(this).parent().find("#optionb").val(ui.value);

     $("#optionb").val(ui.value);
                update();
       
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find("#optionb").val());
    }
});

update();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Option A<div id="slider-optiona"></div>
Choice: <input type="text" id="optiona" value="12" disabled /><br /><br />
 
Option B<div id="slider-optionb"></div>
Choice: <input type="text" id="optionb" value="30" disabled/><br /><br /><br />

Sum
<input id="totalsum" type="text" disabled/><br />

What I want:
I want the output to be not displayed in a input, but in a span or something like this.

I already tried it with 

<span type="text" id="optionb"></span>

But it didn’t worked 🙁

And the further question to the real experts: how can I show the totalsum in a complete currency value, e.g 145.50 instead of 145.5 at the moment.

Thank you so much guys!

Tags:

2

Answers


  1. 0

    When you want write in span you have to use .text() instead of .val()

    Login or Signup to reply.
  2. 0

    As MenuItem42 stated, you just need to use jQuery’s text() function instead of val() when you are working with div, span, etc. Also, do not specify type attribute for span because it does not support it.

    $( document ).ready(function() {
function update() {            
     $optiona = $("#optiona").text();
     $optionb = $("#optionb").text();
     $totalsum = ($optiona * 0.75 * $optionb * 9) - ($optiona * $optionb);
     $("#totalsum").text($totalsum);
}
 
debugger;
 
$("#slider-optiona").slider({
    max:30,
    min:1,
    step:1,
    slide: function(event, ui) {  
    $(this).parent().find("#optiona").text(ui.value);
    $("#optiona").val(ui.value);
                update();
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find("#optiona").text());
    }
});
 
  
$("#slider-optionb").slider({
    max:100,
    min:1,
    step:1,
    slide: function(event, ui) {  
     $(this).parent().find("#optionb").text(ui.value);

     $("#optionb").val(ui.value);
                update();
       
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find("#optionb").text());
    }
});

update();
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Option A<div id="slider-optiona"></div>
Choice: <span id="optiona">12</span><br /><br />
 
Option B<div id="slider-optionb"></div>
Choice: <span id="optionb">30</span><br /><br />

Sum
<span id="totalsum"></span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search