Checkbox e TextArea

[Descendz]

Salve ragazzi,
è da qualche giorn che cerco di metter su uno script che svolga più o meno queste funzioni:

una serie di textarea a oguna della quale corrisponde un checkbox: se il il check viene selezionato il contenuto della textare deve essere cancellato e, in una textare che conta il numero di textarea compilate, deve essere scalato un numero. Al contrario, invece, quando viene immesso un testo in una textarea il checkbox si deve deselezionare e nella casella riepilogativa deve essere aggiunto un numero corrispondente all'area compilata

Sapete darmi una mano!

[Mich_]

Si puo` fare, ma la tua domanda e` troppo generica.

Occorre sapere se i checkbox sono gli unici nel form e se le textarea sono le uniche nel form.
In alternativa (consigliabile) e` dare dei nomi opportuni a checkbox e textarea: ad esempio area0, canc0, area1, canc1, area2, canc2, ...

Poi e` comodo sapere quanti sono i campi (occorre che il server passi l'informazione al JS), e il nome del campo (consigliato un text) con il numero dei campi compilati.

[Descendz]

Originariamente inviato da Mich_
Si puo` fare, ma la tua domanda e` troppo generica.

Occorre sapere se i checkbox sono gli unici nel form e se le textarea sono le uniche nel form.
In alternativa (consigliabile) e` dare dei nomi opportuni a checkbox e textarea: ad esempio area0, canc0, area1, canc1, area2, canc2, ...

Poi e` comodo sapere quanti sono i campi (occorre che il server passi l'informazione al JS), e il nome del campo (consigliato un text) con il numero dei campi compilati.

Provo ad essere più preciso e a rispondere alle tue domande:
I campi textarea all'interno del form non sono unici ma insieme a questi ce ne sono anche altri che non devono essere interessati dallo script.

Il numero dei campi è variabile e vengono inseriti all'interno del form tramite uno script del genere:

Imput numero campi: 
                    <input name="numberc" type="text" id="numTA" size="2">
<input name="button" type="button" onclick="generateTA()" value="ok">

Script Aggiunta Textarea:
<script type="text/javascript">
<!--
function generateTA() {
if (isNaN(document.getElementById('numTA').value)||parseInt(document.getElementById('numTA').value)>20) {
  alert('Il valore deve essere numerico e compreso tra 1 e 20');
return;
 } // if (isNaN(document.getElementById('numTA').value))
 if (document.getElementById('numTA').value != parseInt(document.getElementById('numTA').value)) {
  alert('Il numero deve essere intero');
return;
 } // if (document.getElementById('numTA').value != parseInt(gdocument.etElementById('numTA').value))
 html = "";
 nb = document.getElementById('numTA').value;
 for (i=0;i<nb;i++) {
  idTA    = "ta"+i;
textTA  = '<table wifth="500" border="0" align="center" cellpadding="0" cellspacing="2"><td width="112" height="20" bgcolor="#CCCCCC"><span class="formtext">Colore n°'+i+':</span></td><td height="20" width="388" colspan="5" bgcolor="#CCCCCC" class="formtext"><input name="Color'+i+'" id="'+idTA+'" size="6"</td></tr></table>';
  html   += textTA;
 } // for (i=0;i<nb;i++)
 document.getElementById('container').innerHTML ="";
 document.getElementById('container').innerHTML =html; 
}
//-->
</script>

I campi, che vengono aggiunti dall'utente, hanno tutti lo stesso nome Color(numero) mentre la textarea che ne riepiloga il numero dovrebbe essere quella di imput dello script ossia:

<input name="numberc" type="text" id="numTA" size="2">

[Mich_]

OK ora la cosa e` piu` chiara.

Non vedo la creazione dei checkbox: sono da aggiungere?

  nb = document.getElementById('numTA').value;
  var textTA  = '<table>\n';
  for (i=0;i<nb;i++) {
    var idTA = "ta"+i;
    textTA += '<tr><td class="formtext"> Colore n°'+i+':</td>\n';
    textTA += '  <td class="formarea" colspan="5">';
    textTA += '<input type="text" name="Color'+i+'" id="'+idTA+'" size="6"</td>\n';
    textTA += '  <td><input type="checkbox" name="canc'+i+'" id='+i+'"></tr>\n';
  }
  textTA += '</table>';
  html   = textTA; // non serve!!!
  document.getElementById('container').innerHTML = textTA; 
}

Ho cercato di razionalizzare la cosa: non ha senso e complica la vita fare tante tabelle: la tabella deve essere unica, con varie righe.

Ho anche tolto tutte le istruzioni di formattazione: vanno inserite dentro un CSS, non dentro il codice HTML.

Nota che prima parlavi di textraea, mentre io vedo solo degli input tipo testo.

Comunque prima di tutto occorre sistemare il codice HTML, poi si puo` procedere al controllo.

Verifica se questo codice ti va bene (dovrai ancora farci dei ritocchi).

[Descendz]

Beh si il codice in sostanza è ok solo che ... sopra ti ho riportato il codice che utilizzo attualmente senza le modifiche (quindi senza checkbox) ... permettimi solo una domanda, questo è solo quello che dovrebbe essere paginato perchè di fatto le funzioni di cui parlavo non sono implementate? Giusto?

[Mich_]

questo è solo quello che dovrebbe essere paginato perchè di fatto le funzioni di cui parlavo non sono implementate? Giusto?

Non ti seguo.

Comunque in ogni caso bisogna prima sistemare l'HTML, poi lo script.
Nel tuo caso l'HTML e` generato dinamicamente lato client con JS.

Ma non ha senso scrivere il tag <table> dentro il loop: equivale a generare tante tabelle quante sono le righe.

[Descendz]

Beh capisco ma per esigenze grafiche preferisco fare così ... ma lasciando un momento da parte quello che può essere un loop sapresti passarmi, gentilmente, un esempio di uno script che possa svolgere le funzioni di cui parlavo in precedenza?

Naturalmente grazie della disponibilità!

[Mich_]

OK, ma devo fare una serie di supposizioni:
- che i campi abbiano name="taXX" con XX un numero tra 0 e MAX-1
- che i checkbox abbiano name="cancXX"
- che tutto sia compreso in un unico form
- che il campo dove scrivere il conto si chiami "counter"

function in_key(tt) {
  var n = tt.name.substr(2);
  var cc = tt.form.elements('canc'+n);
  if(cc.checked) {
    cc.checked = false;
    return count(tt.form);
  }
  return false;
}

function clk_chbx(cc) {
  var n = cc.name.substr(4);
  var tt = cc.form.elements('ta'+n);
  if(tt.value.length) {
    tt.value = '';
    return count(cc.form);
  }
  return false;
}
  
function count(ff) {
  var n = 0;
  for(var i=0; i<MAX; i++) {
    if(ff.elements('canc'+i).checked) n++;
  }
  ff.counter.value = MAX-n;
  return true;
}

Le funzioni sono da chiamare con:
<input type="text" name="taXX" onkeyup="in_key(this);">

<input type="checkbox" name="cancXX" onclick="clk_chbx(this);">

[Descendz]

Mi funziona più o meno tutto, non riesco a fare andare solo il campo del contatore ... la funzione che ho tirato fuori è più o meno questa:

<!--
function generateTA() {
if (isNaN(document.getElementById('numTA').value)||parseInt(document.getElementById('numTA').value)-<%=risultato%>>20) {
  alert('Il valore deve essere numerico e compreso tra 1 e 20');
return;
 } // if (isNaN(document.getElementById('numTA').value)) 
if (isNaN(document.getElementById('numTA').value)||parseInt(document.getElementById('numTA').value)<<%=risultato%>) {
  alert('Il valore inserito non può essere minore di <%=risultato%> Per cancellare i colori selezionare la casella corrispondente ');
return;
 } // if (isNaN(document.getElementById('numTA').value)) 
 if (document.getElementById('numTA').value != parseInt(document.getElementById('numTA').value)) {
  alert('Il numero deve essere intero');
return;
 } // if (document.getElementById('numTA').value != parseInt(gdocument.etElementById('numTA').value))
 html = "";
   nb = document.getElementById('numTA').value;
  var textTA  = '<table width="500" height="20" align="center" cellspacing="2">\n';
  for (i=<%=risultato%>;i<nb;i++) {
    var idTA    = <%=risultato%>+i;
    textTA += '<tr><td width="112" height="20" class="formtext2"> Colore n°'+idTA+':</td>\n';
    textTA += '<td height="20" width="388" class="formtext2" colspan="2">';
	textTA += '<input type="text" name="ta'+idTA+'" id="'+idTA+'" size="6" maxlength="6" onkeyup="in_key(this);">';
	textTA += '<input type="checkbox" name="canc'+idTA+'" id='+idTA+' onclick="clk_chbx(this);"></td></tr>\n';
  }
  textTA += '</table>';
  html   = textTA; // non serve!!!
  document.getElementById('container').innerHTML = textTA; 
}
//-->
</script>
<script>
function in_key(tt) {
  var n = tt.name.substr(2);
  var cc = tt.form.elements('canc'+n);
  if(cc.checked) {
    cc.checked = false;
    return count(tt.form);
  }
  return false;
}

function clk_chbx(cc) {
  var n = cc.name.substr(4);
  var tt = cc.form.elements('ta'+n);
  if(tt.value.length) {
    tt.value = '';
    return count(cc.form);
  }
  return false;
}
  
function count(ff) {
  var n = <%=risultato%>;
  for(var i=<%=risultato%>; i<MAX; i++) {
    if(ff.elements('canc'+i).checked) n++;
  }
  ff.counter.value = MAX-n;
  return true;
}
</script>

Imput:
<input name="counter2" type="text" id="numTA" value="<%=sgnepz("numberc")%>" size="2" maxlength="2" >
<input name="button" type="button" onclick="generateTA()" value="ok">

Aiut!

[Mich_]

Non capisco cosa stai cercando di fare.
Perche` hai cambiato la funzione?
Quanto vale (o puo` valere) la variabile (lato server) risultato?

Nota che il conto risulta dalla differenza tra il numero totale (MAX) e il numero di checkbox selezionate.

Il numero MAX lo hai dato allo script?

Nota che gli id non possono inziare per numero. Invece puoi metterli uguali ai rispettivi name.