CODEWITHSUNDEEP
javascriptjqueryhtmllaravel
Denzell
Denzell

Reputation: 309

JQuery/Javascript - How to change <label> based on its corresponding <select>

I want to change a label if its corresponding dropdown has changed value (In the same row). this is the html page.

enter image description here

Each dropdown and label has different ids. For example if there is 4 dropdowns then their ids will be dropdown1, dropdown2, dropdown 3, dropdown 4. same with label. But my problem is I don't know how to correspond or chain the two elements together, for example: dropdown 1 should be connected to label 1, meaning whenever the select1 dropdown has changed the label1 will change (by displaying the dropdown1's current selected option).

Here's my snippet source code for HTML: 

<td> 
    <select class="form-control" id = "bookingTypeDropDown{{$counter1}}"> <!-- Assigning of unique ids based on iteration number -->
           @foreach($booking_types as $booking_type)
                <option value = "{{$booking_type->book_type_price}}">
                     {{$booking_type->book_type_name}}
                </option>
           @endforeach
    </select>
</td>
@foreach($depart_destination_country as $destination)
    <td>
        <input type="radio" 
               name="departure_flight_id" 
               value="{{$flight->flight_id}}" required>
         <label id = "calculatedFare{{$counter1}}">price here</label> <!-- Assigning of unique ids based on iteration number -->

         <input type="hidden" name="total_departure_fare" value="#" required>   
    </td>
@endforeach

This picture below is the html for the snippet source code provided above:

enter image description here

Source code (Responsible for the changing of label when select was changed):

<script type = "application/javascript">

window.onload = function() {

    var numItems = $('.form-control').length; //Counts the number of <select> by class
    var dropdowns =[];
    var labels = [];

    for(var i=0; i<numItems; i++) //Iteration for getting all <select> and <labels> and storing them in their respective arrays
    {
        dropdowns[i] = document.getElementById("bookingTypeDropDown" + i);
        labels[i] = document.getElementById("calculatedFare" + i);
    }

    var currentElement; 

    for(var d=0; d<dropdowns.length; d++)
    {
        var price;

        $(dropdowns[d]).change(function (){ //if dropdown object changed option
            var price = $(this).val(); //getting of option's value
            currentElement = d; //getting of array index where change was detected
            console.log(price);             //printing only
            console.log(currentElement);    //printing of what index does the changed occured
        });

        $(labels[currentElement]).text("PHP " + price); //
    }

}

The problem in my javascript code is that it always print the last index or iteration number (which is 4 in this scenario) but the values being printed are right. for example if I clicked the first dropdown it prints the right value but not the right index (prints index 4 instead of index 1). No problem on value.

What I want is the right detection of element that has been changed option and once it has been detected it should change its corresponding label.

Scenario example:

Select1 = Label1
Select2 = Label2
Select3 = Label3
....

How do i coordiante a select to a label?

Upvotes: 0

Views: 643

Answers (1)

Zekros Admines
Zekros Admines

Reputation: 302

You can simply do it by using selectors and classes, you don't have to setup and enumerate through nested IDs.

Please run the below code snippet.

$(() => {

  $('.select-price').on('change', function() {
    onChange(this);
  });
  
  function onChange(selectEl) {
    const $row = $(selectEl).parents('tr');
    const $label = $('td:eq(1) label', $row);
    const $departure_flight_input = $('td:eq(1) input[name="departure_flight_id"]', $row);
    
    $label.text($(selectEl).val());
    $departure_flight_input.val($(selectEl).val());
  }
  
  function getInitialPrice() {
    $('.select-price').each((index, el) => onChange(el));
  }
  
  getInitialPrice();

});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<table>
  <tr>
    <td>
      <select class="form-control select-price">
        <option value="1.00">1.00</option>
        <option value="2.00">2.00</option>
        <option value="3.00">3.00</option>
      </select>
    </td>
    <td>
      <input type="radio" name="departure_flight_id" value="" required>
      <label>price here</label> 
    </td>
  <tr>
  <tr>
    <td>
      <select class="form-control select-price">
        <option value="1.10">1.10</option>
        <option value="2.20">2.20</option>
        <option value="3.30">3.30</option>
      </select>
    </td>
    <td>
      <input type="radio" name="departure_flight_id" value="" required>
      <label>price here</label> 
    </td>
  <tr>
</table>

Upvotes: 1

Related Questions