Jennifer Spriggs Jennifer Spriggs - 1 year ago 87
HTML Question

Getting value of counter input and populating span with that value

I'm trying to do something I think is relatively simple. I'm trying to get the value of an input counter and display it in a

<span>
.

I'm following code I've done this in other parts of my website, but it's not working for this particular input, and I'm definitely missing something.

My HTML:

<div class="row">
<div class="col-md-8">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-fill btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" id="month-counter" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-fill btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="half-tb-calculator">
<p>.5 TB | $50 x <span class="month-number"></span> month = <span></span></p>
</div>
</div>
</div>


My JQUERY

$('.btn-number').click(function(e){
e.preventDefault();

fieldName = $(this).attr('data-field');
type = $(this).attr('data-type');
var input = $("input[name='"+fieldName+"']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if(type == 'minus') {

if(currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
if(parseInt(input.val()) == input.attr('min')) {
$(this).attr('disabled', true);
}

} else if(type == 'plus') {

if(currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
if(parseInt(input.val()) == input.attr('max')) {
$(this).attr('disabled', true);
}

}
} else {
input.val(0);
}
});
$('.input-number').focusin(function(){
$(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {

minValue = parseInt($(this).attr('min'));
maxValue = parseInt($(this).attr('max'));
valueCurrent = parseInt($(this).val());

name = $(this).attr('name');
if(valueCurrent >= minValue) {
$(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
} else {
alert('Sorry, the minimum value was reached');
$(this).val($(this).data('oldValue'));
}
if(valueCurrent <= maxValue) {
$(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')
} else {
alert('Sorry, the maximum value was reached');
$(this).val($(this).data('oldValue'));
}
});
$(".input-number").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});


My JSFiddle is here.

The output I am looking for is to take the value of the counter input and to populate the span with the placeholder '[number of months] ' with the value of that input.

Answer Source

I have updated you fiddle. Please check below. you can user"fist" for gewtting first span in

and "Last for "last" span in div. you can use eq(0) and eq(1) as well.

$(function() {

function setValues(){
 $('.half-tb-calculator >p > span:first').text($('#month-counter').val())
      $('.half-tb-calculator >p > span:last').text($('#month-counter').val() * 50)
}
setValues();
  $('#month-counter').on('input', function() {
    $('.half-tb-calculator >p > span:first').text(this.value)
    $('.half-tb-calculator >p > span:last').text(this.value * 50)
  });
  $('.btn-number').click(function(e) {
    e.preventDefault();

    fieldName = $(this).attr('data-field');
    type = $(this).attr('data-type');
    var input = $("input[name='" + fieldName + "']");
    var currentVal = parseInt(input.val());
    if (!isNaN(currentVal)) {
      if (type == 'minus') {

        if (currentVal > input.attr('min')) {
          input.val(currentVal - 1).change();
          
        }
        if (parseInt(input.val()) == input.attr('min')) {
          $(this).attr('disabled', true);
        }

      } else if (type == 'plus') {

        if (currentVal < input.attr('max')) {
          input.val(currentVal + 1).change();
        }
        if (parseInt(input.val()) == input.attr('max')) {
          $(this).attr('disabled', true);
        }

      }
    } else {
      input.val(0);
    }
    
    setValues();
  });
  $('.input-number').focusin(function() {
    $(this).data('oldValue', $(this).val());
  });
  $('.input-number').change(function() {

    minValue = parseInt($(this).attr('min'));
    maxValue = parseInt($(this).attr('max'));
    valueCurrent = parseInt($(this).val());

    name = $(this).attr('name');
    if (valueCurrent >= minValue) {
      $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
    } else {
      alert('Sorry, the minimum value was reached');
      $(this).val($(this).data('oldValue'));
     setValues();
    }
    if (valueCurrent <= maxValue) {
      $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
    } else {
      alert('Sorry, the maximum value was reached');
      $(this).val($(this).data('oldValue'));
     setValues();
    }


  });
  $(".input-number").keydown(function(e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
      // Allow: Ctrl+A
      (e.keyCode == 65 && e.ctrlKey === true) ||
      // Allow: home, end, left, right
      (e.keyCode >= 35 && e.keyCode <= 39)) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
      e.preventDefault();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-8">
    <div class="input-group">
      <span class="input-group-btn">
        <button type="button" class="btn btn-danger btn-fill btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
          <span class="glyphicon glyphicon-minus"></span>
      </button>
      </span>
      <input type="text" id="month-counter" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
      <span class="input-group-btn">
        <button type="button" class="btn btn-success btn-fill btn-number" data-type="plus" data-field="quant[1]">
          <span class="glyphicon glyphicon-plus"></span>
      </button>
      </span>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="half-tb-calculator">
        <p>.5 TB | $50 x <span class="month-number">[number of months]</span> month = <span></span></p>
      </div>
    </div>
  </div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download