Form Add Campo Telefone

Form Add Campo Telefone

by Angelo Rogério Rubin

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<script src="povou.gilvaju.com/sistema/js/plugins.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.1/chosen.css">
<div id="places-container" class="form-group places-repeat">
                    <div class="group-fields" data-loja="0">
                        <div class="col-md-4"></div>
                        <div class="col-md-6">
                            <legend>
                                <button class="add-group btn btn-success btn-group-fields" type="button">
                                    <span class="hi hi-plus-sign span-group-fields"></span>
                                </button>
                                Loja</legend>

                        </div>

                        <div class="col-md-offset-4 col-md-6">

                            <input type="text" name="name[]" class="form-control name-group-fields" placeholder="Digite o nome da Loja">

                            <div class="repeatable-fields-container phones-repeat">
                                <div class="input-group input-fields">
                                    <input type="text" name="telefones[0][]" class="telefone form-control" placeholder="(999) 999-9999">
                                    <span class="input-group-btn">
                                        <button class="add-field btn btn-success btn-input-fields" type="button">
                                            <span class="hi hi-plus-sign span-input-fields"></span>
                                        </button>
                                    </span>
                                </div>
                            </div>
           ...

CSS

.chosen-container
{
    width: 250px !important;
}

JavaScript

$(function() {
		
  $(".select-chosen").chosen();
  
  	var $places_container = $('#places-container');
  
    //add group fields
    $places_container.on('click', '.group-fields button.add-group', function() {

        var _container = $('#places-container');
        var numeroloja = parseInt(_container.find('.group-fields:last').data('loja')) + 1;
        var groupFields = _container.find('.group-fields:first').clone();

        groupFields.find('span.span-group-fields').removeClass('hi hi-plus-sign').addClass('hi hi-remove');
        groupFields.find('button.add-group').removeClass('add-group').addClass('remove-group').removeClass('btn-success').addClass('btn-danger');
        groupFields.find('input[type="text"]').val('');

        groupFields.find('input.email').removeAttr('name').attr('name', 'emails[' + numeroloja + '][]');
        groupFields.find('input.telefone').removeAttr('name').attr('name', 'telefones[' + numeroloja + '][]');

        groupFields.find('button.remove-field').closest('.input-fields').remove();

        groupFields.data('loja', numeroloja);
      	groupFields.find('.chosen-container').remove();
      	groupFields.find(".select-chosen").chosen();
      
        _container.append(groupFields);
				
    });

    //remove group			
    $places_container.on('click', 'button.remove-group', function() {
        $(this).closest('div.group-fields').remove();
    });

    //add field
    $places_container.on('click', '.repeatable-fields-container button.add-field', function() {
        var _container = $(this).closest('.repeatable-fields-container');
        var inputFields = _container.find('.input-fields:first').clone();

        inputFields.find('span.span-input-fields').removeClass('hi hi-plus-sign').addClass('hi hi-remove');
        inputFields.find('button').removeClass('add-field').addClass('remove-field').removeClass('btn-success').addClass('btn-danger');

        inputFields.find('input').val('');

       ...