In this tutorial helps to add Textbox dynamically using jQuery and PHP. When user click on add button New textbox will add.
::::: Demo :::::
1) Add This Link on Your PHP File
Css / Script #
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        
		
		
2) Html Design
Note : Add bootstrap file for perfect design....
<div class="container">
	<h2>Add Dynamic Textbox</h2>
        <button type="submit" class="btn btn-primary" onclick="addTextBox();">Add <i class="fa fa-plus-square"></i></button>
		<br><br>
        <div id="newBox">
			<div class="form-group">
				<input type="text" class="form-control" placeholder="Dynamic Text Box..." name="txt_1">
            </div>
        </div>
</div>			
3) Write some script for add new textbox :
<script>
	var id = 2, txt_box;
            function addTextBox() {       
                txt_box = '<div class="form-group"><input type="text" name="txt_' + id + '" placeholder="Dynamic Text Box ' + id + '..." class="form-control"/></div>';
                $("#newBox").append(txt_box);
                id++;
            }
</script>        
		
		

 
 
 
 
 
No comments:
Post a Comment