Get textarea value from selected input by data id, from appended (jquery) elements

devsam247 0
Viewed 37

enter image description here I was able to get the value for Description (textarea) from the first service (selected input) (which is right), for the attribute of data id, but I'm having a problem getting it from appended elements, after using the add more button

What am I missing, please?

Below is my code and I can explain further if need be.

 <div class="service-box">

                          <div class="row">

                            <div class="col-md-12 service-group">
                                  <div class="row">
                                      <div class="form-group mb-3 col-md-6">
                                          <label class="form-label">Service</label>
                                          <div >
                                              <select type="text" class="form-select" placeholder="Services" value="" name="service" id="service">
                                                  <option value="" disabled selected>Select your option</option>
                                                  @foreach ($services as $service)
                                                      <option value="{{$service->service_name}}"  data-id="{{$service->description}}">{{$service->service_name}}</option>
                                                  @endforeach
                                                  
                                                  
                                              </select>
                                              
                                          </div>
                                          </div>
              
                                          <div class="form-group mb-3 col-md-6">
                                          <label class="form-label">Amount</label>
                                          <div >
                                              <input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">
                                        
                                          </div>
                                      </div>
                                      <div class="form-group mb-3 col-md-12">
                                        <label class="form-label">Description</label>
                                        <textarea class="form-control" id="description" name="description" rows="6" placeholder="Content.." readonly></textarea>
                                    </div>
                                  </div>

                            </div>

                            
                          </div>

                      </div>
                      

                      <div class="col-md-12">
                        <button type="button" id="addmore" class="btn btn-default">Add more</button>
                        <button type="button"   id="remove" class="btn btn-default">Remove</button>
                      </div>


$("#addmore").click(function() {

    var serviceGroupHTML = $('.service-group').html();
    $( ".service-box" ).append(serviceGroupHTML);
    
    
});

$("#remove").on("click", function() {  
    $(".service-box").children().last().remove();  
});  


<!-- This is where the problem lies -->
const service = new Array(document.getElementById("service"));
const description = new Array(document.getElementById("description"));

service[0].addEventListener("change", function(){
    description[0].value =  $('#service option:selected').data('id');
            
})


service[1].addEventListener("change", function(){
  description[1].value =  $('#service option:selected').data('id');
            
})
jquery javascript html
1 Answers

As your newly created element are dynamic so you need to bind it with static element. Then, you can get the value of the data-attribute by using $(this).find("option:selected").data("id") and assign this to your textarea of that particular group .

Demo Code :

$("#addmore").click(function() {
  $('.service-group:first').clone().find("input:text,textarea").val("").end()
    .appendTo('.service-box');
});

$("#remove").on("click", function() {
  $(".service-box").children().last().remove();
});


$("body").on("change", "select[name=service]", function() {
  //get description for data-attribute
  var description = $(this).find("option:selected").data("id");
  //assign value
  $(this).closest(".service-group").find("textarea[name=description]").val(description)
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="service-box">

  <div class="row service-group">

    <div class="col-md-12">
      <div class="row">
        <div class="form-group mb-3 col-md-6">
          <label class="form-label">Service</label>
          <div>
            <select type="text" class="form-select" placeholder="Services" value="" name="service">
              <option value="" disabled selected>Select your option</option>
              <option value="1" data-id="This test">XYZ</option>
              <option value="1" data-id="This test22">Z22</option>
              <option value="1" data-id="This test33">YZ33</option>




            </select>

          </div>
        </div>

        <div class="form-group mb-3 col-md-6">
          <label class="form-label">Amount</label>
          <div>
            <input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">

          </div>
        </div>
        <div class="form-group mb-3 col-md-12">
          <label class="form-label">Description</label>
          <textarea class="form-control" name="description" rows="6" placeholder="Content.." readonly></textarea>
        </div>
      </div>

    </div>


  </div>

</div>


<div class="col-md-12">
  <button type="button" id="addmore" class="btn btn-default">Add more</button>
  <button type="button" id="remove" class="btn btn-default">Remove</button>
</div>

userAevI0
Related