How to add, edit and delete html fields dynamically using JQuery

Estrada Web Group
Administrador
How to add, edit and delete html fields dynamically using JQuery

add dinamically input html

In this post we will see how to add and delete fields dynamically with jquery, normally in a project we give options to users to add several rows and send them to the database, here I am creating a functionality to add and delete a static row. I will not show server code to store data in the database, I'm just helping you add a dynamic row in the HTML container.

Other post:

Now you can copy the complete example to make tests on your computer

 


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title> Dynamic Add Controls HTML</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
</head>
<body>

    <div class="container" style="min-height:650px;">
        <div style='margin-bottom:100px'>
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- responsive-header -->
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-5044208028083716"
                 data-ad-slot="8330817881"
                 data-ad-format="auto"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>

        </div><div class="col-sm-8"><h1>Source code: Dynamic Add Row</h1></div>

        <div class="col-sm-8" id="container2">
            <div id="type_container">
                <div class="row form-group" id="edit-0">
                    <div class="col-md-2 control-label">
                        <label for="username" class="control-label">
                            Brand :
                        </label>
                    </div>
                    <div class="col-md-3">
                        <select data-placeholder="Choose an Type..." class="form-control" name="">
                            <option disabled="disabled" selected="selected" value="0">Select</option>
                            <optgroup label="Swedish Cars">
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                            </optgroup>
                            <optgroup label="German Cars">
                                <option value="mercedes">Mercedes</option>
                                <option value="audi">Audi</option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="col-md-2 control-label">
                        <label for="username" class="control-label">
                            Point :
                        </label>
                    </div>
                    <div class="col-md-5 clearfix">
                        <div class="row col-md-3">
                            <input type="text" maxlength='5' class="form-control input-sm" name="" value="0" />
                        </div>

                        <div class="col-md-3 control-label">

                            <a class="add-type pull-right" href="javascript: void(0)" tiitle="Click to add more"><i class="glyphicon glyphicon-plus-sign"></i></a>

                        </div>
                    </div>
                </div>
            </div>


            <div id="type-container" class="hide">
                <div class="row form-group type-row" id="">
                    <div class="col-md-2 control-label">
                        <label for="username" class="control-label">
                            Brand :
                        </label>
                    </div>
                    <div class="col-md-3">
                        <select data-placeholder="Choose an Type..." class="form-control" name="">
                            <option disabled="disabled" selected="selected" value="0">Select</option>
                            <optgroup label="Swedish Cars">
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                            </optgroup>
                            <optgroup label="German Cars">
                                <option value="mercedes">Mercedes</option>
                                <option value="audi">Audi</option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="col-md-2 control-label">
                        <label for="username" class="control-label">
                            Point :
                        </label>
                    </div>
                    <div class="col-md-5 clearfix">
                        <div class="row col-md-3">
                            <input type="text" maxlength='5' class="form-control input-sm" name="" value="0" />
                        </div>
                        <div class="col-md-3 control-label"><a class="remove-type pull-right" targetDiv="" data-id="0" href="javascript: void(0)"><i class="glyphicon glyphicon-trash"></i></a></div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            jQuery(document).ready(function () {
                var doc = $(document);
                jQuery('a.add-type').die('click').live('click', function (e) {
                    e.preventDefault();
                    var content = jQuery('#type-container .type-row'),
                        element = null;
                    for (var i = 0; i < 1; i++) {
                        element = content.clone();
                        var type_div = 'teams_' + jQuery.now();
                        element.attr('id', type_div);
                        element.find('.remove-type').attr('targetDiv', type_div);
                        element.appendTo('#type_container');

                    }
                });

                jQuery(".remove-type").die('click').live('click', function (e) {
                    var didConfirm = confirm("Are you sure You want to delete");
                    if (didConfirm == true) {
                        var id = jQuery(this).attr('data-id');
                        var targetDiv = jQuery(this).attr('targetDiv');
                        //if (id == 0) {
                        //var trID = jQuery(this).parents("tr").attr('id');
                        jQuery('#' + targetDiv).remove();
                        // }
                        return true;
                    } else {
                        return false;
                    }
                });

            });
        </script>
    </div>
</body>
</html>

 

Compartir artículo:

Más artículos geniales

Solución al problema de los acentos en JavaScript

Solución al problema de los acentos en JavaScript

En este tutorial aprenderás a solucionar el problema de los acentos en JavaScript, cuando intentamos enviar una alerta o un mensaje con JavaScript, este nos remplaza los acentos por otros caracteres, a continuación, te mostrare como solucionar este problema.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;