Multicheckbox ajax

**z.cristiano** · 04-07-2011, 11:38

Salve a tutti, sto programmando, mi sto esercitando AJAX e ho un piccola difficoltà, riguarda il multicheckbox, in senso che che puntassi 6 checkbox deve apparire sul DIV i valori selezionati, esempio:
1
2
3
4
5
6

se puntassi la 1 2 6, sul div deve apparire
Selezionati: 1 - 2 - 6

Ecco il codice, dimmi cosa ho sbagliato?

<script>

function visualizza()
{

var id = document.getElementsByName('id[]');

var risposta = document.getElementById('risposta');

for(i = 0; i < id.length; i++)
{

var prova = id[i].value;

}

risposta.innerHTML = "Selezionati: "+ prova;

}

</script>

<form>
<input type="checkbox" name="id[]" id="id[]" value="1" onclick="visualizza();">
<input type="checkbox" name="id[]" id="id[]" value="2" onclick="visualizza();">
<input type="checkbox" name="id[]" id="id[]" value="3" onclick="visualizza();">
<input type="checkbox" name="id[]" id="id[]" value="4" onclick="visualizza();">
<input type="checkbox" name="id[]" id="id[]" value="5" onclick="visualizza();">
<input type="checkbox" name="id[]" id="id[]" value="6" onclick="visualizza();">

<div id="risposta" name="risposta"></div>

</form>

**cavicchiandrea** · 04-07-2011, 11:45

Gli ID devono essere univoci, prova cosi.

codice:

<script>
function visualizza()
{
var prova = "";
var box = document.getElementsByTagName('input');
var risposta = document.getElementById('risposta');
for(i = 0; i < box.length; i++)
{
if(box[i].type=='checkbox' && box[i].checked){
prova += box[i].value;
}
}
risposta.innerHTML = "Selezionati: "+ prova;

}
</script>

**carlomarx** · 04-07-2011, 11:52

occhio che gli id devono essere univoci!

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagina vuota</title>
<script type="text/javascript">
function visualizza() {
	var sList = "", aChBxList = document.tuoForm.tuoName, oRisposta = document.getElementById("risposta");
	for (var iChBxId = 0; iChBxId < aChBxList.length; iChBxId++) {
		if (aChBxList[iChBxId].checked) { sList += ", " + aChBxList[iChBxId].value; }
	}
	oRisposta.innerHTML = "Selezionati: " + (sList || "@@nessuno").slice(2) + ".";
}
</script>
</head>

<body onload="visualizza();">

<form name="tuoForm">
<input type="checkbox" name="tuoName" id="tuoId1" value="1" onclick="visualizza();" />
<input type="checkbox" name="tuoName" id="tuoId2" value="2" onclick="visualizza();" />
<input type="checkbox" name="tuoName" id="tuoId3" value="3" onclick="visualizza();" />
<input type="checkbox" name="tuoName" id="tuoId4" value="4" onclick="visualizza();" />
<input type="checkbox" name="tuoName" id="tuoId5" value="5" onclick="visualizza();" />
<input type="checkbox" name="tuoName" id="tuoId6" value="6" onclick="visualizza();" />

<div id="risposta"></div>
</form>

</body>
</html>

@cavicchiandrea
ho visto ora la tua soluzione... non è una buona idea prendere tutti gli <input type="checkbox />. Ci possono essere più gruppi di checkbox separati tra loro nello stesso form o, peggio ancora, in form separati. Il tuo script li appiattisce in un'unica lista. Già mi figuro che un'eventuale checkbox di un form di log-in eventualmente presente nella pagina, quelle della serie "Ricorda nome utente", verrebbe anch'essa coinvolta e listata tra le checkbox selezionate dell'altro form

**z.cristiano** · 04-07-2011, 12:30

Grazie mille...FUNZIONA!!!
:-D

**carlomarx** · 04-07-2011, 13:32

Figurati

P.S. Quest'altro metodo è più elegante. Ma non funziona coi vecchi browser. Ciao

:

codice:

function visualizza() {
	document.getElementById("risposta").innerHTML = "Selezionati: " + (Array.prototype.filter.call(document.tuoForm.tuoName, function(vEl1) { return vEl1.checked; }).map(function(vEl2) { return vEl2.value; }).join(", ") || "nessuno") + ".";
}

**z.cristiano** · 16-08-2011, 21:57

Ciao, mi sono accorto di una cosa che non funziona e non capisco perchè..

Allora, sul FORM abbiamo 10 righe di checkbox, se puntassi tutte 10 checkbox e clicco cancella, cancella tutto mentre se c'è una sola riga non funziona e non cancella..

Cioè, pià di un checkbox funziona, se c'è un solo checkbox non funziona..

Perchè?
Sto usando ajax per cancellare ed ecco il codice

function cancella()
{

var aChBxList = document.form1.id_pubblicare;

var codice_js = document.getElementById("codice_js").value;

for(var iChBxId = 0; iChBxId < aChBxList.length; iChBxId++)
{

if(aChBxList[iChBxId].checked)
{

// code for IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest)
{

xmlhttp4 = new XMLHttpRequest();

} else {

// code for IE6, IE5
xmlhttp4 = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp4.onreadystatechange = function()
{

if(xmlhttp4.readyState == 1)
{

document.getElementById("avvisi").innerHTML = "Attendere";

} else if(xmlhttp4.readyState == 4 && xmlhttp4.status == 200)
{

//alert(xmlhttp4.responseText);

lista_programmi();

tabella_programmi();

document.getElementById("avvisi").innerHTML = "";

}

}

xmlhttp4.open("GET", "controls_php/permessi/cancella_programma.php?id_pubblicare="+ aChBxList[iChBxId].value +"&codice="+ codice_js, true);

xmlhttp4.send();

}

}

}

**cavicchiandrea** · 16-08-2011, 22:08

Potrebbe essere perché non invii un array (elimina.php?id=1,2,3,4) ma un solo dato (elimina.php?id=1) io verifico lato server il dato che gli arriva e modifico la query

**z.cristiano** · 16-08-2011, 22:26

E quindi?

Come devo sistemare in modo tale che eliminasse un'array alla volta?
Cioè anzichè elimina.php?id=1,2,3,4 in elimina.php?id=1 poi elimina.php?id=2 ?

**cavicchiandrea** · 16-08-2011, 22:48

E quindi cosa?
Inizialmente devi capire con certezza se il problema è quello, la mia è una ipotesi.
Una volta appurato lo devi gestire lato server se la querystring è un array fai un delete "massivo" altrimenti un delete "singolo" per questo chiedi in php

Discussione: Multicheckbox ajax

Strumenti discussione

Ricerca discussione

Visualizza

Multicheckbox ajax

Help..

Permessi di invio