CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Oliver Brown
Oliver Brown

Reputation: 31

Struggling to get Bootstrap TouchSpin to work

I'm trying to add a numeric selector to a contact form using the Bootstrap TouchSpin selector. I basically am doing something wrong that I can't see - the +/- buttons do not work...Could someone point in the right direction? Here is the code starting with the container fluid:

<div class="container-fluid">
<div class="row drop">
<div class="container">
<div class="col-md-4">

<label for="demo1">
    Example with postfix (large):
</label>
<div class="input-group bootstrap-touchspin">
<span class="input-group-btn">
<button class="btn btn-default bootstrap-touchspin-down" type="button">
    -
</button>

</span>
<span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>

<input id="demo1" class="form-control" type="text" name="demo1" value="55" style="display: block;"></input>

<span class="input-group-addon bootstrap-touchspin-postfix">
    %
</span>
<span class="input-group-btn">

<button class="btn btn-default bootstrap-touchspin-up" type="button">
    +
</button>
</div>    
</div>
</div>
</div>
</div>
<div class="container-fluid footer">
</div>

<script>
        $("input[name='demo1']").TouchSpin({
            min: 0,
            max: 100,
            step: 0.1,
            decimals: 2,
            boostat: 5,
            maxboostedstep: 10,
            postfix: '%'
        });
    </script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.bootstrap-touchspin.min.js"></script>

Upvotes: 1

Views: 6425

Answers (1)

d-unit
d-unit

Reputation: 200

You will need your include scripts to go above the inline JavaScript code.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.bootstrap-touchspin.min.js"></script>
<script>
    $("input[name='demo1']").TouchSpin({
        min: 0,
        max: 100,
        step: 0.1,
        decimals: 2,
        boostat: 5,
        maxboostedstep: 10,
        postfix: '%'
    });
</script>

Upvotes: 1

Related Questions