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