Add Textbox Dynamically using jQuery

Submitted by jkev on Saturday, May 11, 2013 - 16:04.

Language

Hi sourcecodester, In this source code, you will learn on how to add TextBox dynamically using jQuery. You can also remove it. Hope this help. Sample code:

<?php 
include('header.php');
?>
<body>
<script type="text/javascript">
jQuery(document).ready( function () {
 
        $("#append").click( function() {
                $(".inc").append('<div class="controls"><input type="text"><a href="#" class="remove_this btn btn-danger">remove</a><br><br></div>');
                return false;
        });
        
        jQuery('.remove_this').live('click', function() {
                jQuery(this).parent().remove();
                return false;
        });
        
 
});
</script> 
<br>
<br>
<form class="form-horizontal">
        <div class="control-group">
                <label class="control-label" for="inputEmail">TextBox</label>
                <div class="inc">
                        <div class="controls">
                                <input type="text">
                                <button class="btn btn-info" type="submit" id="append" name="append">Add Textbox</button>
                                <br>
                                <br>
                        </div>
                </div>
        </div>
</form>
</body>
</html>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add Textbox Dynamically using jQuery

Comments

jkev

Add new comment