[SOLUCIONADO] Agregar y Quitar valor de Chekbox en un Iframe

nelsonjpg23 · #1 (**permalink**) 02/05/2014, 11:26

tengo un pequeño problema con una funcion en javascript que quiero resolver y de tanto buscar no encontre forma de hacerlo o guiarme.

Tengo 2 checkbox y un iframe...

al chequear una de las casilla me aparece el valor en el iframe y cuando desmarco se borra

pero el problema existe cuando selecciono una serie de casillas ya que necesito que si el usuario desmarca alguna de las opciones solo se borre el valor de la casilla desmarcada y en este ejemplo se borran ambos y no es lo q necesito

el ejemplo del que me guíe lo hicieron a traves de un textarea y funciona bien solo borra el valor desmarcado

sera que me pueden ayudar a resolver mi pequeño problema?

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script>
function submit_form(){

	var theForm = document.getElementById("myform");
	theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML;
	theForm.submit();


}
     function agregar_columna(chexbox){ 
        if  (chexbox.checked){ 
           window.frames['richTextField'].document.body.innerHTML += chexbox.value = ((chexbox.value != '')? ' ':' ')+chexbox.value;
		  	
			//window.frames['richTextField'].document.body.innerHTML = chexbox.value;
        } 
        else{ 
		
         
		 window.frames['richTextField'].document.body.innerHTML = chexbox.value.replace( new  RegExp(chexbox.value,"g" ),''). replace( /^,*/ ,'');
		  
	
        }  
      }

</script>
</head>

<body>
<form  name="myform" id="myform" method="post">
<input type="checkbox" value="Nombre" name="chex[]" onChange="agregar_columna(this)"/>
<input type="checkbox" value="Fecha" name="chex[]" onChange="agregar_columna(this)"/>
<input type="checkbox" value="Apellido" name="chex[]" onChange="agregar_columna(this)"/>
<br/>
<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14" vale=""></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
<br/>
<input name="myBton" type="button" value="Submid Data" onClick="javascript:submit_form();">
</form>
</body>
</html>

Alexis88 · #2 (**permalink**) 02/05/2014, 12:47

Creo que sería más sencillo si utilizaras un array que almacene los valores de los checkbox seleccionado y cada vez que se des-seleccione uno, se retira el valor correspondiente del array. Al final, muestras el contenido del array en el <iframe> uniendo a sus valores con el método join.

Código Javascript:

Ver originalvar iframe = window.frames.richTextField,
    content = [];
function agregar_columna(checkbox){
    var position = content.indexOf(checkbox.value);
    if (position > -1)
        content.splice(position, 1);
    else
        content.push(checkbox.value);
    
    iframe.document.body.innerHTML = content.join(', ');
}

DEMO

Saludos

nelsonjpg23 · #3 (**permalink**) 02/05/2014, 14:08

MIL GRACIAS Alexis88 realmente soy novato en Javascript y no tenia idea de trabajar con Iframes sin embargo guiandome por ejemplos fue que pude que funcionara un 60% pero de verdad muchas gracias