Member Avatar for Babita_1

Hello Everyone,I have used the concept of multiple textboxes having same class fill with the multiple dropdown option selection which also having same class.I have facing problems in it.when i click the first dropdown option then it change the second textbox value.I want that if i click on first dropdown option it changes the values of first textbox not other or if click the second dropdown option it will change the value of second textbox.

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
</head>
<body> 
<form action="" method="post"> 
<select name="drop[]" id="budget" class="drop"> 
<option value="1">option1</option> 
<option value="2">option2</option>
<option value="3">option3</option> 
</select>
<input type="text" name="txt" id="txt" class="txt" value="text1"><br> 
<select name="drop[]" id="budget1" class="drop"> 
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option> 
</select>
<input type="text" name="txt" id="txt1" class="txt" value="text2">
<input type="submit" value="save" name="submit" class="submit"> </form> 
<script>

      $('input[name="txt"]').each(function () { 
     $('.drop').on('change', function(){
    var total = $(this).val();
     $('input[name="txt"]').val($(this).find("option:selected").attr("value")); 

    });
  });
</script> </body> </html>
Edited by Babita_1
  • 2 Contributors
  • 1 Reply
  • 2K Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by hielo
Member Avatar for hielo

From what I see, the input and the corresponding select can be "tied/related" to each other by inspecting their id attributes. By removing the non-numeric portion of the id, whatever is left helps you the determine the id of the corresponding element. Since ids must be unique, the previous method helps you identify the unique corresponding element. Try:

 <script>
  $('input[name="txt"]').each(function () { 
          var id_suffix = this.id.replace(/\D/g,'');
          $('#budget'+id_suffix).on('change', function(){
          var total = $(this).val();
         $('#txt'+id_suffix).val($(this).find("option:selected").attr("value")); 
    });
 });
 </script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.