Contare quanti elementi con un id ci sono

**0-c00l** · 26-07-2011, 17:34

Salve, ho la necessità di scoprire tramite javascript quanti elementi con l' id "nuovo" ci sono. Praticamente ho un form dove al click vengono aggiunti input file con l' id "nuovo", ma se non c'è nessun input file con quell' id il background di un button con id "rimuovi" diventa rosso. Ho provato a scrivere così, ma ora non funzionano piu' nemmeno le funzioni aggiungi e rimuovi:

codice:

 <style type="text/css">
input[type="submit"], input[type="button"] {
border: 1px solid black;
font-weight: bold;
background: white;
}

input[type="submit"]:hover, input[type="button"]:hover {
background: silver;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
function aggiungi () {
    $("#input_file").clone().attr("id","nuovo").appendTo("#form");
}

function rimuovi () {
	$("#nuovo").remove();
}

window.onload=function conta() {
var select = document.getElementsById('nuovo');
for(var i=0; i<select.length; i++){
var count++;
}

if (count == 0) {
document.getElementById('rimuovi').style.background="red";
}
 }
</script>
<form id="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<input type="button" value="Aggiungi" onClick="aggiungi(); conta();" /> <input type="button" value="Rimuovi" id="rimuovi" onClick="rimuovi(); conta();" /> <input type="submit" value="Carica" name="carica" />


<div id="input_file"><input type="file" name="ciao[]" value="Sfoglia.." /></div>
</form>

**ResianTaxidrive** · 26-07-2011, 17:39

non sono in grado di darti nessuna soluzione ma di id con un certo nome dovrebbe per correttezza essercene solo uno; sennò che id è?

**m4rko80** · 26-07-2011, 17:43

Per rigor di logica in codice html non dovrebbero esistere elementi con stesso id.

Piuttosto dai una classe a questi e poi recuperi la lista.
Visto che usi Jquery basterebbe fare:

codice:

var lista_Elementi = $('.nomeclasse').size(); //numero elementi con classe passata

if(lista_Elementi== 0){
 $('#rimuovi').css('background-color', 'red');
}

**0-c00l** · 26-07-2011, 17:43

Hai ragione, ma ho seguito un esempio riportato nel sito, non so se specificando la classe e non l' id sballi qualcosa. ( http://www.html.it/guide/esempi/jque...ulation-4.html )

**m4rko80** · 26-07-2011, 17:49

si può gestire com si vuole, basta capire il meccanismo pero'.

Nell esempio crea un id menu2 la prima volta ma perche' e' un esempio base
Starebbe a te dare il nome in base al calcolo di quanti ne esistono.

**0-c00l** · 26-07-2011, 18:00

Ho provato a modificare così:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
input[type="submit"], input[type="button"] {
border: 1px solid black;
font-weight: bold;
background: white;
}

input[type="submit"]:hover, input[type="button"]:hover {
background: silver;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
function aggiungi () {
    $("#input_file").clone().attr("class","nuovo").appendTo("#form");
}

function rimuovi () {
	$(".nuovo").remove();
}

function conta() {
var lista_Elementi = $('.nuovo').size(); //numero elementi con classe passata

if(lista_Elementi == 0){
 $('#rimuovi').css('background-color', 'red');
} else {
 $('#rimuovi').css('background-color','white');
}
 }
</script>
</head>
<body onLoad="conta();">
<form id="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<input type="button" value="Aggiungi" onClick="aggiungi(); conta();" /> <input type="button" value="Rimuovi" id="rimuovi" onClick="rimuovi(); conta();" /> <input type="submit" value="Carica" name="carica" />


<div id="input_file"><input type="file" name="ciao[]" value="Sfoglia.." /></div>
</form>
</body>
</html>

Ora però ci sono due problemi:

1. Il "rimuovi" con la sua funzione non funzionano più (scusa il gioco di parole);
2. Non funziona più l' effetto hover sull' input button "rimuovi"

Un' altra domanda, se al posto di cambiare il background dell' elemento con id rimuovi, gli volessi attribuire la proprietà: disabled="disabled", come potrei fare?

**m4rko80** · 27-07-2011, 09:00

Ciao, per aggiungere una classe puoi fare cosi':

$("#input_file").clone().addClass("nuovo").appendT o("#form");

Il rimuovi non funziona piu'... probabilmente non viene aggiunta la classe(lo puoi vedere dalla sorgente una volta aggiunta)

Per l'effetto hover mi pare strano, controlla bene il codice o gestiscilo con jquery se vuoi.

Per disabled:
http://jquery-howto.blogspot.com/200...ment-with.html

**0-c00l** · 27-07-2011, 12:17

Se metto class al posto di id mi rimuove tutte le nuove cose aggiunte, dovrò lasciare l' id.. Grazie dell' aiuto

Scusa il disturbo, un' ultima cosa. Per controllare se il primo input file (che ha l' id "first") sia pieno o meno, come faccio? document.nomeform.nomeinput.value ?

Se sì sorge un problema, dovrei controllarlo solo tramite id dato che ha lo stesso nome degli altri input che si potrebbero creare

**0-c00l** · 27-07-2011, 15:14

Ho fatto con document.getElementById('id').value per vedere se è pieno o meno, ma non so come fare in modo che quando cliccano sull' input file per scegliere un file fa il controllo, dovrei metterlo all' evento onBlur?

Discussione: Contare quanti elementi con un id ci sono

Strumenti discussione

Ricerca discussione

Visualizza

Contare quanti elementi con un id ci sono

Permessi di invio