I am using add remove input fields set via jquery.

I want to set input value of input depend on select option selected in that field set.

How to achieve this ?

Code:

var html_row = '<tr><td class="firstcell"></td><td><select name="is_member[]" ><option value="">Select</option><option value="Yes">Yes</option><option value="No">No</option></select></td><td><input name="membership_number[]" value=""></td><td><input type="button" name="remove" id="remove_row" class="btn btn-info"  value="Remove This Section" tabindex="-1"></td></tr>';

var max = 50;
var x = 1;

$('#add_row').click(function() {
  if (x <= max) {
    $('#table_fields').append(html_row);
    var els = $(".firstcell");
    for (var i = 1; i < els.length; i++) {
      els[i].innerHTML = i + 1;
      $("select[name='is_member[]']").on('change', function() {

        var member_status = $(this).val();
        if (member_status == "No") {
          $("input[name='membership_number[]']").val("Not Member");
        } else {
          $("input[name='membership_number[]']").val("");
        }
      });
    }
  }
});


$('#table_fields').on('click', '#remove_row', function() {
  $(this).closest('tr').remove();
  x--;
});

<script src=".7.1/jquery.min.js"></script>

<table id="table_fields">
  <tr>
    <td></td>
    <td>Is Member</td>
    <td>Membership Number</td>
  </tr>

  <tr>
    <td class="firstcell">1</td>
    <td>
      <select name="is_member[]">
        <option value="">Select</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
    </td>
    <td><input name="membership_number[]" value=""></td>
    <td></td>
  </tr>
</table>
<br><br>
<div class="text-center"><input type="button" name="add" id="add_row" class="btn btn-primary" value="Add Input Row" tabindex="-2"> </div>

I am using add remove input fields set via jquery.

I want to set input value of input depend on select option selected in that field set.

How to achieve this ?

Code:

var html_row = '<tr><td class="firstcell"></td><td><select name="is_member[]" ><option value="">Select</option><option value="Yes">Yes</option><option value="No">No</option></select></td><td><input name="membership_number[]" value=""></td><td><input type="button" name="remove" id="remove_row" class="btn btn-info"  value="Remove This Section" tabindex="-1"></td></tr>';

var max = 50;
var x = 1;

$('#add_row').click(function() {
  if (x <= max) {
    $('#table_fields').append(html_row);
    var els = $(".firstcell");
    for (var i = 1; i < els.length; i++) {
      els[i].innerHTML = i + 1;
      $("select[name='is_member[]']").on('change', function() {

        var member_status = $(this).val();
        if (member_status == "No") {
          $("input[name='membership_number[]']").val("Not Member");
        } else {
          $("input[name='membership_number[]']").val("");
        }
      });
    }
  }
});


$('#table_fields').on('click', '#remove_row', function() {
  $(this).closest('tr').remove();
  x--;
});

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<table id="table_fields">
  <tr>
    <td></td>
    <td>Is Member</td>
    <td>Membership Number</td>
  </tr>

  <tr>
    <td class="firstcell">1</td>
    <td>
      <select name="is_member[]">
        <option value="">Select</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
    </td>
    <td><input name="membership_number[]" value=""></td>
    <td></td>
  </tr>
</table>
<br><br>
<div class="text-center"><input type="button" name="add" id="add_row" class="btn btn-primary" value="Add Input Row" tabindex="-2"> </div>

With this code, value of membership_number field get changed but it is getting changed for all added rows of field set's input fields.

I want to change it only for select option of that specific field set in a added row.

JSFIDDLE

In jsfiddle, you can check by adding rows and changing is member option to No... all input fields values in membership number gets changed...

• javascript
• jquery
• dynamically-generated

• 1 Please include a minimal reproducible example. – 0stone0 Commented Nov 20, 2024 at 16:17
• 1 I believe $("input[name='membership_number[]']") pulls all elements matching the selector and performs the method on each. You are not indicating which specific element to update. – mykaf Commented Nov 20, 2024 at 16:25
• 1 I've converted your code to a stack snippet. Please add the relevant HTML. – Barmar Commented Nov 20, 2024 at 16:31
• Is var html supposed to be var html_row? – Barmar Commented Nov 20, 2024 at 16:31
• 1 Array indexes start at 0. The loop for (var i = 1; ...) skips the first element. You could also use els.each(function ...) to iterate over all the selected elements. – Barmar Commented Nov 20, 2024 at 16:33

2 Answers 2

The main issue in your code is that you're selecting all the input[name='membership_number[] elements, then updating the value in the first one only. To fix this you should use DOM traversal to find only the input related to the select that triggered the change event.

Also note that there's several other things you can do to improve your logic:

• Use delegated event handlers to simplify the logic, and avoid the need to dynamically assign handlers at runtime,.
• Use the DOM to count elements rather than using global variables
• Use guard clauses to return early in your logic, rather than nesting big blocks of code.
• Use the template HTML element instead of storing HTML within your JS code.

Here's a working example with the above changed made:

const rowTemplateContent = $('#row-template');
const maxRows = 50;
const $table = $('#table_fields tbody');

const updateRowNumbers = () => {
  $table.find('tr td:first-child').text(i => i + 1);
}

$('#add_row').click(function() {
  if ($table.find('tr').length > maxRows)
    return;

  $table.append(rowTemplateContent.clone().prop('content'));
  updateRowNumbers();
});

$table.on('change', 'select[name="is_member[]"]', e => {
  const $select = $(e.target);
  const member_status = $select.val().trim();
  $select.closest('tr').find("input[name='membership_number[]']").val(member_status == "No" ? "Not Member" : '');
});

$table.on('click', '.remove-row', e => {
  $(e.target).closest('tr').remove();
  updateRowNumbers();
});

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<table id="table_fields">
  <thead>
    <tr>
      <td></td>
      <td>Is Member</td>
      <td>Membership Number</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="firstcell">1</td>
      <td>
        <select name="is_member[]">
          <option value="">Select</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
      </td>
      <td><input name="membership_number[]" value=""></td>
      <td></td>
    </tr>
  </tbody>
</table>
<br><br>
<div class="text-center">
  <input type="button" name="add" id="add_row" class="btn btn-primary" value="Add Input Row" tabindex="-2">
</div>

<template id="row-template">
  <tr>
    <td class="firstcell"></td>
    <td>
      <select name="is_member[]">
        <option value="">Select</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
    </td>
    <td>
      <input name="membership_number[]" value="" />
    </td>
    <td>
      <input type="button" name="remove" class="btn btn-info remove-row" value="Remove This Section" tabindex="-1" />
    </td>
  </tr>
</template>

var html_row = '<tr><td class="firstcell"></td><td><select name="is_member[]" ><option value="">Select</option><option value="Yes">Yes</option><option value="No">No</option></select></td><td><input name="membership_number[]" value=""></td><td><input type="button" name="remove" id="remove_row" class="btn btn-info"  value="Remove This Section" tabindex="-1"></td></tr>';

var max = 50;
var x = 1;

$('#add_row').click(function() {
  if (x <= max) {
    $('#table_fields').append(html_row);
    var els = $(".firstcell");
    for (var i = 1; i < els.length; i++) {
      els[i].innerHTML = i + 1;
    }
  }
});

$('#table_fields').on('change', "select[name='is_member[]']", function() {
  var member_status = $(this).val();
  var current_row = $(this).closest('tr');
  if (member_status == "No") {
    current_row.find("input[name='membership_number[]']").val("Not Member");
  } else {
    current_row.find("input[name='membership_number[]']").val("");
  }
});

$('#table_fields').on('click', '#remove_row', function() {
  $(this).closest('tr').remove();
  x--;
});

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<table id="table_fields">
  <tr>
    <td></td>
    <td>Is Member</td>
    <td>Membership Number</td>
  </tr>

  <tr>
    <td class="firstcell">1</td>
    <td>
      <select name="is_member[]">
        <option value="">Select</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
    </td>
    <td><input name="membership_number[]" value=""></td>
    <td></td>
  </tr>
</table>
<br><br>
<div class="text-center"><input type="button" name="add" id="add_row" class="btn btn-primary" value="Add Input Row" tabindex="-2"> </div>

the issue is that you are selecting all elements with the name membership_number[] and changing their value collectively instead you should limit the change to the specific row where the select option was changed.