JavaScript - Agregar input dinámicamente y anidados

 
Vista:

Agregar input dinámicamente y anidados

Publicado por María (1 intervención) el 12/09/2020 16:59:06
Hola, tengo un formulario en donde elijo la cantidad de textarea que quiero agregar, a su vez cada textarea incluye default un input, y a su vez ese input contiene un botón que deberá permitir agregar más input si yo lo oprimo.

El problema que tengo es que si yo quiero agregar más input a partir del textarea2, los agrega siempre en el textarea1.


el código es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="row">
    <div class="col-md-3">
        <label>¿Cuántas notas desea agregar?</label>
        <div class="input-group">
            <input type="number" id="cantidad" name="cantidad" value="" class="form-control"
             min="1" max="30" >
                <span class="input-group-btn">
                    <button type="button" class="btn btn-success btn-flat"
                    onclick="addNotas();" >
                                <i class="fa fa-check"></i>
                    </button>
                </span>
        </div>
    </div>
</div>
 
<div id="mult_notas" class="hidden">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-success box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">Sección de notas y subnotas</h3>
                </div>
                <div class="box-body">
                    <div id="formularios"></div>
                </div>
            </div>
        </div>
    </div>
</div>
_________________________________________________________________

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
function addNotas() {
	var cantidad = $('#cantidad').val();
	if (cantidad <=50 && cantidad >= 1) {
		$('#mult_notas').removeClass('hidden');
		$('#formularios').html("");
		var conta = 1;
		for (var i = 0; i < cantidad; i++) {
			var formulario = "";
 
			formulario +=  '<div class="row">'+
			    '<div class="col-md-12">'+
			        '<h3>Notas '+conta+'</h3>'+
			        '<div class="row">'+
			            '<div class="col-md-12">'+
			                '<div class="form-group">'+
			                    '<label for="nota">Nota </label>'+
			                    '<textarea id="nota" name="nota[]" class="form-control" style="resize: vertical;
                                            max-height: 500px;" rows="5"></textarea>'+
			                '</div>'+
			            '</div>'+
			        '</div>'+
 
			    '<div id="n_subnota">'+
	        		'<div class="row">'+
	        			'<div class="col-md-8">'+
	        				'<div class="form-group">'+
	        					'<label for="subnota">Subnotas</label>'+
	        					'<div class="input-group">'+
	        						'<input type="text" class="form-control" id="subnota"
                                                                 name="subnota[]" required autocomplete="off">'+
	        						'<div class="input-group-btn">'+
	        							'<button type="button" class="btn btn-info"
                                                                        onclick="add_subnota();"> <i class="fa fa-plus"></i> </button>'+
	        						'</div>'+
	        					'</div>'+
	        				'</div>'+
	        			'</div>'+
	        		'</div>'+
	        	'</div>'+
 
			    '</div>'+
			'</div>';
			$('#formularios').append(formulario);
			conta++;
 
		}
	}else{
		alert('NO');
	}
 
}
 
 
function add_subnota()
{
	var input =
		'<div class="row">'+
    		'<div class="col-md-8">'+
    			'<div class="form-group">'+
    				'<label>Subnota</label>'+
    				'<input type="text" name="subnota[]" class="form-control">'+
    			'</div>'+
    		'</div>'+
    	'</div>';
	$('#n_subnota').append(input);
	return false;
}



Les agradecería su ayuda
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 2.725
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Agregar input dinámicamente y anidados

Publicado por joel (612 intervenciones) el 13/09/2020 08:48:23
Hola Maria, he probado tu código y no entiendo cual es el problema... se añaden uno debajo del otro, y parece que funciona correctamente!!

Puedes ser un poco mas explicita en esto "quiero agregar más input a partir del textarea2, los agrega siempre en el textarea1"
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar