Question

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?

Answer 1

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/