Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

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




More Posts

FOLLOW