0

Estoy tratando de crear un formulario que contiene un select option que al seleccionar la opción verificar muestre un botón de agregar campos de opciones, el problema es que a la hora de agregar 2 preguntas, seleccionar verificar en ambas y agregar campos de opciones, cuando quiero agregar mas campos de opciones en la primer pregunta creada las duplica, crea campos de opciones de dos en dos. Agradezco su ayuda Gracias!

 $(document).ready(function() {

            $('.verificar').hide();
            $('.duplicate').hide();

            var count = 2;

            //duplicate
            $('a.add').on('click', function() {

                //clone
                var row = $('.duplicate').clone();
                $(row).insertAfter('.duplicate-btn');
                $(row).show();

                //add new ids
                $(row).find('select').attr('id', 'select_' + count);
                $(row).find('verificar').attr('id', 'verificar_' + count);

                //remove duplicate class
                $(row).removeClass('duplicate');

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

                    var value = $(this).val();
                    var select = $(this).parent();
                    if (value == 1) {
                        $(select).siblings('.inputed').show();
                        $(select).siblings('.ocultar').hide();
                    } else {
                        $(select).siblings('.inputed').hide();

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

                });

                //click of remove pregunta
                $(".up-box-question").on("click", ".remove-aditional", function() {

                    $(this).closest(".all").remove();

                });

                $(".optionRow").on("click", ".remove-option", function() {

                    $(this).closest(".option-row").remove();

                });
                //Agrega opciones
                $(".addRow").click(function() {
                    var html = "<div class='option-row' id='rowtk" + 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").find(".optionRow").append(form);

                });
            });
            count++;

        });
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <div class="aditional-questions aditionals text">
        <div class="aditional-box duplicate-btn">
                <p class="aditional-text" for="">Pregunta
                    <a class="btn btn-primary agregar add" href="javascript: void(0)" type="button"><span></span>Agregar</a>
                </p>
        </div>
        <div class="duplicate all">
            <div class="up-box-question" style="text-align: center">
                <a class="remove-aditional" href="javascript: void(0)"><span class="glyphicon glyphicon-trash icon"></span></a>
            </div>
            <div class="box-question" style="text-align: center">
                <div class="row">
                    <label class="type-question-text">Tipo de Pregunta</label>
                    <div class="col-md-12">
                        <select class="form-control select" name="">
                                            <option value="1">Text</option>
                                            <option value="2">Verificar</option>
                                           </select>
                    </div>
                    <div class="row ocultar">
                        <div class="col-md-12">
                            <label class="type-question-text" for="">Titulo</label>

                            <div class="form-group">
                                <input type="text" id="" class="form-control text general" placeholder="Número de indentificación">
                            </div>
                        </div>
                    </div>
                    <div class="row verificar">
                        <div class="text option" style="margin-top:10px; text-align: center">
                            <a class="btn btn-primary addRow" href="javascript: void(0)" type="button"><span></span>Agregar Opcion</a>
                        </div>
                        <br>
                        <div class="optionRow">

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

1 respuesta 1

1

El error esta en que el evento click de $(".addRow").click(function() se duplicaba. Para corregir eso coloque un $(".addRow").unbind("click"); para que no se repitiera quedando asi:

$(".addRow").unbind("click");
$(".addRow").click(function(){
...

Puedes probarlo con tu código así:

$(document).ready(function() {

            $('.verificar').hide();
            $('.duplicate').hide();

            var count = 2;

            //duplicate
            $('a.add').on('click', function() {

                //clone
                var row = $('.duplicate').clone();
                $(row).insertAfter('.duplicate-btn');
                $(row).show();

                //add new ids
                $(row).find('select').attr('id', 'select_' + count);
                $(row).find('verificar').attr('id', 'verificar_' + count);

                //remove duplicate class
                $(row).removeClass('duplicate');

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

                    var value = $(this).val();
                    var select = $(this).parent();
                    if (value == 1) {
                        $(select).siblings('.inputed').show();
                        $(select).siblings('.ocultar').hide();
                    } else {
                        $(select).siblings('.inputed').hide();

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

                });

                //click of remove pregunta
                $(".up-box-question").on("click", ".remove-aditional", function() {

                    $(this).closest(".all").remove();

                });

                $(".optionRow").on("click", ".remove-option", function() {

                    $(this).closest(".option-row").remove();

                });
                //Agrega opciones
                $(".addRow").unbind("click");
                $(".addRow").click(function() {
                    var html = "<div class='option-row' id='rowtk" + 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").find(".optionRow").append(form);

                });
            });
            count++;

        });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <div class="aditional-questions aditionals text">
        <div class="aditional-box duplicate-btn">
                <p class="aditional-text" for="">Pregunta
                    <a class="btn btn-primary agregar add" href="javascript: void(0)" type="button"><span></span>Agregar</a>
                </p>
        </div>
        <div class="duplicate all">
            <div class="up-box-question" style="text-align: center">
                <a class="remove-aditional" href="javascript: void(0)"><span class="glyphicon glyphicon-trash icon"></span></a>
            </div>
            <div class="box-question" style="text-align: center">
                <div class="row">
                    <label class="type-question-text">Tipo de Pregunta</label>
                    <div class="col-md-12">
                        <select class="form-control select" name="">
                                            <option value="1">Text</option>
                                            <option value="2">Verificar</option>
                                           </select>
                    </div>
                    <div class="row ocultar">
                        <div class="col-md-12">
                            <label class="type-question-text" for="">Titulo</label>

                            <div class="form-group">
                                <input type="text" id="" class="form-control text general" placeholder="Número de indentificación">
                            </div>
                        </div>
                    </div>
                    <div class="row verificar">
                        <div class="text option" style="margin-top:10px; text-align: center">
                            <a class="btn btn-primary addRow" href="javascript: void(0)" type="button"><span></span>Agregar Opcion</a>
                        </div>
                        <br>
                        <div class="optionRow">

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

1
  • Si resuelto, Gracias! Commented el 23 sept. 2018 a las 4:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.