PHP JavaScript: 03/16/18

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

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

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>

<button class="add_field_button btn-success">Add More Fields</button><br>

</div>

</body>

Result


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>

PHP JavaScript

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

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

Result

Labels

Popular Posts