CODEWITHSUNDEEP
javascriptjqueryhtmlinput
Nash
Nash

Reputation: 375

use a dynamic jQuery function for more than one Field and div

I have a jQuery code that gets the value of the text input and add its value to a div class. while following code works fine, i am trying to find out how to make this function work more dynamic for more than one text input and more than one divs, without copying the same script for each input and div again and again.

jQuery(document).ready(function($) {

  function checkForInput(element) {
    var value = $('.my-input-1').val();
    $("#myDiv_1").removeClass().addClass(value);

  }

  $('input.my-input-1').on('change keyup', function() {
    checkForInput(this);
  });

});

jQuery(document).ready(function($) {

  function checkForInput(element) {
    var value = $('.my-input-2').val();
    $("#myDiv_2").removeClass().addClass(value);

  }

  $('input.my-input-2').on('change keyup', function() {
    checkForInput(this);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">

<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>

Upvotes: 0

Views: 47

Answers (2)

Ajay Sharma
Ajay Sharma

Reputation: 176

In case if you don't want to have identical classes for input elements.(As per your code.) Hope it helps.

jQuery(document).ready(function($){

        function checkForInput(elementClass,elementValue) {
          var inputNumber= elementClass.substr(elementClass.length-1);
          
         var divclass='#myDiv_'+inputNumber;
          
        $(divclass).removeClass().addClass(elementValue);
          
        }
      
        $('input.my-input-1').on('change keyup', function() {
          checkForInput($(this).attr('class'),$(this).val());  
         
        });
      $('input.my-input-2').on('change keyup', function() {
          checkForInput($(this).attr('class'),$(this).val());  
          
        });
   
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">

<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>

Upvotes: 0

Ammar
Ammar

Reputation: 818

You can use an attribute for each input that its value represents the id of the div

jQuery(document).ready(function($) {
  $('input.class-input').on('change keyup', function() {
    const $this = $(this);
    const value = $this.val();
    const divId = $this.data('for');
    $(`#${divId}`).removeClass().addClass(value);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="class-input" value="" data-for="myDiv_1">
<input type="text" class="class-input" value="" data-for="myDiv_2">

<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>

Upvotes: 2

Related Questions