Site icon SmartTutorials.net

Dynamically Add and Remove Textbox Using jQuery

muni

Dynamically add and delete textboxes using jQuery may you require in some projects or you like to do this to learn some interesting jQuery stuffs. Now we are going to make this stuff by going through step by step, so that you can make it yourself as well learn the logics and some basic of jQuery selectors and events.

Dynamically Add and Remove Textboxes using jQuery

 

Demo

 

step 1:

Create index.html and add jQuery libary, textbox and an image(addition).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Dynamically Add and Delete Textbox using jQuery</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<p>Dynamically Add and Delete Textbox using jQuery</p>
		<div id="advice" style="width: 400px; height: auto;margin:0px auto;">
			<form method="post">
				<div id="button_pro">
					<div class="space" id="input_1">
						<input type="text" name="val[]" class="left txt" />
						<img class="add right" src="images/add.png" />
					</div>
				</div>
				<input type="submit" value="Kiss Me!" class="but" />
			</form>
		</div>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script src="js/app.js"></script>
	</body>
</html>

 

Download

Step 2:

Now add below css styles in the head section to add a beauty.

<style>
@font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}
</style>

Step 3:

Now we come into party of jQuery. First task is when we clicked on plus image it will dynamically add textboxes into the form.

var id = 2, txt_box;
    $("#button_pro").on("click", ".add", function() {
        var $this = $(this);
        var parentId = $this.parent().attr("id");
        if ($('#'+parentId).find('.remove').length == 0) {
            $('#'+parentId).append('<img src="images/remove.png" class="remove"/>')
        }
        $this.remove();
        txt_box =
        '<div class="space" id="input_' +
        id +
        '" ><input type="text" name="val[]" class="left txt"/><img src="images/remove.png" class="remove"/><img class="add right" src="images/add.png" /></div>';
        $("#button_pro").append(txt_box);
        id++;
    });

when we clicked on the add image it will append textbox, plus image (addition) and minus image(Delete), as well we remove plus image next to the first text boxes. Also adds remove button near first textbox.

Step 4:

Now add following script to do delete operation when we clicked on the minus image(Delete).

$("#button_pro").on("click", ".remove", function() {
        var parent = $(this).parent().prev().attr("id");
        var parent_im = $(this).parent().attr("id");
        
        $("#" + parent_im).slideUp("medium", function() {
            $("#" + parent_im).remove();
            if ($("#button_pro").find('input').length === 1) {
                $("#button_pro").find('input').parent().find('.remove').remove();
            }
            if ($(".add").length < 1) {
                $("#" + parent).append('<img src="images/add.png" class="add right"/> ');
            }
        });
    });

This will get the current parent id of the textbox and hide textbox.

var parent_im=$(this).parent().attr("id");
$("#"+parent_im).slideUp('medium');

Following script gets the current textbox previous container id.

var parent=$(this).parent().prev().attr("id");

Following script checks if there is no add image it’ll add image to the form.

if($('.add').length<1){
  $("#"+parent).append('<img src="images/add.png" class="add right"/> ');
}

Please refer one of my interesting tutorial using jQuery– Dynamically Add or Remove Table Row Using jQuery.

Exit mobile version