FOLLOW

Friday, March 16, 2018

How to add/remove text-box dynamically using JQuery/JavaScript?

This example demonstrates how to add/remove text field in the form dynamically. I saw so many examples on the web related to this query, but this is the simplest method in all of them.

Includes

<link rel="stylesheet"  href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>I have a blue left border.


Script

<script>
    $(document).ready(function () {
        //maximum input boxes allowed
        var max_fields = 5;
        //Fields wrapper
        var wrapper = $(".input_fields_wrap");
        //Add button
        var add_button = $(".add_field_button");

        //Initlal text box count
        var x = 1;
        //On add input button click
        $(add_button).click(function (e) {
            e.preventDefault();
            //Max input box allowed
            if (x < max_fields) {
                //Text box increment
                x++;
                //Add input box
                $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field btn-danger">Remove</a></div>');
            }
        });
        //User click on remove text
        $(wrapper).on("click", ".remove_field", function (e) {
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        })
    });
</script>


Styles

<style type="text/css">
    body{
        position: absolute;
        width: 600px;
        height: 200px;
        z-index: 15;
        top: 50%;
        left: 30%;
        margin: -100px 0 0 -150px;
    }
    .box{
        background: grey;
        padding-top: 10px;
        padding-left: 60px;
        padding-bottom: 10px;
        width: 500px;
        height: auto;
    }
    .btn-success{
        padding: 5px;
    }
    input{
        margin-top: 10px;
    }
</style>


Body

<body>
    <div class="input_fields_wrap box">
        <a href = "http://www.phpjavascript.com/" class="btn-success">Add</a>
        <button class="add_field_button btn-success">Add More Fields</button><br>
        <input type="text" name="mytext[]"><br><br>
<a href = "http://www.phpjavascript.com/" class="btn-success">More</a>
    </div>
</body>


Result


How to generate dynamic tables using Javascript/JQuery, CSS, HTML?

In this tutorail we are going to discuss about most questioned topic in the web, how to generate dynamic table using jquery. Here is the simple code for adding/deleting rows and columns dynamically.
<html> <head>
<link rel="stylesheet"   href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"  type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script> $(function () { $("#addrow").click(function () { var tr = "<tr>" + "<td contenteditable='true'></td>". repeat($("#myTable tr:eq(0) td").length) + "</tr>" $("#myTable").append(tr); }); $("#addcolumn").click(function () { $("#myTable tr").append($("<td contenteditable='true'></td>")); $(document).on('click', '.js-del-row', function () { $('#myTable').find('tr:last').remove(); }); $(document).on('click', '.js-del-column', function () { $('#myTable').find('td:last').remove(); }); }); }); </script>
<style type="text/css"> body{ position: absolute; width: 600px; height: 200px; z-index: 15; top: 50%; left: 40%; margin: -100px 0 0 -150px; background: grey; } table,tr,td { border: 1px solid white; border-collapse: collapse; padding:10px; margin-bottom:1em; color: white; } #mytable{ position: absolute; margin-left:50px; margin-top: 25px; } .addtable{ color: red; margin-left:50px; margin-top: 25px; } </style>
</head>
<body> <div class="addtable"> <a href='http://www.phpjavascript.com/' class='btn btn-danger'>Add</a> <input id="addrow" type="button" value="Add Row"> <input id="addcolumn" type="button" value="Add Column"> <button class="js-del-row">Delete Row</button> <button class="js-del-column">Delete Column</button> </div> <table id="myTable"> <thead> <tr id="test" contenteditable="true"><td>S.No</td></tr> </thead> <tbody> <tr> <td contenteditable="true">0001</td> </tr> </tbody> </table </body>
</html>

Result