Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Agregar evento a checkbox cuando lo deselecciono

Estas en el tema de Agregar evento a checkbox cuando lo deselecciono en el foro de Frameworks JS en Foros del Web. Hola pueblo, tengo este script con el que cargo una página externa: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original < script type = "text/javascript" > ...
  #1 (permalink)  
Antiguo 01/06/2010, 20:00
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 1 mes
Puntos: 832
Agregar evento a checkbox cuando lo deselecciono

Hola pueblo, tengo este script con el que cargo una página externa:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. var http_request = false;
  3. function makePOSTRequest(url, parameters) {
  4.     http_request = false;
  5.     if (window.XMLHttpRequest) {
  6.         http_request = new XMLHttpRequest();
  7.         if (http_request.overrideMimeType) {
  8.             http_request.overrideMimeType('text/html');
  9.         }
  10.     } else if (window.ActiveXObject) {
  11.         try {
  12.             http_request = new ActiveXObject("Msxml2.XMLHTTP");
  13.         } catch (e) {
  14.             try {
  15.                 http_request = new ActiveXObject("Microsoft.XMLHTTP");
  16.             } catch (e) {}
  17.         }
  18.     }
  19.     if (!http_request) {
  20.         alert('Cannot create XMLHTTP instance');
  21.         return false;
  22.     }
  23.     http_request.onreadystatechange = alertContents;
  24.     http_request.open('POST', url, true);
  25.     http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  26.     http_request.setRequestHeader("Content-length", parameters.length);
  27.     http_request.setRequestHeader("Connection", "close");
  28.     http_request.send(parameters);
  29. }
  30.  
  31. function alertContents() {
  32.     if (http_request.readyState == 4) {
  33.         if (http_request.status == 200) {
  34.             result = http_request.responseText;
  35.             document.getElementById('opciones').innerHTML = result;            
  36.         } else {
  37.             alert('Hubo un problema con la operación.');
  38.         }
  39.     }
  40. }
  41.  
  42. function get(obj) {
  43.   var poststr = "port_post=" + encodeURI( document.getElementById("port24").value );
  44.   makePOSTRequest('http://www.sitio.com/inc/metaform.php?opcion='+ encodeURI( document.getElementById("port24").value ), poststr);
  45. }
  46. </script>

En el HTML se encuentra este checkbox:

Código HTML:
Ver original
  1. <input type="checkbox" name="port_post[]" value="24" id="port24" onclick="get(this.parentNode);"  />

Y luego una capa donde aparece el contenido de la página externa. Esta capa tiene datos predeterminados que son reemplazados por los nuevos:

Código HTML:
Ver original
  1. <div id="opciones">Mi contenido predeterminado</div>

Mi duda: Cuando selecciono el checkbox se cargan los datos externos sin problemas, pero quisiera que al deseleccionarlo se vuelva a cargar el contenido predeterminado ¿cómo puedo proceder?.
  #2 (permalink)  
Antiguo 02/06/2010, 12:58
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 6 meses
Puntos: 126
Respuesta: Agregar evento a checkbox cuando lo deselecciono

Hola

Se me ocurre lo siguiente a ver que parece

Creas dos div

Cita:
<div id="opciones1" style="display:block;">Mi contenido predeterminado</div>
<div id="opciones2" style="display:none;>Nuevo contenido</div>
Uno (contenido predeterminado) en block y el otro (contenido nuevo) none

Por otro lado en la llamada a la función get le añadimos otro argumento

Cita:
<input type="checkbox" name="port_post[]" value="24" id="port24" onclick="get(this.parentNode, this.checked);" />
con lo cual sabes si el checkbox está en true o false

Ahora en la función get

Código Javascript:
Ver original
  1. function get(obj, bol) {
  2. if(bol) { // si es true, prosigue
  3.   var poststr = "port_post=" + encodeURI( document.getElementById("port24").value );
  4.   makePOSTRequest('http://www.sitio.com/inc/metaform.php?opcion='+ encodeURI( document.getElementById("port24").value ), poststr);
  5. } else { // si es false mostramos el div con el contenido predeterminado
  6. document.getElementById('opciones2').style.display = 'none';
  7. document.getElementById('opciones1').style.display = 'block';
  8. }

Por último, si se llega a la función alertContents cargamos la respesta y cambiamos el display de los div

Código Javascript:
Ver original
  1. function alertContents() {
  2. ....
  3. if (http_request.status == 200) {
  4. result = http_request.responseText;
  5. document.getElementById('opciones2').innerHTML = result;
  6. document.getElementById('opciones1').style.display = 'none';
  7. document.getElementById('opciones2').style.display = 'block';

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #3 (permalink)  
Antiguo 02/06/2010, 18:11
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 1 mes
Puntos: 832
Respuesta: Agregar evento a checkbox cuando lo deselecciono

Oye me parece una excelente solución la de alternar block y none . La probaré ahora mismo y te comento. Gracias Adler.

Etiquetas: ajax, checkbox, httprequest, eventos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:57.