CODEWITHSUNDEEP
javascriptjqueryjquery-events
rusly
rusly

Reputation: 1522

How to automatically clone <tr> when user finish fill up text input?

I have simple form with 2 textfield Name and Phone and can add new field when click Add new button. You can refer here jsfiddle .

My problem is how to add new textfield without press Add New button? When user fill up Text Input name and Text Input Phone new row <tr class="person"> will automatically added.

My second problem is I'm not sure how to write code for delete.

UPDATE : I also want to set maximum clone, can this be done?

Upvotes: 0

Views: 319

Answers (3)

nnnnnn
nnnnnn

Reputation: 150070

If by "fill up" you mean "when the user enters as many characters as the Phone field allows" then you can add a maxlength="10" attribute to the input (setting the value as appropriate):

<input type="text" name="phone[]" id="phone" maxlength="10"/>

...and add a handler to the keyup event that checks whether the current value has reached the maxlength:

$('input[name="phone\[\]"]').keyup(function() {
    if (this===$('input[name="phone\[\]"]').last()[0]
        && this.value.length===+$(this).attr("maxlength")) {
        $("#add").click();
    }
});

Note that you probably only want to do this test if the user is typing in the last row, hence the first part of the if test above.

Also you probably want the newly cloned fields to be blank, so you can do this within your add function:

$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last')
                           .find("input").val("");

To set a maximum number of rows you can put a test in your add function:

$("#add").click(function() {
    var $lastRow = $('#mytable tbody>tr:last');
    if ($lastRow.index() < 10) { // set maximum rows here
        $lastRow.clone(true).insertAfter($lastRow).find("input").val("");
    }
    return false;
});

Note also that you don't need to give those inputs an id attribute, but if you do you shouldn't copy it when you clone because id should be unique.

For a delete function, add a delete button to each row:

<td><input type="button" class="deleteRow" value="Delete"/></td>

...and then:

$("#mytable").on("click","input.deleteRow", function(){
    if ($("#mytable tr").length > 2) // don't delete the last row
        $(this).closest("tr").remove();
});

Demo: http://jsfiddle.net/3J65U/15/

Upvotes: 3

elclanrs
elclanrs

Reputation: 94121

You could do it on blur as well as the add new button. Also be careful with duplicated id's, use classes instead:

<tr class="person">
  <td><input type="text" name="name[]" class="name" /></td>
  <td><input type="text" name="phone[]" class="phone" /></td>
</tr>

Then in jQuery:

$('.phone').blur(function() {
  var ppl = $('.person').length;
  if ( this.value && ppl < 5 ) { // Max 5 people
    $(this).closest('tr').clone(true)
      .insertAfter('#mytable tr:last')
      .find('input').val('').first().focus();
    $(this).off('blur');
  }
});

Demo: http://jsfiddle.net/elclanrs/YEBQt/ (tab from input to input)

Upvotes: 0

Scott Selby
Scott Selby

Reputation: 9580

I would expand on enclares - I would use .blur() for each textbox , and each time check and make sure each value is not "" - that would make sure both are filled

Then in jQuery:

$(document).ready(function() {
    $(".phone").blur(function() {
      var phonetxt = $('.phone'.val();
      var nametxt = $('.name').val();
      if ( phonetxt != "" && nametxt != "" ){
        $(this).closest('tr').clone(true)
            .insertAfter('#mytable tr:last')
            .find('input').val('').first().focus();
    });
}

 $(".name").blur(function() {
    var phonetxt = $('.phone'.val();
    var nametxt = $('.name').val();
    if ( phonetxt != "" && nametxt != "" ){
        $(this).closest('tr').clone(true)
            .insertAfter('#mytable tr:last')
            .find('input').val('').first().focus();
    });
  }
});​

Upvotes: 0

Related Questions