Changing content of an single input field after cloning form fields

user_15455496 0
Viewed 27

I am having an interface for my admins where they can add fields to a database. If they want to add several fields they can easily add a new line. This is done by cloning via JavaScript. Now there is one dropdown menu and based on the selection from the dropdown I want to write default values to the text-input fields for min[] and max[].

This works fine if I am having just one line. But if I clone it several times and make a selection (e. g. I am selecting the option "relative_number") in just one line (e. g.) the min and max fields are updated in every line. What can I do so that when the drop down is selected in a certain line only the min and max values in the same line are updated?


Here is my code:

<div class="wrapper">
   <div class="entities_wrap">   
      <div class="row">
        <div class="col-md-3">
       <label>Name</label>
           <input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
        </div>
        <div class="col-md-3">
       <label>Field Name</label>
           <input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
        </div>
        <div class="col-md-2">
            <label>Category</label>
            <select id="entity_field_type[]" name="entity_field_type[]" class="form-select">                                                                 <option value=""></option>                                                 <option value="absolute_number">absolute_number</option>                                                            <option value="relative_number">relative_number</option>                                                    <option value="likert_5">likert_5</option>                                                      <option value="likert_7">likert_7</option>                                                              <option value="string">string</option>                                                       </select>
         </div>
         <div class="col-md-1 minValue">
             <label>Min</label>
             <input type="text" class="form-control min" id="min[]" name="min[]" value=""/>
    </div>
    <div class="col-md-1">
        <label>Max</label>
        <input type="text" class="form-control max" id="max[]" name="max[]" value=""/>
    </div>
        <div class="col-md-1" style="vertical-align: middle;">
         <label>&nbsp;</label>
         <div style="margin: 0px 10px;">
             <i class="fas fa-trash remove-item"></i></span>
         </div>
    </div>  
    <div class="col-md-1" style="vertical-align: middle;">
        <label>&nbsp;</label>
        <div style="margin: 0px 10px;">
        <i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
        </div>
    </div>
      </div><br>
    </div>
 </div>
 <script>
$(document).ready(function () {
            
$(".add-plus").click(function(){   
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});

$(".plus").click(function(){   
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});

$(".remove-item").click(function () {           
$(this).closest(".entities_wrap").remove();
});
            
});

$('select[id^="entity_field_type"]').on('change', function()
{
    var sel_cat = this.value;

    if(sel_cat == 'relative_number')
    {
        $('input[id^="min"]').val("0");
        $('input[id^="max"]').val("100");
    }
    if(sel_cat == 'absolute_number')
    {
        $('input[id^="min"]').val("0");
        $('input[id^="max"]').val("infinite");
    }
    // For the other options the code should work alike

 });
</script>

Tried already different ways to solve it via DOM, identifying parent nodes, siblings and so on but I don't get it working.

Thanks a lot in advance for your help!

jquery javascript
1 Answers

While you should definitely look at dynamically modifying the names and id's of your cloned inputs, the issue you are having relates to your selectors for min and max

In the case of your javascript

  $('input[id^="min"]').val("0");
  $('input[id^="max"]').val("100");

You are selecting all min and max on the page. You need to find the related min and max, which means finding the closet .row to the select-box and then finding the child min/max

  var $row = $(this).closest("div.row");
  $row.find('input[id^="min"]').val("0");
  $row.find('input[id^="max"]').val("100");

jQuery closest()

jQuery find()

Here is a functioning snippet example.

$(document).ready(function() {

  $(".add-plus").click(function() {
    $(".entities_wrap:last").clone(true).appendTo(".wrapper");
  });

  $(".plus").click(function() {
    $(".entities_wrap:last").clone(true).appendTo(".wrapper");
  });

  $(".remove-item").click(function() {
    $(this).closest(".entities_wrap").remove();
  });

});

$('select[id^="entity_field_type"]').on('change', function() {
  var sel_cat = this.value;
  var $row = $(this).closest("div.row"); //find the parent row we are in.
  if (sel_cat == 'relative_number') {
    $row.find('input[id^="min"]').val("0"); //use that row to find the related min
    $row.find('input[id^="max"]').val("100"); //use that row to find the related max
  }
  if (sel_cat == 'absolute_number') {
    $row.find('input[id^="min"]').val("0");
    $row.find('input[id^="max"]').val("infinite");
  }
  // For the other options the code should work alike

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="entities_wrap">
    <div class="row">
      <div class="col-md-3">
        <label>Name</label>
        <input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
      </div>
      <div class="col-md-3">
        <label>Field Name</label>
        <input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
      </div>
      <div class="col-md-2">
        <label>Category</label>
        <select id="entity_field_type[]" name="entity_field_type[]" class="form-select">
          <option value=""></option>
          <option value="absolute_number">absolute_number</option>
          <option value="relative_number">relative_number</option>
          <option value="likert_5">likert_5</option>
          <option value="likert_7">likert_7</option>
          <option value="string">string</option>
        </select>
      </div>
      <div class="col-md-1 minValue">
        <label>Min</label>
        <input type="text" class="form-control min" id="min[]" name="min[]" value="" />
      </div>
      <div class="col-md-1">
        <label>Max</label>
        <input type="text" class="form-control max" id="max[]" name="max[]" value="" />
      </div>
      <div class="col-md-1" style="vertical-align: middle;">
        <label>&nbsp;</label>
        <div style="margin: 0px 10px;">
          <i class="fas fa-trash remove-item"></i></span>
        </div>
      </div>
      <div class="col-md-1" style="vertical-align: middle;">
        <label>&nbsp;</label>
        <div style="margin: 0px 10px;">
          <i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
        </div>
      </div>
    </div><br>
  </div>
</div>

user_9030140
Related