1

Estoy intentando hacer un modulo para creación de encuestas dinámicamente, quiero tener un formulario donde vaya agregando las preguntas y las posibles respuestas de la misma. El asunto es que no me funciona el agregar opciones (respuestas) de la segunda pregunta en adelante, no se qué estoy haciendo muy mal, porque al hacer click en el boton ni siquiera entra al llamado de la función.

$(document).ready(function() {

    var i = $("#i").val();
    //var n = i++;
    //agregado de otro codigo
    $('.add-answer').on('click', function(e) {
		var el = $('<li>');
		el.append($('<input>', {
			type: "text",
			name: "new_answers[]"
		}))
		el.append($('<a>', {
			"class": "delete-new-answer btn-danger btn",
			"href": "#",
			"text": "Eliminar"

		}));
		$('.answers-list').append(el);
        e.preventDefault();
        console.log("iiiii "+i);
        $('.answers-list').append('<div id=\"yourform'+i+'\">');
        $('.answers-list').append('</div>');
        //agregando los botones de opciones respuestas
        $('.answers-list').append('<div id=\"your'+i+'\">');
        $('.answers-list').append('<input type=\"button\" value=\"Preview form_'+i+'\" class=\"add_ \" id=\"preview'+i+'\" />');
        $('.answers-list').append('<input type=\"button\" value=\"Add a field_'+i+'\" class=\"add_ \" id=\"add'+i+'\" />');
        $('.answers-list').append('</div>');
        var intId = $("#yourform"+i+" div").length + 1;
        //console.log(intId);
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field_"+ i + intId + "\"/>");
        $("#yourform"+i).append(fieldWrapper);
        //hasta aquí
        //console.log("elemento "+$("#add"+i));


	})
    //hasta aquí
    console.log("salida "+i);
    $(".add").click(function() {
        alert("hola");
        //$(".add").click(function() {
            var intId = $("#yourform"+i+" div").length + 1;
            //console.log(intId);
            var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field_" + intId + "\"/>");
            var fName = $("<input type=\"text\" class=\"fieldname\" />");
            var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Parrafo</option></select>");
            var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
            removeButton.click(function() {
                $(this).parent().remove();
            });
            fieldWrapper.append(fName);
            fieldWrapper.append(fType);
            fieldWrapper.append(removeButton);
            $("#yourform"+i).append(fieldWrapper);
        });

    $("#add").click(function() {
    //$(".add").click(function() {
        var intId = $("#buildyourform div").length + 1;
        //console.log(intId);
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field_" + intId + "\"/>");
        var fName = $("<input type=\"text\" class=\"fieldname\" />");
        var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Parrafo</option></select>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(fType);
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
    $("#preview").click(function() {
        console.log("preview");
        $("#yourform").remove();
        //$("#yourform").children().remove();
        var fieldSet = $("<fieldset id=\"yourform\"><legend>Form</legend></fieldset>");
        console.log(fieldSet);
        $("#buildyourform div").each(function() {
            var id = "input" + $(this).attr("id").replace("field","");
            console.log("el id "+id);
            var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>");
            var input;
            switch ($(this).find("select.fieldtype").first().val()) {
                case "checkbox":
                    input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" /><br>");
                    break;
                case "textbox":
                    input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" /><br>");
                    break;
                case "textarea":
                    input = $("<textarea id=\"" + id + "\" name=\"" + id + "\" ></textarea><br>");
                    break;    
            }
            fieldSet.append(label);
            fieldSet.append(input);
        });
        //$("body").append(fieldSet);
        $("#your").append(fieldSet);

        console.log($("#i").val(i++));
    });
});
   <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            
            <!-- Content Header (Page header) -->
            <section class="content-header">
                                            </section>

            <!-- Main content -->
            <section class="content">

                
 

<section class="content-header" >
    <h1>Encuesta</h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>Administración</a></li>
        <li class="active">Crear Encuesta</li>
    </ol>
</section>

<section class="content" style="width: 50%">
    
    <div class="box box-success" style="padding:30px;" id="myform">
        <div class="row">
            <div class="card card-warning">
                <div class="panel panel-primary">
                    <div class="panel-heading">Registrar Encuesta</div>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <form action="http://test-gestionventa.badamax.cl/encuesta/store" method="POST">
                        <input type="hidden" name="_token" value="nwbOb8QL1exLJzYIatQR6uIVw1NrloqMTC9VfVZ0">
                        <!-- text input -->
                        <input type="hidden" name="i" id="i" value="1">
                        <div class="form-group">
                            <label>Descripcion:</label>
                            <input type="text" class="form-control" name="des_encuesta" id="encuesta.des_encuesta" placeholder="Encuesta sobre..." required>
                        </div>
                       
                        

                        <!--
                        <div class="form-group">
                            <label>Pregunta:</label>
                            <input type="text" name="pregunta[]"  />   
                        </div>

                        <br>
                        --->

                        <div class="answers">
                            <h3>Preguntas</h3>
                            <ol class="answers-list">
                                <!-- Prueba -->
                                <li>
                                    <input type="text" name="new_answers[]" placeholder="Texto de la pregunta">
                                    <a class="btn btn-danger delete-new-answer" href="#">Eliminar</a>
                                    <br>
                                    <div id="buildyourform">
                                        <legend>Opciones/respuestas</legend>
                                    </div>
                                    <div id="your">
                                        <input type="button" value="Preview opciones" class="add" id="preview" />
                                        <input type="button" value="Agregar opción" class="add" id="add" />
                                    </div>
                                </li>
                            </ol>
                            <p>
                                <a class="btn btn-success add-answer" href="#">Añadir Pregunta</a>
                            </p>
                        </div>    
                
                        
                
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary btn-block">Guardar</button>
                        </div>

                    </form>
                    
                   
                </div>
                <!-- /.card-body -->
            </div>
        </div>
    </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="http://test-gestionventa.badamax.cl/js/encuestas_js.js"></script>

            </section>
            <!-- /.content -->
                    </div>
        <!-- /.content-wrapper -->

    </div>
    <!-- ./wrapper -->

1 respuesta 1

1

Tu codigo es complicado porque esta muy desordenado, pero para arreglar facil tu problema, solo tienes que cambiar el selector del click y usar .on en lugar de .click. Ademas estabas agregando un _ a la clase add. Quedaria asi:

$(document).ready(function() {

    var i = $("#i").val();
    //var n = i++;
    //agregado de otro codigo
    $('.add-answer').on('click', function(e) {
		var el = $('<li>');
		el.append($('<input>', {
			type: "text",
			name: "new_answers[]"
		}))
		el.append($('<a>', {
			"class": "delete-new-answer btn-danger btn",
			"href": "#",
			"text": "Eliminar"

		}));
		$('.answers-list').append(el);
        e.preventDefault();
        console.log("iiiii "+i);
        $('.answers-list').append('<div id=\"yourform'+i+'\">');
        $('.answers-list').append('</div>');
        //agregando los botones de opciones respuestas
        $('.answers-list').append('<div id=\"your'+i+'\">');
        $('.answers-list').append('<input type=\"button\" value=\"Preview form_'+i+'\" class=\"add_ \" id=\"preview'+i+'\" />');
        $('.answers-list').append('<input type=\"button\" value=\"Add a field_'+i+'\" class=\"add \" id=\"add'+i+'\" />');
        $('.answers-list').append('</div>');
        var intId = $("#yourform"+i+" div").length + 1;
        //console.log(intId);
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field_"+ i + intId + "\"/>");
        $("#yourform"+i).append(fieldWrapper);
        //hasta aquí
        //console.log("elemento "+$("#add"+i));


	})
    //hasta aquí
    console.log("salida "+i);
    $(".answers-list").on("click", ".add", function() {
        alert("hola");
        //$(".add").click(function() {
            var intId = $("#yourform"+i+" div").length + 1;
            //console.log(intId);
            var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field_" + intId + "\"/>");
            var fName = $("<input type=\"text\" class=\"fieldname\" />");
            var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Parrafo</option></select>");
            var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
            removeButton.click(function() {
                $(this).parent().remove();
            });
            fieldWrapper.append(fName);
            fieldWrapper.append(fType);
            fieldWrapper.append(removeButton);
            $("#yourform"+i).append(fieldWrapper);
        });

    $("#add").click(function() {
    //$(".add").click(function() {
        var intId = $("#buildyourform div").length + 1;
        //console.log(intId);
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field_" + intId + "\"/>");
        var fName = $("<input type=\"text\" class=\"fieldname\" />");
        var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Parrafo</option></select>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(fType);
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
    $("#preview").click(function() {
        console.log("preview");
        $("#yourform").remove();
        //$("#yourform").children().remove();
        var fieldSet = $("<fieldset id=\"yourform\"><legend>Form</legend></fieldset>");
        console.log(fieldSet);
        $("#buildyourform div").each(function() {
            var id = "input" + $(this).attr("id").replace("field","");
            console.log("el id "+id);
            var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>");
            var input;
            switch ($(this).find("select.fieldtype").first().val()) {
                case "checkbox":
                    input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" /><br>");
                    break;
                case "textbox":
                    input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" /><br>");
                    break;
                case "textarea":
                    input = $("<textarea id=\"" + id + "\" name=\"" + id + "\" ></textarea><br>");
                    break;    
            }
            fieldSet.append(label);
            fieldSet.append(input);
        });
        //$("body").append(fieldSet);
        $("#your").append(fieldSet);

        console.log($("#i").val(i++));
    });
});
<!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            
            <!-- Content Header (Page header) -->
            <section class="content-header">
                                            </section>

            <!-- Main content -->
            <section class="content">

                
 

<section class="content-header" >
    <h1>Encuesta</h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>Administración</a></li>
        <li class="active">Crear Encuesta</li>
    </ol>
</section>

<section class="content" style="width: 50%">
    
    <div class="box box-success" style="padding:30px;" id="myform">
        <div class="row">
            <div class="card card-warning">
                <div class="panel panel-primary">
                    <div class="panel-heading">Registrar Encuesta</div>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <form action="http://test-gestionventa.badamax.cl/encuesta/store" method="POST">
                        <input type="hidden" name="_token" value="nwbOb8QL1exLJzYIatQR6uIVw1NrloqMTC9VfVZ0">
                        <!-- text input -->
                        <input type="hidden" name="i" id="i" value="1">
                        <div class="form-group">
                            <label>Descripcion:</label>
                            <input type="text" class="form-control" name="des_encuesta" id="encuesta.des_encuesta" placeholder="Encuesta sobre..." required>
                        </div>
                       
                        

                        <!--
                        <div class="form-group">
                            <label>Pregunta:</label>
                            <input type="text" name="pregunta[]"  />   
                        </div>

                        <br>
                        --->

                        <div class="answers">
                            <h3>Preguntas</h3>
                            <ol class="answers-list">
                                <!-- Prueba -->
                                <li>
                                    <input type="text" name="new_answers[]" placeholder="Texto de la pregunta">
                                    <a class="btn btn-danger delete-new-answer" href="#">Eliminar</a>
                                    <br>
                                    <div id="buildyourform">
                                        <legend>Opciones/respuestas</legend>
                                    </div>
                                    <div id="your">
                                        <input type="button" value="Preview opciones" class="add" id="preview" />
                                        <input type="button" value="Agregar opción" class="add" id="add" />
                                    </div>
                                </li>
                            </ol>
                            <p>
                                <a class="btn btn-success add-answer" href="#">Añadir Pregunta</a>
                            </p>
                        </div>    
                
                        
                
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary btn-block">Guardar</button>
                        </div>

                    </form>
                    
                   
                </div>
                <!-- /.card-body -->
            </div>
        </div>
    </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="http://test-gestionventa.badamax.cl/js/encuestas_js.js"></script>

            </section>
            <!-- /.content -->
                    </div>
        <!-- /.content-wrapper -->

    </div>
    <!-- ./wrapper -->

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.