Add/Remove Dynamic fields

Add/Remove text boxes dynamically         Download

Add/Delete text boxes Dynamically
Item 1 Price 1

Add/Remove text boxes.html

In this tutorial shows Add/Remove text boxes dynamically. by clicking the Plus button you will get text boxes and by clicking Minusbutton recently added text boxes are removed.

Here the below code shows how the function will work.

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<div id="container">
<lable for="item">Item 1</lable>
<input type="text" name="item" value=" ">
<lable for="price">Price 1</lable>
<input type="text" name="price" value=" ">
<a href="javascrip:void(0)" type="button" onclick="addMoreRows(this.form);">
<img src="images/add-icon.png"/></a>
<div id="addedRows"></div>
</div>
</form>
</div>
</html>

script.js

In this script i used two functions one for Add text boxes and another one is Remove text boxes.
By Clicking the Add button we can add any number of text boxes and by clicking remove button we can remove add ext boxes on by one.

var rowCount = 1;
function addMoreRows(frm) {
rowCount ++;
var recRow = '<p id="rowCount'+rowCount+'"><td>item '+rowCount+'</td><input name="item" type="text" /><td>Price '+rowCount+'</td><input name="price" id="price" type="text"/><a href="javascript:void(0);" onclick="removeRow('+rowCount+');"><img src="images/remove-icon.png"/></a></p>';
jQuery('#addedRows').append(recRow);
}
function removeRow(removeNum) {
jQuery('#rowCount'+removeNum).remove();
}

Backto Tutorial