[es] - dynamic input html/javascript/ajax/bootstrap

djamsi
Dejan Kircanov
Data Centar
HostNet Limited Corp.
Chicago

Član broj: 11896
Poruke: 172
..tspeed.crlkil.sbcglobal.net.

Sajt: www.hostnetcorp.com

+1 Profil

dynamic input html/javascript/ajax/bootstrap

^{17.01.2016. u 03:23 - pre 100 meseci}

treba mi 2 text polja koja ce da imaju opciju dynamic. Oba butona rade ali meni treba kad kliknem na jedan input field da mi uradi dynamic samo za taj jedan. Sa ovim kodom na add automatski izbacuje 2. Znam da je problem u javascript al ne znam kako da ga resim. ADD i REMOVE radi preko ID. I kako da u code dodam da razlikuje ID=1 od ID=2. Evo vam primer koji me zeza:

ovo je index.html koji redi sa bootstap 3

Code:

                    <div class="col-lg-6">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Pick-Ups</label>
                            <div class="col-lg-6">
                                <input class="form-control" type="text" name="pickup[]" placeholder="Pick-Up 1" />
                            </div>
                            <div class="col-lg-3">
                                <button type="button" class="btn btn-default btn-sm addButton" data-template="pickup">Add</button>
                            </div>
                        </div>

                        <div class="form-group hide" id="pickupTemplate">
                            <div class="col-lg-offset-3 col-lg-6">
                                <input class="form-control" type="text" />
                            </div>
                            <div class="col-lg-3">
                                <button type="button" class="btn btn-default btn-sm removeButton">Remove</button>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Stops</label>
                            <div class="col-lg-6">
                                <input class="form-control" type="text" name="stop[]" placeholder="Stop 1" />
                            </div>
                            <div class="col-lg-3">
                                <button type="button" class="btn btn-default btn-sm addButton" data-template="pickup">Add</button>
                            </div>
                        </div>

                        <div class="form-group hide" id="stopTemplate">
                            <div class="col-lg-offset-3 col-lg-6">
                                <input class="form-control" type="text" />
                            </div>
                            <div class="col-lg-3">
                                <button type="button" class="btn btn-default btn-sm removeButton">Remove</button>
                            </div>
                        </div>
                    </div>

evo vam i javascript

Code:

    $(document).ready(function() {
        $('.addButton').on('click', function() {
            var index = $(this).data('index');
            if (!index) {
                index = 1;
                $(this).data('index', 1);
            }
            index++;
            $(this).data('index', index);

            var template     = $(this).attr('data-template'),
                $templateEle = $('#' + template + 'Template'),
                $row         = $templateEle.clone().removeAttr('id').insertBefore($templateEle).removeClass('hide'),
                $el          = $row.find('input').eq(0).attr('name', template + '[]');
            $('#defaultForm').formValidation('addField', $el);

            // Set random value for checkbox and textbox
            if ('checkbox' == $el.attr('type') || 'radio' == $el.attr('type')) {
                $el.val('Choice #' + index)
                   .parent().find('span.lbl').html('Choice #' + index);
            } else {
                $el.attr('placeholder', 'Stop #' + index);
            }

            $row.on('click', '.removeButton', function(e) {
                $('#defaultForm').formValidation('removeField', $el);
                $row.remove();
            });
        });

        $('#defaultForm')
            .formValidation({
                message: 'This value is not valid',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    'stop[]': {
                        validators: {
                            notEmpty: {
                                message: 'The stop field is required'
                            }
                        }
                    },
                    'pickup[]': {
                        validators: {
                            notEmpty: {
                                message: 'The stop field is required'
                            }
                        }
                    },
                    'checkbox[]': {
                        validators: {
                            notEmpty: {
                                message: 'The checkbox field is required'
                            }
                        }
                    },
                    'radio[]': {
                        validators: {
                            notEmpty: {
                                message: 'The radio field is required'
                            }
                        }
                    }
                }
            })
            .on('err.field.fv', function(e, data) {
                //console.log('err.field.fv -->', data.element);
            })
            .on('success.field.fv', function(e, data) {
                //console.log('success.field.fv -->', data.element);
            })
            .on('added.field.fv', function(e, data) {
                //console.log('Added element -->', data.field, data.element);
            })
            .on('removed.field.fv', function(e, data) {
                //console.log('Removed element -->', data.field, data.element);
            });
    });

Odgovor na temu