28% de descuento del curso en SQL Server

Estrada Web Group Estrada Web Group
Agregar/editar campos jQ
Estrada Web Group
Estrada Web Group
Estrada Web Group Estrada Web Group
Calificar:
14 junio Javascri..

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

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:

Cargando...
Descarga el código fuente

Obten el código del sistema de gestión de proyectos.

Shape