1

I have a set of dynamic inputs and want to add css of parent element if a value entered is higher then 0.

$(document).ready(function() {
  $(function() {
    $('.plus').on('click', function() {
      var $qty = $(this).prev('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal)) {
        $qty.val(currentVal + 1);
      }
    });
    $('.minus').on('click', function() {
      var $qty = $(this).next('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal) && currentVal > 0) {
        $qty.val(currentVal - 1);
      }
    });
  });

  $('document').on('change', 'input', function() {
    if ($(this).val() > 0) {
      $(this).closest('.inputBox').css('opacity', '1');
    };
  });

  if ($('input').val() !== 0) {
    $(this).closest('.inputBox').css('opacity', '1');
  };
});
body {
  font-family: 'Montserrat';
  font-size: 100%;
}

.roomWrap {
  display: flex;
  flex-wrap: wrap;
}

.inputBox {
  width: 50%;
  border: 2px solid black;
  max-width: 350px;
  font-size: 1.8vw;
  text-transform: uppercase;
  font-weight: 500;
  margin: 5px;
  box-sizing: border-box;
  padding: 22px 0px 22px 20px;
  opacity: 0.2;
  cursor: pointer !important;
}

.inputBox laber {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}

span.inputInner {
  margin-left: 30px;
  display: inline-block;
  float: right;
  padding-right: 20px;
  /* padding-bottom: 20px; */
  position: relative;
  top: -8px;
  /* height: 100%; */
}

.inputInner a {
  cursor: pointer;
  font-size: 3.8vw;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  top: -4px;
}

input {
  width: 60px;
  border: none;
  text-align: center;
  font-size: 3.8vw;
  outline: none;
  vertical-align: ;
  position: relative;
  top: -5px;
  font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputBox">
  <label for="sofa">
    Sofa
    <span class="inputInner">
      <a class="minus">-</a>
      <input name="sofa" value="0">
      <a class="plus">+</a>
    </span>
  </label>
</div>

<div class="inputBox">
  <label for="table">
    Sofa
    <span class="inputInner">
      <a class="minus">-</a>
      <input name="table" value="0">
      <a class="plus">+</a>
    </span>
  </label>
</div>

<div class="inputBox">
  <label for="piano">
    Sofa
    <span class="inputInner">
      <a class="minus">-</a>
      <input name="piano" value="0">
      <a class="plus">+</a>
    </span>
  </label>
</div>

But I can't make it work. Could you please suggest what's wrong?

Here's the whole code: https://jsfiddle.net/dr7z7tkf/1/

Improve this question

5 Answers 5

Reset to default
2

To achieve what you need you should trigger a change event on the input after updating its value.

You also need to change $('document') to $(document). There's also no need for nested document.ready event handlers, as you can place all logic within a single one.

Finally, you can both DRY up and improve the logic by using a single click handler on the incrementing a elements, like this:

$(function() {
  $('.plus, .minus').on('click', function() {
    var $btn = $(this);
    $btn.siblings('input').val(function(i, v) {
      var newV = (parseInt(v, 10) || 0) + $btn.data('inc');
      return newV >= 0 ? newV : v;
    }).change();
  });

  $(document).on('change', 'input', function() {
    $(this).closest('.inputBox').toggleClass('foo', parseInt(this.value, 10) > 0);
  }).change();
});
body {
  font-family: 'Montserrat';
  font-size: 100%;
}

.roomWrap {
  display: flex;
  flex-wrap: wrap;
}

.inputBox {
  width: 50%;
  border: 2px solid black;
  max-width: 350px;
  font-size: 1.8vw;
  text-transform: uppercase;
  font-weight: 500;
  margin: 5px;
  box-sizing: border-box;
  padding: 22px 0px 22px 20px;
  opacity: 0.2;
  cursor: pointer !important;
}

.inputBox laber {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}

span.inputInner {
  margin-left: 30px;
  display: inline-block;
  float: right;
  padding-right: 20px;
  /* padding-bottom: 20px; */
  position: relative;
  top: -8px;
  /* height: 100%; */
}

.inputInner a {
  cursor: pointer;
  font-size: 3.8vw;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  top: -4px;
  text-decoration: none;
}

input {
  width: 60px;
  border: none;
  text-align: center;
  font-size: 3.8vw;
  outline: none;
  vertical-align: ;
  position: relative;
  top: -5px;
  font-weight: 600;
}

.foo {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputBox">
  <label for="sofa">
    Sofa
    <span class="inputInner">
      <a href="#" data-inc="-1" class="minus">-</a>
      <input name="sofa" value="0">
      <a href="#" data-inc="1" class="plus">+</a>
    </span>
  </label>
</div>

<div class="inputBox">
  <label for="table">
    Table
    <span class="inputInner">
      <a href="#" data-inc="-1" class="minus">-</a>
      <input name="table" value="0">
      <a href="#" data-inc="1" class="plus">+</a>
    </span>
  </label>
</div>

<div class="inputBox">
  <label for="piano">
    Piano
    <span class="inputInner">
      <a href="#" data-inc="-1" class="minus">-</a>
      <input name="piano" value="0">
      <a href="#" data-inc="1" class="plus">+</a>
    </span>
  </label>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You need to trigger the change event while clicking on the + and - .Parse the input value on change event 

$(document).ready(function() {

  $(function() {
    $('.plus').on('click', function() {
      var $qty = $(this).prev('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal)) {
        $qty.val(currentVal + 1);
      }
      $('input').trigger('change')
    });
    $('.minus').on('click', function() {
      var $qty = $(this).next('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal) && currentVal > 0) {
        $qty.val(currentVal - 1);
      }
            $('input').trigger('change')
    });
  });

  $(document).on('change', 'input', function() {
    if (parseInt($(this).val()) > 0) {
      $(this).closest('.inputBox').css('opacity', '1');
    }else{
      $(this).closest('.inputBox').css('opacity', '0.2');
    }
  });
  if ($('input').val() !== 0) {
    $(this).closest('.inputBox').css('opacity', '1');
  };

});
body {
  font-family: 'Montserrat';
  font-size: 100%;
}

.roomWrap {
  display: flex;
  flex-wrap: wrap;
}

.inputBox {
  width: 50%;
  border: 2px solid black;
  max-width: 350px;
  font-size: 1.8vw;
  text-transform: uppercase;
  font-weight: 500;
  margin: 5px;
  box-sizing: border-box;
  padding: 22px 0px 22px 20px;
  opacity: 0.2;
  cursor: pointer !important;
}

.inputBox laber {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}

span.inputInner {
  margin-left: 30px;
  display: inline-block;
  float: right;
  padding-right: 20px;
  /* padding-bottom: 20px; */
  position: relative;
  top: -8px;
  /* height: 100%; */
}

.inputInner a {
  cursor: pointer;
  font-size: 3.8vw;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  top: -4px;
}

input {
  width: 60px;
  border: none;
  text-align: center;
  font-size: 3.8vw;
  outline: none;
  vertical-align: ;
  position: relative;
  top: -5px;
  font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="roomWrap">

  <div class="inputBox">
    <label for="bookshelf">Bookshelf<span class="inputInner"><a class="minus">-</a><input name="bookshelf"  value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="sofa">Sofa<span class="inputInner"><a class="minus">-</a><input name="sofa" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="love seat">Love seat<span class="inputInner"><a class="minus">-</a><input name="love seat" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="lamp">Lamp<span class="inputInner"><a class="minus">-</a><input name="lamp" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="book-box">Book box<span class="inputInner"><a class="minus">-</a><input name="book-box" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="armoir">Armoir<span class="inputInner"><a class="minus">-</a><input name="armoir" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="grand-piano">Grand piano<span class="inputInner"><a class="minus">-</a><input name="grand-piano" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="upright-piano">Upright piano<span class="inputInner"><a class="minus">-</a><input name="upright-piano" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="TV">TV<span class="inputInner"><a class="minus">-</a><input name="TV" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="TV-stand">TV stand<span class="inputInner"><a class="minus">-</a><input name="TV-stand" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="coffee-table">Coffee table<span class="inputInner"><a class="minus">-</a><input name="coffee-table" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="desk">Desk<span class="inputInner"><a class="minus">-</a><input name="desk" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="lamp">Lamp<span class="inputInner"><a class="minus">-</a><input name="lamp" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="plant">Plant<span class="inputInner"><a class="minus">-</a><input name="plant" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="mirror">Mirror<span class="inputInner"><a class="minus">-</a><input name="mirror" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="picture">Picture<span class="inputInner"><a class="minus">-</a><input name="picture" value="0"><a class="plus">+</a></span></label>
  </div>
</div>

Improve this answer

3 Comments

$('input').trigger('change') wont it trigger change to all input in dom tree!!
@ShekharPankaj yes.But for this case inside the change event, he was calling this that means targeted only the nested and closest element, not for all
Thanks, that's perfect.
0

When you change the value programatically, the change event never fires, you have to trigger it manually when you click the buttons, and change the value

$qty.val(currentVal + 1).trigger('change');

FIDDLE

Improve this answer

Comments

0

$qty.trigger('change') and secure the input event $(document).on('input change')

$(document).ready(function() {
  $(function() {
    $('.plus').on('click', function() {
      var $qty = $(this).prev('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal)) {
        $qty.val(currentVal + 1);
        $qty.trigger('change');
      }
    });
    $('.minus').on('click', function() {
      var $qty = $(this).next('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal) && currentVal > 0) {
        $qty.val(currentVal - 1);
        $qty.trigger('change');
      }
    });
  });

  $(document).on('input change', 'input', function() {
    if ($(this).val() > 0) {
      $(this).closest('.inputBox').css('opacity', '1');
    };
  });

  if ($('input').val() !== 0) {
    $(this).closest('.inputBox').css('opacity', '1');
  };
});
body {
  font-family: 'Montserrat';
  font-size: 100%;
}

.roomWrap {
  display: flex;
  flex-wrap: wrap;
}

.inputBox {
  width: 50%;
  border: 2px solid black;
  max-width: 350px;
  font-size: 1.8vw;
  text-transform: uppercase;
  font-weight: 500;
  margin: 5px;
  box-sizing: border-box;
  padding: 22px 0px 22px 20px;
  opacity: 0.2;
  cursor: pointer !important;
}

.inputBox laber {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}

span.inputInner {
  margin-left: 30px;
  display: inline-block;
  float: right;
  padding-right: 20px;
  /* padding-bottom: 20px; */
  position: relative;
  top: -8px;
  /* height: 100%; */
}

.inputInner a {
  cursor: pointer;
  font-size: 3.8vw;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  top: -4px;
}

input {
  width: 60px;
  border: none;
  text-align: center;
  font-size: 3.8vw;
  outline: none;
  vertical-align: ;
  position: relative;
  top: -5px;
  font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputBox">
  <label for="sofa">
    Sofa
    <span class="inputInner">
      <a class="minus">-</a>
      <input name="sofa" value="0">
      <a class="plus">+</a>
    </span>
  </label>
</div>

<div class="inputBox">
  <label for="table">
    Sofa
    <span class="inputInner">
      <a class="minus">-</a>
      <input name="table" value="0">
      <a class="plus">+</a>
    </span>
  </label>
</div>

<div class="inputBox">
  <label for="piano">
    Sofa
    <span class="inputInner">
      <a class="minus">-</a>
      <input name="piano" value="0">
      <a class="plus">+</a>
    </span>
  </label>
</div>

Improve this answer

Comments

0

change the javascript to this and try:

$(document).ready(function() {

  $(function() {
    $('.plus').on('click', function() {
      var $qty = $(this).prev('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal)) {
        $qty.val(currentVal + 1);
        $qty.closest('.inputBox').css('opacity', '1');
      }
    });
    $('.minus').on('click', function() {
      var $qty = $(this).next('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal) && currentVal > 0) {
        $qty.val(currentVal - 1);
      }
    });
  });
});

I don't really know why your code didn't work, because I saw a design problem at first sight. It was this: you made the onclick function, and then an onchange function. But, isn't it true that if you click the + or the - button you're also changing the value? So, I just put the function that changed the opacity ($qty.closest('.inputBox').css('opacity', '1');) inside of the function executed when you click the + button.

Improve this answer

2 Comments

Can you please mention what changes you have made ?
Yes! updating in a minute

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.