AJAX y Multiple CheckBOX

nicostone · #1 (**permalink**) 01/06/2010, 08:02

Hola amigos, estoy haciendo un sitio y en un momento tengo que elimnar unos registros que que selecciona el usuario por unos check box que se generan automaticamente, mi problema viene que como hacer la query que luego envio por el metodos POST utilizando AJAX, en visto algo en el foro pero nada me ha funcionado y no puedo encontrar solucion, asique por favor les pido un ayuda.

El Id es el Id del registro se genera uno por cada uno de los registros, lo hago con un foreach, digamos algo asi: foreach ($ids as $id), esto esta bien ya que veo los Ids y estan perfectos, se los digo como para que se den un idea del problema

Código HTML:

<td><input name="idsEliminar[]" id="idsEliminar[]" type="checkbox"  value="<?php echo $id; ?>" /></td>

mi problema esta en como formo la query, este seria mi funcion de AJAX:
ACLARO que soy muy novato en javascripts

tambien les digo que van a ver un funcion dameElementoPorId esa funcion no es el problema ya que la he usado miles de veces.

Código:

function cargaDivConPOSTEliminar(url, id_contenedor){
    var pagina_requerida = false;
	if (window.XMLHttpRequest) {// Si es Mozilla, Safari etc
		pagina_requerida = new XMLHttpRequest();
	}else if (window.ActiveXObject){ // pero si es IE
		try {
			pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e){ // en caso que sea una versi�n antigua
			try{
			pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){}
		}
	}
	else
		return false;
		pagina_requerida.onreadystatechange=function(){ // funci�n de respuesta
		cargarpagina(pagina_requerida, id_contenedor)
	}

	pagina_requerida.open('POST', url, true); // asignamos los m�todos open y send
	pagina_requerida.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        var checks = dameElementoPorId("idsEliminar[]");
        var checkboxes = [];
        var flag = true;
        

        for(var i = 0; i < checks.length; i++ ) {
            if(checks[i].checked && flag) {
                checkboxes.push(checks[i].name + "=" + checks[i].value);
                flag=false;
            }else if (checks[i].checked){
                checkboxes.push("&" + checks[i].name + "=" + checks[i].value);
            }
        }

        var query = "IdsEliminar[]" + checkboxes;

        pagina_requerida.send(query);
}

tambien intente con este codigo que encontre en el foro, pero me retorna el alert vacio:

Código:

var checks = dameElementoPorId("idsEliminar[]");
var checkboxes = [];
for(var i = 0; i < checks.length; i++ ) {
      if(checks[i].checked) {
            checkboxes.push(checks[i].name + "=" + checks[i].value);
      }
}
 
alert(checkboxes.join('&'));

Por favor si alguien me puede ayudar estaria muy agradecido.

Desde ya gracias por tomarse el tiempo de leer mi post.

Gracias y Saludos.

NicoStone.

Adler · #2 (**permalink**) 01/06/2010, 08:13

Hola

Estudia y prueba con esta función

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
function valores(f, cual) {
 todos = new Array();
 for (var i = 0, total = f[cual].length; i < total; i++)
   if (f[cual][i].checked) todos[todos.length] = f[cual][i].value;
  return todos.join(".");
}
</script>
</head>
<body >
<form>
<input name="t[]" type="checkbox" value="0000" /> 
<input name="t[]" type="checkbox" value="1111" /> 
<input name="t[]" type="checkbox" value="2222" /> 
<input name="t[]" type="checkbox" value="3333" /> 
<input name="t[]" type="checkbox" value="4444" /> 
<input name="t[]" type="checkbox" value="5555" /> 
<button onclick="alert(valores(this.form, 't[]'))" >mostrar</button>
</form>
</body>
</html>

Suerte

cesarpunk · #3 (**permalink**) 01/06/2010, 09:12

Bueno, yo también tengo ese problema de usar el ajax en los checkboxes, por ejemplo tengo el checkbox:

Código:

<input type="checkbox" name="doc[]" value="<?php echo $id; ?>" />

Bien y al momento de ejecutar mi funcion ajax, me valida si es que ninguno esta seleccionado y normalmente obtiene los valores de 2 a + checks, pero no me valida si es que selecciono 1 checkbox, por lo que tuve que hacer una condicional para validar:

Código:

function Validachecks(){
	var c = document.getElementById('midiv');
	var registros = document.formulario.registros.value;
	
	var checkboxes = new Array();
	var arrClaves = new Array();
	j=0;ff=0;
	
	if(registros=='1'){
		var arr_msg = document.formulario["doc[]"].value;
		arrClaves[j]=arr_msg;
		checkboxes[ff]="&doc[]="+arrClaves[j];
		
		if(!document.registros["doc[]"].checked){

			var alerta = alert("Debe marcar los que desee eliminar");
			return false;	
		}
	}
	else{
	
		seleccionado=false;
		
		for(i=0;i < document.formulario["doc[]"].length; i++){
			if(document.formulario["doc[]"][i].checked){
	
				var arr_msg = document.formulario["doc[]"][i].value;
				arrClaves[j]=arr_msg;
				checkboxes[ff]="&doc[]="+arrClaves[j];
				ff++;
				j++;
				seleccionado=true;	
			}
		}
		
		if(!seleccionado){
				var alerta = alert("Debe marcar los que desee eliminar");
			return false;
		}

	}

	ajax=nuevoAjax();
	c.innerHTML = 'cargando...';
	ajax.open("POST", "server.php",true);
	ajax.onreadystatechange=function(){
		if (ajax.readyState==4) {
			c.innerHTML = ajax.responseText
		}
	}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	ajax.send("checkboxes="+checkboxes+"&control=enviado");
}

Y en el servidor recibo los valores con el $checkbox=$_POST['doc'];
Es un método algo desesperado pero funciona

Ahora, como son un aficionado al framework prototype puedo hacer un:

Código:

$(formulario).request();

Y valido del lado del servidor, que creo que es más sencillo. Aunque espero que alguien pueda colaborar con una función para validar checkboxes en prototype que he buscado hasta en los foros de google y no he tenido exito. Espero que el ejemplo te ayude. Suerte.

nicostone · #4 (**permalink**) 01/06/2010, 09:51

Gracias por las respuestas .... intentare y les comento.

Gracias nuevamente.

Bueno lo he estado viendo y lo entiendo asi como entendi el codigo que mostre que saque de este foro, pero no logro hacer que funcion

primero intente un simple cambio para adaptarlo a lo forma en que vengo trabajando y el resultado es el siguiente, no me muestra el ALERT pero veo que van los datos por la URL.

Código HTML:

<html>
<head>
<script type="text/javascript">
function valores() {
    // Aqui esta el cambio y no me funcion lo veo por la URL pero no me tira el alert
    cual = document.getElementsById('t[]');
    f= document.getElementsById('formA');
 todos = new Array();
 for (var i = 0, total = f[cual].length; i < total; i++)
   if (f[cual][i].checked) todos[todos.length] = f[cual][i].value;
   return todos.join("&");
}
</script>
</head>
<body >
    <form name="formA" id="formA" >
        <input name="t[]" id="t[]" type="checkbox" value="0000" />
        <input name="t[]" id="t[]" type="checkbox" value="1111" />
        <input name="t[]" id="t[]" type="checkbox" value="2222" />
        <input name="t[]" id="t[]" type="checkbox" value="3333" />
        <input name="t[]" id="t[]" type="checkbox" value="4444" />
        <input name="t[]" id="t[]" type="checkbox" value="5555" />
        <button onclick="alert(valores())" >mostrar</button>
    </form>
</body>
</html>

y despues quise modificar mi funcion para ver si podia hacer funcionar correctamente, resultado: envia algo porque va a la otra pagina pero, me dice que no llega ningun id para eliminar.

Código:

function cargaDivConPOSTEliminar(url, id_contenedor){
    var pagina_requerida = false;
	if (window.XMLHttpRequest) {// Si es Mozilla, Safari etc
		pagina_requerida = new XMLHttpRequest();
	}else if (window.ActiveXObject){ // pero si es IE
		try {
			pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e){ // en caso que sea una versi�n antigua
			try{
			pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){}
		}
	}
	else
		return false;
		pagina_requerida.onreadystatechange=function(){ // funci�n de respuesta
		cargarpagina(pagina_requerida, id_contenedor)
	}

	pagina_requerida.open('POST', url, true); // asignamos los m�todos open y send
	pagina_requerida.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        var todos = new Array();
        var cual = dameElementoPorId("idsEliminar[]");
        for (var i = 0, total = cual.length; i < total; i++)
            if (cual[i].checked) todos[todos.length] = cual[i].value;

            pagina_requerida.send(todos.join("&"));
}

he intentado de varias maneras y nada de nada.

Bueno gracias nuevamente y saludos.

NicoStone.

Adler · #5 (**permalink**) 01/06/2010, 12:52

Hola

Prueba ahora. Fíjate como ha de quedar arreglo a los cambios que hicistes

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
function valores() {
    cual = 't[]';
    f= document.formA;
 todos = new Array();
 for (var i = 0, total = f[cual].length; i < total; i++)
   if (f[cual][i].checked) todos[todos.length] = f[cual][i].value;
   return todos.join("&");
}
</script>
</head>
<body >
    <form name="formA" id="formA" >
        <input name="t[]" id="t[]" type="checkbox" value="0000" />
        <input name="t[]" id="t[]" type="checkbox" value="1111" />
        <input name="t[]" id="t[]" type="checkbox" value="2222" />
        <input name="t[]" id="t[]" type="checkbox" value="3333" />
        <input name="t[]" id="t[]" type="checkbox" value="4444" />
        <input name="t[]" id="t[]" type="checkbox" value="5555" />
        <button onclick="alert(valores())" >mostrar</button>
    </form>
</body>
</html>

Suerte

nicostone · #6 (**permalink**) 02/06/2010, 13:19

Muchas gracias muchachos, gracias Adler, gracias a tu codigo lo pude sacar, luego posteo la solucion completa para que quede asentada en el foro.

Muchas Gracias de nuevo y saludos.

NicoStone.

gregory1012 · #7 (**permalink**) 02/09/2010, 09:37

Disculpa, yo tengo un problema parecido, los valores de los checkbox en ves de mostrarlos desearia enviarlos a mi cogigo de php..
http://www.forosdelweb.com/f77/capturar-valores-checkbox-envialos-por-email-838720/

nicostone · #8 (**permalink**) 28/09/2010, 08:22

Aca va la solucion que varios me pidieron, tambien les tengo que comentar que yo personalmente me pase JQuery y que este codigo tiene un problema cuando el checkbox hay un solo checkbox ya que si hay uno solo no lo pasa como un array sino como dato, le falta esa partecita.
Tambien vale la aclaracion que este codigo solo pasa los que fueron chekeados, como se hacen normalmente.

fucntion miFunction(){
cual = 'idsProveedores[]';
f= document.formFiltro;
todos = new Array();
for (var i = 0, totalIdsProveedores = f[cual].length; i < totalIdsProveedores; i++)
if (f[cual][i].checked) todos[todos.length] = "idsProveedores[]=" + f[cual][i].value;

array = todos.join("&");
}
Espero que se entienda, saludos.

NicoStone.