New Trending Topics and Study Material

Breaking

Tag

Tricks & Tips (17) News (5) PHP (5) Android (3) SEO (1) free paytm cash (1)

Sunday 25 February 2018

Add Dynamic Textbox Using PHP jQuery

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