Crear entrada dinámica en forma dinámica cuando selecciono una opción

votos
0

Estoy tratando de crear una forma dinámica que añade otro campo al elegir Verificación de selección, el problema es que cuando agrego campos de opciones de verificación en el momento de la adición de otra forma, las opciones que he añadido previamente aparecen, como hago para agregar una nueva forma y no muestran opciones añadidas? Agradezco su ayuda, gracias!

  $(document).ready(function() {

            $('.verificar-free').hide();
            $('.duplicate-free').hide();
            $('.optionRow').hide();

            var count = 2;

            //duplicate
            $('a.add-free').on('click', function() {
                //clone
                var row = $('.duplicate-free').clone();
                $(row).insertAfter('.aditional-box-free');
                $(row).show();

                //add new ids
                $(row).find('select').attr('id', 'select-free_' + count);
                //remove duplicate class
                $(row).removeClass('duplicate-free');

                //onchange of select
                $('select').on('change', function() {

                    var value = $(this).val();
                    var select = $(this).parent();

                    if (value == 1) {
                        $(select).siblings('.input-free').show();
                        $(select).siblings('.ocultar-free').hide();
                    } else {
                        $(select).siblings('.input-free').hide();
                    }
                    if (value == 2) {
                        $(select).siblings('.ocultar-free').show();
                        $(select).siblings('.verificar-free').show();
                    } else {
                        $(select).siblings('.verificar-free').hide();
                    }

                });
                
                //add option
                $(.addRow-free).click(function() {
                    var html = <div class='option-free' id=' + count + '><div class='form-group'><div class='input-group select'><input type='text' class='form-control' placeholder='Añade opción' /><span class='input-group-btn'><button class='btn btn-primary remove-option' type='button'><a class='remove-tipe' href='javascript: void(0)'><span class='glyphicon glyphicon-trash' style='color:white'></span></a></button></span></div></div></div>;

                    var form = $(html);

                    $(this).closest(.verificar-free).find(.optionRow-free).append(form);

                });
                count++;
            });

        });
 <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js></script>
 <script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script>
 <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
 
     <div class=aditional-questions text>
        <div class=aditional-box-free>
            <p class=aditional-text for=><b>Add Question</b>
                <a class=btn btn-primary agregar add-free href=javascript: void(0) type=button><span></span>Add</a>
            </p>
        </div>
        <div class=duplicate-free all-free style=text-align: center>
            <div class=box-question>
                <div class=row>
                    <label class=type-question-text for=>Question Type</label>
                    <div class=col-md-12>

                        <select class=form-control select>
                                            <option value=1>Text</option>
                                            <option value=2>Verification</option>
                                           </select>
                    </div>
                    <div class=row ocultar-free>
                        <div class=col-md-12>
                            <label class=type-question-text for=>Title</label>

                            <div class=form-group>
                                <input type=text id= class=form-control text general placeholder=Question>
                            </div>
                        </div>
                    </div>
                    <!--aditional option-->
                    <div class=row verificar-free>
                        <div class=text>
                            <div class=col-md-6>

                            </div>
                        </div>
                        <div class=text option text style=margin-top:10px;>
                            <a class=btn btn-primary addRow-free href=javascript: void(0) type=button><span></span>Add Option</a>
                        </div>
                        <br>
                        <div class=form-group optionRow-free>

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

Publicado el 19/09/2018 a las 17:12
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

Si no estoy mal con su pregunta.

El problema es que tienes misma (por duplicado) que se añade entrada de la derecha? (Si hay más de 1 pregunta)

Cambie esta línea

$(".optionRow-free").append(form);

A

$(this).closest(".verificar-free").find(".optionRow-free").append(form);

Respondida el 19/09/2018 a las 17:51
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more