dynamic add remove text field in javascript

Navneet Dudhagara answered on December 7, 2024 Popularity 3/10 Helpfulness 1/10

answer dynamic add remove text field in javascript

dynamic add remove text field in javascript

Comment

<!DOCTYPE html>
<html>
 
<head>
  <title>How to add remove dynamic text field in jquery</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
</head>
 
<body class="container">
  <div class="row mt-3">
	<div class="form-group optionBox">
		<div class="row">
			<div class="col-md-12">
				<div class="block">
					<div class="input-group" style="margin-bottom:8px;"  id="1">
						<input type="text" name="btn_label[]" class="form-control btn_label" placeholder="Add Button Label">
						<span class="input-group-btn"> 
							<button type="button"  class="btn btn-primary addButton">+</button> 
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
  </div>
</body>

<script>
	var i=1;
	$('.addButton').click(function() {
		i++;
		var html='<div class="input-group" style="margin-bottom:8px;"><input type="text" name="btn_label[]" class="form-control btn_label" placeholder="Add Button Label" value=""><span class="input-group-btn"><button type="button"  class="btn btn-primary remove">-</button> </span></div>';
		$('.block:last').after('<div class="block" id="'+i+'">'+html+'</div>');
	});
	
	$('.optionBox').on('click','.remove',function() {
		var id=$(this).parent().parent().attr("id");
		//alert(id);
		$(this).parent().parent().remove();
	});
</script>
 
</html>

Popularity 3/10 Helpfulness 1/10 Language php

Source: programmerdesk.com

Tags: add dynamic field javascript php text

Link to this answer
Share Copy Link

Contributed on Dec 07 2024

Navneet Dudhagara

0 Answers Avg Quality 2/10

dynamic add remove text field in javascript

Contents

More Related Answers

dynamic add remove text field in javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.