JavaScript - crear y eliminar campos dinámicos js

   
Vista:
Imágen de perfil de Hfr

crear y eliminar campos dinámicos js

Publicado por Hfr (29 intervenciones) el 03/06/2016 22:58:34
hola chicos, ayudita para este evento
tengo una esta función que me dibuja los campos según el total de datos que recibe mi listbox


function total_val(){

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var sl2 = document.getElementById('secondlist');
var campo;
campo=sl2.length;
 var x;
if (campo>0){
  for ( var l=0; l < campo; l++)
 
	  {
var div= document.createElement("div")
   x = document.createElement("textarea");
  var br=document.createElement("br");
    x.setAttribute("Name", "mets");
	 x.setAttribute("rows", "2");
	  x.setAttribute("cols", "20");
	  var tex=document.body.appendChild(x);
   div= tex.br;
}
 
return false;
}

hasta ahí todo bien

hasta hi todo bn
pero la cosa es un poco mas compleja
ya que tengo que crear dos columnas
si el campo tiene del list box tiene 2 items pues se dibujara 4 campos

opp

y susesivamente.

bueno y si se retira un item del select multiple pues se eliminaría una fila y si fueran dos pues dos jejeje
y pues la verdad esta un dificil..

codigo completo

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html>
 <head>
 
  <style type="text/css">
   select {
     width: 300px;
     height: 200px;
	 color:red;
 
   }
  </style>
 
  <script type="text/javascript">
 
   function AddToSecondList(){
     var fl = document.getElementById('firstlist');
     var sl = document.getElementById('secondlist');
	 var invi = document.getElementById('invi');
 
     for (i = 0; i < fl.options.length; i++){
       if(fl.options[i].selected){
         sl.add(fl.options[i],null);
 
 
	   }
 
     }
     return true;
 
   }
 
   function DeleteSecondListItem(){
     var fl = document.getElementById('firstlist');
     var sl = document.getElementById('secondlist');
     for (i = 0; i < sl.options.length; i++){
       if(sl.options[i].selected){
         fl.add(sl.options[i],null);
 
 
       }
     }
     return true;
   }
 
 
 function total_val(){
 
 
var sl2 = document.getElementById('secondlist');
var campo;
campo=sl2.length;
 var x;
if (campo>0){
  for ( var l=0; l < campo; l++)
 
	  {
var div= document.createElement("div")
   x = document.createElement("textarea");
  var br=document.createElement("br");
    x.setAttribute("Name", "mets");
	 x.setAttribute("rows", "2");
	  x.setAttribute("cols", "20");
	  var tex=document.body.appendChild(x);
   div= tex.br;
	  }
}
 
 return false;
 }
</script>
 
 
 </head>
 <body>
  <form action="xprueba.php" method ="POST" >
 
   <div>
    <select id="firstlist" multiple= "multiple" NAME="SEL[]">
     <option value="Realizar  la verificación  de afiliación  al sistema general de seguridad social en salud  y en caso  de ser necesario , hacer  la gestión ante la autoridad  administrativa para lograr  la afiliación  al sistema  general de seguridad social">Realizar  la verificación  de afiliación  al sistema general</option>
 
     <option value="Realizar las valoraciones iniciales  de nutrición, psicología, trabajo social y demás   áreas acorde con la población  atendida  y talento humano requerido">Realizar las valoraciones iniciales  de nutrición</option>
 
     <option value="Realizar solicitud  y asistencia a las citas  para las valoraciones  iniciales en salud odontológica  y demás que se requieran.">Realizar solicitud  y asistencia a las citas</option>
 
     <option value="Acudir  de manera inmediata al punto de salud, cuando  el niño, niña o adolecente requiera atención  por urgencias">Acudir  de manera inmediata al punto de salud</option>
 
	  <option value="Realizar la solicitud y asistencia a los controles de crecimiento y desarrollo  y de control del joven, a través  del sistema de salud,  acorde  con la resolución 412 del 2000, y sus modificaciones">Realizar la solicitud y asistencia a los controles</option>
 
	   <option value="Suministrar la alimentación diaria, cumpliendo  con el 100%  de las recomendaciones, acode  con lo establecido  por el instituto colombiano de  bienestar familiar">Suministrar la alimentación diaria</option>
	    <option value="Realizar la orientación  y acompañamiento  inicial  en hábitos  de cuidado y auto cuidado">Realizar la orientación  y acompañamiento</option>
		 <option value="Explorar e identificar en las valoraciones iniciales, hábitos  de riesgo   de los niños, las niñas, adolescentes  y sus familias   o redes vinculare de apoyo  con respecto al consumo de sustancias  psicoactivas, salud sexual  y reproductiva">Explorar e identificar en las valoraciones iniciales</option>
		  <option value="Explorar e identificar  las percepciones  de  los  niños, las niñas  y adolescentes  con respecto a la  importancia  del entorno   y el cuidado del medio a ambiente">Explorar e identificar  las percepciones  de  los  niños</option>
    </select>
 
    <select id="secondlist" multiple="multiple" NAME ="CNO[]">
 
   </select>
   </div>
<div>
 
</div>
   <div>
    <input type="button" value="Añadir a la segunda lista"
     onclick="AddToSecondList();" />
    <input type="button" value="Quitar item de la segunda lista"
     onclick="DeleteSecondListItem();" />
	  <input type="SUBMIT" value="dibujar campos "
     onclick="return total_val()" />
 
	  <input type="submit" value="enviar" >
 
   </div>
 
 
 
  </form>
 </body>
</html>
 
 
<?php
 
$DO=$_POST['CNO'];
for ($i=0;$i<count($DO);$i++)
{
echo "<br> SDSD " . $i . ": " . $DO[$i];
}
 
?>
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