add CSS class on change event

user_16637572 0
Viewed 475

I Have two Select Box with the same class.I am trying to add a class on the change of select option.

HTML:

<select class="selectProduct" name="product_id[]">
  <option value="T-shirt">T-Shirt</option>
 </select>
<input type="text" name="sku[]" placeholder="Code" id ="sku" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id ="qty" class="qty" />

 <select class="selectProduct" name="product_id[]" style="width:400px;">
  <option value="shirt">Shirt</option>
 </select>
<input type="text" name="sku[]" placeholder="Code" id ="sku" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id ="qty" class="qty" />

jQuery:

$(document).on('change', '.selectProduct', function(e) {
  var idSize = $(this).val();
  $(this).find(".code").addClass(idSize);
});
onchange class css jquery javascript
3 Answers

Your select and input is in same hierarchy so use next to get input and add class .

find search inside the element you give so why your code is fail.

$(document).on('change', '.selectProduct', function(e) {
  var idSize = $(this).val();
  $(this).next(".code").addClass(idSize);
  $(this).next().next(".qty").addClass(idSize);
});
.shirt {
  outline: none !important;
  border: 1px solid red;
}
.T-shirt {
  outline: none !important;
  border: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectProduct" name="product_id[]">
  <option value="T-shirt">T-Shirt</option>
  <option value="shirt">shirt</option>
</select>
<input type="text" name="sku[]" placeholder="Code" id="sku" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id="qty" class="qty" />

<select class="selectProduct" name="product_id[]" style="width:400px;">
  <option value="T-shirt">T-Shirt</option>
  <option value="shirt">Shirt</option>

</select>
<input type="text" name="sku[]" placeholder="Code" id="sku" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id="qty" class="qty" />

user_9651460

The user can only change the value if the select box has more than one option, and it's easier to find the correct .code input to modify if we group the related inputs together.

Here's a revised version of your code that does as you suggest:

const container = document.querySelector('#container-div');
container.addEventListener('change', addValAsClass);

function addValAsClass(event){

  const codeBox = event.target.closest(".input-group").querySelector(".code");
  codeBox.classList.add(event.target.value);
  
  console.log(`classList: ${codeBox.getAttribute('class')}`);
}
div + div { margin-top: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container-div">
  <div class="input-group">
    <select class="selectProduct">
      <option value="opt1">Opt 1</option>
      <option value="opt2">Opt 2</option>
    </select>
    <input placeholder="Code" class="code" />
    <input placeholder="Qty" class="qty" />
  </div>
  <div class="input-group">
    <select class="selectProduct">
      <option value="optA">Opt A</option>
      <option value="optB">Opt B</option>
    </select>
    <input placeholder="Code" class="code" />
    <input placeholder="Qty" class="qty" />
  </div>
</div>

user_82230700

  1. i suggest wrapping the select + input into another div, to make finding easier.

  2. your code might not work, because you have elements with non-unique id (sku and qty).

     <div>   <!-- wrapper start -->
     <select class="selectProduct" name="product_id[]">
     <option value="T-shirt">T-Shirt</option>
     </select>

     <input type="text" name="sku[]" placeholder="Code" id="code" class="code" />
     <input type="text" name="qty[]" placeholder="Qty" id="qty" class="qty" />
 <div>   <!-- wrapper end -->

 <div>   <!-- wrapper start -->
     <select class="selectProduct" name="product_id[]">
     <option value="T-shirt">T-Shirt</option>
     </select>

     <input type="text" name="sku[]" placeholder="Code" id="code" class="code" />
     <input type="text" name="qty[]" placeholder="Qty" id="qty" class="qty" />
 <div>   <!-- wrapper end -->

now you can find the next input by class in its parent container:

$(document).on('change', '.selectProduct', function(e) {
    var idSize = $(this).val();
    $(this).parent().find(".code").addClass(idSize); // <-- parent
})
user_37043840
Related