Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Evento onclick dentro de javascript

JavaScript - Evento onclick dentro de javascript

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Evento onclick dentro de javascript

Publicado por Sebastian (6 intervenciones) el 25/01/2016 06:04:08
Saludos, espero me puedan ayudar.

Necesito utilizar el evento onclick de un type checkbox que ha sido agregado mediante javascript


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$('#nuevo').click(function() {
 
//creo una nueva fila

 
 var idusu = "<?php echo $idusuariologeado; ?>" ;
var fila='<tr><td>&nbsp;</td>'+
 
'<td><input name="idiomas_nombre[]" type="text" placeholder="Idioma" class="form-control input-md"  /><input  name="idiomas_usu[]" type="text" value="'+ idusu + '" > </td>'+
 
 '<td><input  name="" type="checkbox" value="1" ><input type="hidden" name="idiomas_suficiencia[]" value="" /></td>'+
 
'<td><input id="cb2"  name="" type="checkbox" onclick="updatebox()" value="1" /><input type="text" name="idiomas_escritura[]"  /></td>'+
 
'<td><input id="cb3"  name="" type="checkbox" value="1"  ><input type="hidden" name="idiomas_lectura[]" value="1" /></td>'+
 
'<td align="center"><input id="cb4" name="" type="checkbox" value="1" ><input type="text" name="idiomas_hablado[]" value="1" /></td></tr>';
 
 
//añado fila a la tabla

$('#tab_logic').append(fila);
 
 
});

Necesito utilizar el onclick para llamar a otra función que me permita hacer los siguiente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function updatebox()
{
    var textbox = document.getElementById("idiomas_escritura");
    var values = [];
 
    if(document.getElementById('cb2').checked) {
        values.push("1");
    }
 
    if(document.getElementById('cb3').checked) {
        values.push("1");
    }
 
    if(document.getElementById('cb4').checked) {
        values.push("1");
    }
 
    textbox.value = values.join(" ");
}

Espero haberme podido explicar y ojala me puedan ayudar.

Gracias...
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 Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Evento onclick dentro de javascript

Publicado por Vainas (258 intervenciones) el 25/01/2016 11:21:02
Buenas:

Primero que nada para poder hacer este tipo de cosas en conveniente que no crees tus td's, tr's, inputs y demas en forma de string sino que uses funciones de jQuery o js para crearlos:

1
2
3
4
5
6
7
var fila = $('<tr></tr>');
var columna = $('<td></td>');
var input = $('<input type="checkbox" />')attr({name: 'uno', value: '1', id:'cb2', ... agrega de la misma forma mas atributos si es necesario});
...
columna.append(input);
file.append(columna);
$('#tab_logic').append(fila);

Esto por un lado (seria mas o menos asi).

Por otro lado no agregamos al input el evento onclick sino que usamos las funciones de jQuery para agregarlo y lo hacemos de una manera un poco diferente para que funcione.

El truco esta en agregar el evento click al elemento padre que no sea ni borrado ni modificado (en este caso podria ser tab_logic) de la siguente forma:

1
2
3
$('#tab_logic').on('click', '#cb2', function(event){
 //Esto se ejecuta cuando haces click en el checbox

});

El truco es como he dicho antes agregar el onclick a un elemento padre inamobible (tab_logic) y pasarle como segundo parametro a on el elemento que va a responder a tal click (en este caso el id = cb2).

Espero que lo entiendas.

Saludos.
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
sin imagen de perfil

Evento onclick dentro de javascript

Publicado por Sebastian (6 intervenciones) el 25/01/2016 15:45:32
Muchas gracias por tu respuesta. Espero me puedas ayudar.

Utilizo las funciones jquery como me recomiendas para crear la fila

1
2
3
4
5
6
7
8
9
10
11
12
$('#nuevo').click(function() {
 var fila = $('<tr></tr>');
var columna = $('<td></td>');
var input = $('<input type="checkbox" />')attr({name: 'uno', value: '1', id:'cb2' });
 
//añado fila a la tabla

 
columna.append(input);
fila.append(columna);
$('#tab_logic').append(fila);
 
});

Pero no logro crear ninguna fila, además tengo una duda como lograría agregar otro type=textbox luego del checkbox en el input

Ojala me puedas ayudar. Gracias de antemano...
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
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Evento onclick dentro de javascript

Publicado por Vainas (258 intervenciones) el 25/01/2016 20:37:07
Buenas de nuevo:

El codigo le faltaban algunas cosas para funcionar bien. Te lo he dejado aqui para que lo pruebes directamente. Si quieres agregar mas inputs solo tienes que volver a asignar a la variable inputs un objeto que cree lo de dentro y luego usar el append. Es decir repetir este codigo varias veces:

1
2
3
4
5
var input = $('<input type="text" />').attr({name: 'xxx'});
columna.append(input);
 
var input = $('<input type="text" />').attr({name: 'yyy'});
columna.append(input);

Luego como has ido añadiendo cada input creado a la columna lo que tienes que hacer es añadir esa columna a una fila.

Ten en cuenta que al crear un elemento html (por ejemplo los inputs), hay cosas que no deberias repetir:

1. El name no deberia repetirse a menos que sea un checbox o sea un array. en php se envian asi. "nombre[]"
2. El id no deberia ser el mismo para NINGUN elemento del html.

El codigo: https://jsfiddle.net/qvqffsod/

Saludos.
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
sin imagen de perfil

Evento onclick dentro de javascript

Publicado por Sebastian (6 intervenciones) el 26/01/2016 03:37:15
De verdad muchas gracias por ayudarme.

Puedo añadir filas, pero en mi caso en el evento updatebox() quiero insertar en cada textbox el valor segun este marcado o no cada checkbox

(Si checked = true -> value = '1' else -> value = ' ' )

1
2
3
4
5
6
7
8
9
10
function updateBox(event){
	var textbox = document.getElementById("list1");
			var values = [];
 
			if(document.getElementById('cb2').checked) {
        values.push("1");
    }
 
	 textbox.value = values.join(" ");
}

He logrado hacerlo solo con el primer textbox y checkbox generado, como puedo utilizar los id en este caso??.


Aquí el código: https://jsfiddle.net/rko41z88/1/



Ojala me puedas ayudar. Gracias de antemano...
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
sin imagen de perfil

Evento onclick dentro de javascript

Publicado por Sebastian (6 intervenciones) el 27/01/2016 00:13:26
Saludos, he logrado solucionar el problema, además de adaptarlo a mis necesidades.

Les comparto el código:

Html

1
2
3
4
5
6
<table id="tab_logic">
 
</table>
<button id="boton" type="button">Add!
<button id="boton02" type="button">Eliminar!
</button>

Javascript

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
function agregar(){
var fila = $('<tr></tr>');
var columna = $('<td></td>');
var columna2 = $('<td></td>');
var columna3 = $('<td></td>');
var columna4 = $('<td></td>');
var columna5 = $('<td></td>');
 
var input =
$('<input type="text" />').attr({name: 'idiomas_usu[]', id:'list'});
columna.append(input);
input = $('<input type="text" />').attr({name: 'dos', class:'cb2', id:'cb' });
columna.append(input);
input = $('<input type="text" />').attr({name: 'idiomas_usu[]', id:'list1'});
columna2.append(input);
input = $('<input type="checkbox" />').attr({name: 'dos', class:'cb2', id:'cb2' });
columna2.append(input);
input = $('<input type="text" />').attr({name: 'idiomas_usu[]', id:'list2'});
columna3.append(input);
input = $('<input type="checkbox" />').attr({name: 'dos', class:'cb2', id:'cb3' });
columna3.append(input);
input = $('<input type="text" />').attr({name: 'idiomas_usu[]', id:'list3'});
columna4.append(input);
input = $('<input type="checkbox" />').attr({name: 'dos', class:'cb2', id:'cb4' });
columna4.append(input);
input = $('<input type="text" />').attr({name: 'idiomas_usu[]', id:'list4'});
columna5.append(input);
input = $('<input type="checkbox" />').attr({name: 'dos', class:'cb2', id:'cb5' });
columna5.append(input);
fila.append(columna);
fila.append(columna2);
fila.append(columna3);
fila.append(columna4);
fila.append(columna5);
$('#tab_logic').append(fila);
}
 
function updateBox(event){
    var input = $(this).prev();
            if(this.checked) {
        input.val("1");
        }
      else {
        input.val("");
      }
}
$("#boton02").click(function(){
 
                // Eliminamos la ultima columna

                $("#tab_logic tr:last").remove();
 
        });
$('#boton').click(agregar);
$('#tab_logic').on('click', '.cb2', updateBox);

Aquí el código en funcionamiento: https://jsfiddle.net/rko41z88/5/
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