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

Div based on selection not working, when new selection line was added – Jquery

i want to create form when there will be possibility to add/remove additional selection rows, but all of this new selection should have possibility to show DIV depends on selected option.

Everything is working fine for first row which is loaded with page, DIV is showing input form, normal text or another selection (this one not need to show anything in additional DIV) based what we choosed.
But for added rows nothing happens after selection.

Any idea how to fix it or use another solution?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="width:100%;">
Replace:
        <form>
            <div class="">
                <div class="col-lg-10">
                    <div id="row">
                        <div class="input-group m-3">
                            <select class="custom-select custom-select-sm" name="test" id="type"><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>&nbsp;&nbsp; with &nbsp;&nbsp;
                            <div id="values"></div>
                            <div class="input-group-prepend" style="margin-left: 20px;">
                                 <button class="btn btn-danger" id="DeleteRow" type="button">
                                     <i class="bi bi-trash"></i>
                                     Delete row
                                 </button>
                             </div>
                        </div>
                    </div>

                    <div id="newinput"></div>
                    <br />
                    <button id="rowAdder" type="button" class="btn btn-dark">
                        <span class="bi bi-plus-square-dotted">
                        </span> ADD row
                    </button>
                </div>
            </div>
        </form>
    </div>

 $("#rowAdder").click(function () {
            newRowAdd =
            '<div id="row">' +
            '<div class="input-group m-3">' +
            '<br /><select class="custom-select custom-select-sm" name="test" id="type"><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>' +
            '&nbsp;&nbsp; with &nbsp;&nbsp;' +
            '                <div id="values"></div>' +
            '                <div class="input-group-prepend" style="margin-left: 20px;">' +
            '                     <button class="btn btn-danger"' +
            '                         id="DeleteRow" type="button">' +
            '                         <i class="bi bi-trash"></i>' +
            '                         Delete row'+
            '                     </button> </div>' +
            '</div> </div>';

            $('#newinput').append(newRowAdd);
        });

        $("body").on("click", "#DeleteRow", function () {
            $(this).parents("#row").remove();
        })

Example:
http://jsfiddle.net/3th96bac/

Tags:

2

Answers


  1. 0

    The main problem is that you are having multiple elements with the same Id. Id must be unique.

    Second you’r $(".type").change(function() { will not get triggered by the newly added elements.

    Demo

    $(document).ready(function() {

  $(document).on("change", ".type", function() {
    var val = $(this).val();
    if (val == "id") {
      $(this).next(".values").html("<select><option>First option</option><option>Second Option</option></select>");
    } else if (val == "client") {
      $(this).next(".values").html("<input value='Example input' />");

    } else if (val == "file") {
      $(this).next(".values").html("normal text");
    }
  });
});

$("#rowAdder").click(function() {
  newRowAdd =
    '<div class="row">' +
    '<div class="input-group m-3">' +
    '<br /><select class="custom-select custom-select-sm type" name="test" id=""><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>' +
    '&nbsp;&nbsp; with &nbsp;&nbsp;' +
    '                <div class="values"></div>' +
    '                <div class="input-group-prepend" style="margin-left: 20px;">' +
    '                     <button class="btn btn-danger DeleteRow"' +
    '                         id="" type="button">' +
    '                         <i class="bi bi-trash"></i>' +
    '                         Delete row' +
    '                     </button> </div>' +
    '</div> </div>';

  $('#newinput').append(newRowAdd);
});

$("body").on("click", ".DeleteRow", function() {
  $(this).closest(".row").remove();
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="width:100%;">
  Replace:
  <form>
    <div class="">
      <div class="col-lg-10">
        <div class="row">
          <div class="input-group m-3">
            <select class="custom-select custom-select-sm type" name="test" id="">
              <option>select one</option>
              <option value="id">ID:</option>
              <option value="client">Client:</option>
              <option value="file">File:</option>
            </select>&nbsp;&nbsp; with &nbsp;&nbsp;
            <div class="values"></div>
            <div class="input-group-prepend" style="margin-left: 20px;">
              <button class="btn btn-danger DeleteRow" id="" type="button">
                                     <i class="bi bi-trash"></i>
                                     Delete row
                                 </button>
            </div>
          </div>
        </div>

        <div id="newinput"></div>
        <br />
        <button id="rowAdder" type="button" class="btn btn-dark">
                        <span class="bi bi-plus-square-dotted">
                        </span> ADD row
                    </button>
      </div>
    </div>
  </form>
</div>
    Login or Signup to reply.
  2. 0 
    Please check below working link for your question.

    http://jsfiddle.net/kairavthakar2016/nkrqahpf/11/

    Please modify your HTML and instead of ID please use the class and replace the jQuery with class name in the above mentioned example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search