Add and Remove Textbox

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DEMO Add and Remove TextBox</title>
        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function() {
                var i=$("#fields p").size()+1;
            
                $('.btadd').click(function() {
                    alert(i);
                    var box = '<p><label>NAME :</label><input type="text" name="txt"><input type="button" class="btRemove" value="Remove"><br></p>';
                    $('#fields').append(box); // end append
                    
                    //start create box
                    $('p .btRemove').last().click(function() {
                        $(this).parent().last().remove();
                    }); // end click
                    i++;
                }); // end click
                
                //Get value
                $("#btok").click(function() {
                    alert($('#form1').serialize());
                });
            }); // end ready
        </script>
    </head>
    <body>
        <form id="form1">
            <div id="fields">
                <p><label>NAME :</label><input type="text" name="txt"> <input type="button" class="btadd" value="Add"></p>
            </div>
        </form>
        <input type="button" id="btok" name="submit" value="GET Values"/>
    </body>
</html>

Leave a comment