Append with focus textbox and delete dynamic

JavaScript
1

I am trying to create the append and delete input in jquery, my code is working perfectly but as I delete any input and try to again append the box it not working properly, and also autofocus in appended input not working.

I want to create as change the input value it will auto jump to the next box.
My code working fine but as I delete any row from that time it not working properly.

Please help How me achieve the goal and fix this issue permanently.

JSFiddle

let input_inx = 0;

function init_input_focus() {
  $("div#input_body input").change(function() {
    if ($(this).attr("name") == "col1[]") {
      $("b#total_row").text($("div#input_body").children().length + 1)
      $("div#input_body").append(`
      <div class="row mt-1" id="1">
          <div class="col-md-2">
              <input type="text" name="col0[]" onfocus="select();" />
          </div>
          <div class="col-md-3">
              <input type="text" name="col1[]" onfocus="select();" />
          </div>
          <div class="col-md-1">
              <button id="submit" onclick="removeRow(this ,event)" >Remove</button>
          </div>
      </div>
    `);
      init_input_focus()
    }
    input_inx++;
    $("div#input_body input").eq(input_inx).focus();
  })
}

function removeRow(ele, event) {
  $(ele).parent().parent().remove();
  input_inx--;
}
init_input_focus()
2

I don’t do jQuery but it seems to me that you could be removing the wrong element.
Find out what “this” is referencing when you invoke the remove function, it could be something different to what it is referencing in the if condition.
Use the developer tools to inspect the element.

3

There’s several problems with the code… (Reusing ID’s, primarily…)
Not sure why we’re using inline onclick instead of a delegated event…
Why are you calling init_input_focus inside a bound event created by init_input_focus? You’re going to bind the event multiple times that way.

4

I am focusing because I want input to focus automatically on appended input.

5

So lets… organize the code some…

let input_inx = 0;

$("div#input_body input").change(function() {
		input_inx++; //There are problems with this idea.
    if ($(this).attr("name") == "col1[]") {
      $("b#total_row").text($("div#input_body").children().length + 1)
      $("div#input_body").append(`
      <div class="row mt-1" id="1">
          <div class="col-md-2">
              <input type="text" name="col0[]" onfocus="select();" />
          </div>
          <div class="col-md-3">
              <input type="text" name="col1[]" onfocus="select();" />
          </div>
          <div class="col-md-1">
              <button id="submit" onclick="removeRow(this ,event)" >Remove</button>
          </div>
      </div>
    `);
      init_input_focus();      
    }
    
});
function init_input_focus() {
  $("div#input_body input")[input_inx].focus();
}

function removeRow(ele, event) {
  $(ele).parent().parent().remove();
  input_inx--; //More danger.
}
init_input_focus()
6

it showing only one time append, but I want to multiple time append with auto focus on new appended first input

7

yeah so it will need to be a delegated event.

$("div#input_body input").change(function() {
=>
$("div#input_body").on("change","input",function() {

8

I used this but it appends the input multiple time https://jsfiddle.net/9z0ostke/

9

You undid the reordering changes.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.