if input stepper value > 0 addClass to parent div else removeClass

Question

I need to add the class (device-added) to the parent dive (device) if the user increases the input value above (0) and remove it if he decided to set the value back to (0) here what I did so far:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h2>Some Text</h2>
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <div class="device workstations">
        <h3>Workstations</h3>
        <div class="sub">
          <input id="workstation" type="text" value="0" min="0" max="1000" class="form-control stepper">
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="device servers">
        <h3>Servers</h3>
        <div class="sub">
          <input id="server" type="text" value="0" min="0" max="1000" class="form-control stepper">
        </div>
      </div>
    </div>
    More cols as above...
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <a href="#" class="make_url">Order URL</a>
    </div>
  </div>
</div>
<script>
  $('.make_url').click(function(e) {
    e.preventDefault();

    var url = "http://www.example.com/cart.php?a=add&pid=" + $("input[name=data-location]:checked").data('id') + "&configoption[569]=" + $('#workstation').val() + "&configoption[570]=" + $('#server').val() + "&configoption[572]=" + $('#mobile').val();
    alert(url);
    //window.location.href = url;
    /*
    window.open(url, '_blank');
    */

  });

  // This is not working as it should
  $('input.stepper').click(function() {
    if ($(this).val() > 0) {
      $(this).parent().parent().parent().addClass('device-added'); // I think it's better to hunt the div.device insted of .parent()
    } else {
      $(this).parent().parent().parent().removeClass('device-added'); // I think it's better to hunt the div.device insted of .parent()
    }
  });
</script>

The above class work only if click on the input but not when using the up/down arrows.

Thanks in advance.

Edit: The jquery.stepper.min.js is used for stepper

The stepper will change the output sub div to

<div class="sub">
    <div class="stepper-wrap" style="margin: 0px 45px 0px 0px;">
        <input id="servers" value="0" min="0" max="1000" class="form-control stepper" style="margin: 0px;" type="text">
        <div class="stepper-btn-wrap">
            <a class="stepper-btn-up">▴</a>
            <a class="stepper-btn-dwn">▾</a>
        </div>
    </div>
</div>

@Mihai using .parents() will addClass to all divs not only the parent.

I can and will use type="number" for now and remove the stepper and use $('input.form-control').click(function() { It will do it as Bendy say, and lose custom look as to attach and do it some other way because input type number is ugly

Thank you all for your help.

using jquery stepper

why use `parent().parent()` when you have `.parents()` ? also you use the `click()` event. So it works only on click. Try using `change()` or `keyup()` or both. Read here - > https://stackoverflow.com/questions/3940258/what-events-does-an-input-type-number-fire-when-its-value-is-changed — Mihai T, Sep 19 '18 at 08:58
`$('input.stepper').click(function () {}` is specifically binding to a click event. ie working as it should — ksav, Sep 19 '18 at 08:58
Because of this is what I found in the online examples, I only know a little about JS, so I am asking here maybe someone can help me. — Faisal, Sep 19 '18 at 09:04
I can recode it without the jquery.stepper.min.js and using input type (number) and make a new question if better. Sorry for the inconvenience. — Faisal, Sep 19 '18 at 09:59
Sorry I couldn't find any CDN for jquery.stepper it only download from github. — Faisal, Sep 19 '18 at 15:31

score 1 · Accepted Answer · answered Sep 19 '18 at 09:00

The solution as below:

<input id="workstation" type="number" value="0" min="0" max="1000" class="form-control stepper" onchange="alert(this.value)">

Change type="text" to type="number"
Use onchange event instead. If jQuery: $('input.stepper').change(function(){ ... })
Should convert value to int using parseInt($(this).val())

if input stepper value > 0 addClass to parent div else removeClass

1 Answers1