checkbox associato a quantità

[robjrobj]

Ciao a tutti,
premetto che non sono afferrato in js ahimé

avrei bisogno di qualche dritta per aggiustarmi un codice

in pratica ho un form che funge da carrello,

il codice:

<script type="text/javascript">

function AggiornaCosto() {
  var sum = 0;
  var gn, elem;
  for (i=0; i<8; i++) {
    gn = 'libro'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) { sum += Number(elem.value); }
  }
  document.getElementById('costototale').value = sum.toFixed(2);
} 

</script>

e questo il form

<form name="form1" method="post" action="ric_libri.php">
  <table border="0" cellpadding="10" cellspacing="5" class="tbmain">
    <tr>
      <td width="144" class="left">E-mail:</td>
      <td width="152"><input name="email" type="text" class="text"></td>
      <td width="604" rowspan="4">
        <input type="checkbox" name="libro1" id='libro0' value="9.99"  onclick="AggiornaCosto()">
        libro 1 ( 9.99)

        <input type="checkbox" name="libro2" id='libro1' value="19.99" onClick="AggiornaCosto()">
        libro 2 (19.99)

        <input type="checkbox" name="libro3" id='libro2' value="27.50" onClick="AggiornaCosto()">
        libro 3 (27.50)

        <input type="checkbox" name="libro4" id='libro3' value="45.65" onClick="AggiornaCosto()">
        libro 4 (45.65)

        <input type="checkbox" name="libro5" id='libro4' value="87.20" onClick="AggiornaCosto()">
        libro 5 (87.20)

        <input type="checkbox" name="libro6" id='libro5' value="107.58" onClick="AggiornaCosto()">
        libro 6 (107.58)

        <input type="checkbox" name="libro7" id='libro6' value="11.22" onClick="AggiornaCosto()">
        libro 7 (11.22)

        <input type="checkbox" name="libro8" id='libro7' value="45.11" onClick="AggiornaCosto()">
        libro 8 (45.11)

        <input type="text" name="totale" id="costototale" value=""></td>
    </tr>
    
    <tr>
      <td class="left">Nome:</td>
      <td><input name="name" type="text" id="name" class="text"></td>
    </tr>
    <tr>
      <td class="left">Cognome:</td>
      <td><input name="surname" type="text" id="surname" class="text"></td>
    </tr>
    <tr>
      <td class="left">Citt&agrave;:</td>
      <td><input name="city" type="text" id="city" class="text"></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td colspan="3"><input type="submit" name="Submit" value="Invio" class="btn">
        </p></td>
    </tr>
  </table>
</form>

Il problema e che vorrei associare anche un campo testo per ogni checkbox nel quale indicare la quantità...
mi date qualche dritta

[artorius]

Beh, io ricosruirei anche il layout perché è un po' incasinato:

<form name="form1" method="post" action="ric_libri.php">
    <div class="wide">
        <div class="Left">E-Mail:</div>
        <div class="Right"><input type="text" name="email" /></div>
    </div>
    <div class="wide">
        <div class="Left">Nome:</div>
        <div class="Right"><input type="text" name="nome"/></div>
    </div>
    <div class="wide">
        <div class="Left">Cognome:</div>
        <div class="Right"><input type="text" name="cognome"/></div>
    </div>
    <div class="wide">
        <div class="Left">Citt&agrave;:</div>
        <div class="Right"><input type="text" name="citta"/></div>
    </div>
    <div style="width: 500px;">
      <table border="0" cellpadding="10" cellspacing="5" class="tbmain" width="100%">
            <tr>
                <td>
                    <input type="checkbox" name="libro1" id='libro0' value="9.99"  onclick="AggiornaCosto()" />
                </td>
                <td>
                    <input type="text" size="2" name="num1" id="num0" value="0" onkeyup="AggiornaCosto()" />
                </td>
                <td>
                    libro 1 ( 9.99)
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="libro2" id='libro1' value="19.99" onClick="AggiornaCosto()" />
                </td>
                <td>
                    <input type="text" size="2" name="num2" id="num1" value="0" onkeyup="AggiornaCosto()" />
                </td>
                <td>
                    libro 2 (19.99)
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="libro3" id='libro2' value="27.50" onClick="AggiornaCosto()" />
                </td>
                <td>
                    <input type="text" size="2" name="num3" id="num2" value="0" onkeyup="AggiornaCosto()" />
                </td>
                <td>
                   libro 3 (27.50)
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="libro4" id='libro3' value="45.65" onClick="AggiornaCosto()" />
                </td>
                <td>
                    <input type="text" size="2" name="num4" id="num3" value="0" onkeyup="AggiornaCosto()" />
                </td>
                <td>
                   libro 4 (45.65)
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="libro5" id='libro4' value="87.20" onClick="AggiornaCosto()" />
                </td>
                <td>
                    <input type="text" size="2" name="num5" id="num4" value="0" onkeyup="AggiornaCosto()" />
                </td>
                <td>
                    libro 5 (87.20)
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="libro6" id='libro5' value="107.58" onClick="AggiornaCosto()" />
                </td>
                <td>
                    <input type="text" size="2" name="num6" id="num5" value="0" onkeyup="AggiornaCosto()" />
                </td>
                <td>
                   libro 6 (107.58)
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="libro7" id='libro6' value="11.22" onClick="AggiornaCosto()" />
                </td>
                <td>
                    <input type="text" size="2" name="num7" id="num6" value="0" onkeyup="AggiornaCosto()" />
                </td>
                <td>
                    libro 7 (11.22)
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="libro8" id='libro7' value="45.11" onClick="AggiornaCosto()" />
                </td>
                <td>
                    <input type="text" size="2" name="num8" id="num7" value="0" onkeyup="AggiornaCosto()" />
                </td>
                <td>
                    libro 8 (45.11)
                </td>
            </tr>                    
        </table>
        </div>
    <div class="wide">
        <div class="Left">Totale:</div>
        <div class="Right"><input type="text" name="costototale" id="costototale" readonly="readonly"/></div>
    </div>
    <div class="wide">
        <input type="submit" value="GO!"/>
    </div>
</form> 

Con CSS:

<style type="text/css">
    .wide{
        width: 500px;
        height: 30px;
    }
    .Left{
        float: left;
        font-weight: bold;
        height: 30px;
        width: 200px;
        text-align: right;
    }
    .Right{
        float: right;
        height: 30px;
        width: 250px;
    }
</style> 

E poi cambi la funzione con :

function AggiornaCosto() {
  var sum = 0;
  var gn, elem, nm, numElem;
  for (i=0; i<8; i++) {
    gn = 'libro'+i;
    nm = 'num'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) { 
        numElem = document.getElementById(nm);
        numElem.readonly = "";
        if(parseInt(numElem.value) == 0)
            numElem.value = 1;
        sum += (Number(elem.value) * Number(numElem.value)); 
    }
  }
  document.getElementById('costototale').value = sum.toFixed(2);
} 

[robjrobj]

Artorius beh che dire va più che bene,
mi hai anche rifatto il layout! (a quello avrei pensato dopo)

grazie grazie grazie

[robjrobj]

Scusate se riapro la discussione ma ho un problema con lo script in questione...
Infatti quando viene selezionato un checkbox e poi deselezionato il valore invece di tornare a 0 rimane a 1 (oppure quanto inserito nella casella)...
Come cambio il codice dello script perchè si accorga della deselezione?!?


Grazie

[artorius]

se sei sicuro...

function AggiornaCosto() {
  var sum = 0;
  var gn, elem, nm, numElem;
  for (i=0; i<8; i++) {
    gn = 'libro'+i;
    nm = 'num'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) {
        numElem = document.getElementById(nm);
        numElem.readonly = "";
        if(parseInt(numElem.value) == 0)
            numElem.value = 1;
        sum += (Number(elem.value) * Number(numElem.value));
    }
    else
    {
        numElem = document.getElementById(nm);
        numElem.readonly = "readonly";
        numElem.value = "0";
    }
  }
  document.getElementById('costototale').value = sum.toFixed(2);
} 

[robjrobj]

Perfetto grassie