Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Change values of input dynamically added on change select option

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.com/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…

Tags:

2

Answers


  1. 0 
    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.com/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.

    Login or Signup to reply.
  2. 0

    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.com/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search