aggiungere righe con select da database e calcolo sconto in automatico

[AsevenX]

Salve a tutti, sono nuovo del forum ma seguo spesso le guide di html.it. Vi scrivo perch� mi sono imbattuto in un problema che non so proprio come risolvere. Premetto che non sono molto esperto di javascript quindi magari la soluzione pu� essere semplice, ma ora come ora sono bloccato.

Sto cercando di creare una pagina web per la realizzazione di fatture che preveda di aggiungere/eliminare righe relative alle attivit� acquistate (selezionabili tramite un campo select) e ottenere automaticamente il suo importo preso dal database. Quest'ultimo dovrebbe essere editabile e dovrei poter calcolare un eventuale sconto per poi ottenere il suo importo netto. Vorrei inoltre poter addizionare gli importi per poi ottenere il totale della fattura. Non so se sono riuscito a spiegarmi, quindi lascio un link di quello che ho fatto:
http://www.olgiatapark.com/gestionale/forms/test.php

Nell'esempio sono riuscito ad ottenere met� del risultato sperato, ovvero riesco a selezionare l'importo in base alla scelta che viene fatta nella select e da qui editare o applicare lo sconto. Il problema � che quando vado ad aggiungere una riga non ottengo lo stesso risultato. Molto probabilmente il problema sta nel 'name' che forse dovrebbe cambiare ad ogni aggiunta, ma non saprei come risolvere.

Posto il codice se qualcuno potr� aiutarmi

<script type="text/javascript">$(function(){
var removeLink = ' <a href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">elimina</a>';
 
$('a.add').relCopy({ append: removeLink});
});
</script>

<script>
var cont = 0;
    
function selezionaImporto(sel)
{   
    var id = sel.options[sel.selectedIndex].value;
    
    document.form.selectValue.value = id;
    
    <?php
    $quary = "SELECT id, importo FROM $tablePrestazioni";
    if ($result = mysqli_query($mysqli_connect, $quary))
    {
        while ($row = mysqli_fetch_array($result))
        {
            ?>
            importoDB = "<?php print $row[0] ?>";
            
            if (importoDB == id)
            {
              document.form.importo.value = '<?php echo $row[1]?>';
            }           
            <?php
        }       
    }
    ?>
    
    document.form.conta.value = cont;
}

function calcolaSconto()
{
    var percentuale = document.form.sconto.value;
    var importo = document.form.importo.value;
    var totSconto = (percentuale * importo) / 100;
    var totImporto = importo - totSconto;
    
    document.form.totale.value = totImporto;
}
 </script>

<form name="form"><div class="clone">
<select name="prestazione" onchange="selezionaImporto(this)" onmousemove="calcolaSconto()">
    <option value="" selected> Scegli
    <option value="1"> Opzione 1
    <option value="2"> Opzione 2
    <option value="3"> Opzione 3
</select>

<label>id:</label><input type='text' name='selectValue'>

<label>importo lordo:</label><input type='text' name='importo'>
<label>percentuale sconto:</label><input type='text' name='sconto' onmousemove="calcolaSconto()" onfocus="calcolaSconto()" onchange="selezionaImporto(this)">
<label>importo netto:</label><input type='text' name='totale' onfocus="calcolaSconto()">
<a href="#" class="add" rel=".clone" onClick="aggiungi();">aggiungi<br></a>
</div>
 </form>

Spero di aver dato le informazioni necessarie e ringrazio anticipatamente chiunque vorr� aiutarmi.

[autsel]

Non riesco esattamente a capire il problema.... cmq.... ci sono molte inesattezze nel tuo modo di scrivere:
1) è meglio <script Language="javascript"> piuttosto che semplicemente <script>
2) il tag <form> non ti serve
3) assegna ad ogni campo input (che sia una select o un text o qualsiasi altra cosa) un id ed utilizza quello, non l'attributo "name" perché non funziona su tutti i browser; es: <input type='text' id='sconto'
Per richiamare l'elemento usa document.getElementById("sconto").value
4) quando chiami una funzione da un evento includi sempre il linguaggio e metti il ";" ; es.: <input ... onmousemove="javascript:calcolaSconto();"...>

In ultimo
il link con la pagina di test non funziona

[AsevenX]

Non riesco esattamente a capire il problema.... cmq.... ci sono molte inesattezze nel tuo modo di scrivere:
1) è meglio <script Language="javascript"> piuttosto che semplicemente <script>
2) il tag <form> non ti serve
3) assegna ad ogni campo input (che sia una select o un text o qualsiasi altra cosa) un id ed utilizza quello, non l'attributo "name" perché non funziona su tutti i browser; es: <input type='text' id='sconto'
Per richiamare l'elemento usa document.getElementById("sconto").value
4) quando chiami una funzione da un evento includi sempre il linguaggio e metti il ";" ; es.: <input ... onmousemove="javascript:calcolaSconto();"...>

In ultimo
il link con la pagina di test non funziona

Ciao, ti ringrazio per la risposta. Purtroppo non sono un esperto di JS quindi è molto probabile che abbia fatto degli errori di scrittura, appena possibile li correggo. Comunque il link esatto è questo (l'ho cambiato qualche giorno fa e ho dimenticato di scriverlo)
http://www.olgiatapark.com/gestionale/forms/test1.php
In poche parole quando seleziono un opzione nella selezione dal database viene estratto il suo importo e poi da quello posso applicare uno sconto e ottenere in modo dinamico l'importo totale. Questo lo posso fare solo per una riga, quando aggiungo una riga però questo non funziona e io vorrei invece farlo per tutte le righe di cui avrei bisogno. Inoltre i dati che visualizzo nelle input devo poterli salvare nel database, ma questo lo farò con php in un secondo momento.

PS: la select per comodità è costruita con solo tre opzioni, ma in realtà dovrebbe prendere i dati da database, ma questo dovrei essere in grado di farlo.

Spero di aver chiarito il mio problema. Grazie ancora

[autsel]

Okk....

Allora... diciamo innanzitutto che devi rendere dinamici anche gli script in javascript..... l'ho riscritto per farti capire il funzionamento dinamico, poi se vorrai fare tutto con jquery studierai come implementarlo... mica devo fare tutto io giusto ? :-)
Manca anche la funzione remove()... lascio a te il compito di studiarti il DOM per la rimozione delle linee (e il decremento del contatore ovviamente....).
Ho rimosso la query del database per riuscire a provarlo, la rimetterai tu come meglio si addice. Provato e funziona.

Ti lascio il codice....

<div id="form">
<select id="prestazione0" onchange="selezionaImporto(0)">
    <option value="" selected> Scegli
    <option value="1"> Opzione 1
    <option value="2"> Opzione 2
    <option value="3"> Opzione 3
</select>
<label>id:</label><input type='text' id='selectValue0' disabled>
<label>importo lordo:</label><input type='text' id='importo0' disabled>
<label>percentuale sconto:</label><input type='text' id='sconto0' value="0" onkeyup="javascript:calcolaSconto(0);">
<label>importo netto:</label><input type='text' id='totale0' onkeyup="javascript:calcolaSconto(0);">
<a href="#" class="add" rel=".clone" onClick="javascript:aggiungi();">aggiungi<br></a>
</div>

<script language="javascript">
var cont = 0;
    
function selezionaImporto(id)
{   
    var idSelect = document.getElementById("prestazione"+id).selectedIndex;
    var importo = document.getElementById("importo"+id);
    
    document.getElementById("selectValue"+id).value=idSelect;
    
    if (idSelect==1) importo.value = '50';
    if (idSelect==2) importo.value = '1';
    if (idSelect==3) importo.value = '325';
    calcolaSconto(id);
}
function calcolaSconto(id)
{
    var percentuale = document.getElementById("sconto"+id).value;
    var importo = document.getElementById("importo"+id).value;
    var totSconto = (percentuale * importo) / 100;
    var totImporto = importo - totSconto;
    
    document.getElementById("totale"+id).value = totImporto;
}
function aggiungi() {
    cont++;
    var newForm= "<select id='prestazione"+cont+"' onchange='selezionaImporto("+cont+")'>";
    newForm+= "<option selected> Scegli</option>";
    newForm+= "<option value='1'> Opzione 1</option>";
    newForm+= "<option value='2'> Opzione 2</option>";
    newForm+= "<option value='3'> Opzione 3</option>";
    newForm+= "</select>";
    newForm+= "<label>&nbsp;id:</label><input type='text' id='selectValue"+cont+"' disabled>";
    newForm+= "<label>&nbsp;importo lordo:</label><input type='text' id='importo"+cont+"' disabled>";
    newForm+= "<label>&nbsp;percentuale sconto:</label><input type='text' id='sconto"+cont+"' value='0' onkeyup='javascript:calcolaSconto("+cont+");'>";
    newForm+= "<label>&nbsp;importo netto:</label><input type='text' id='totale"+cont+"' onkeyup='javascript:calcolaSconto("+cont+");'>";
    newForm+= "<a href='#' class='add' onClick='javascript:aggiungi();'>&nbsp;aggiungi</a>";
    newForm+= "<a href='#' class='add' onClick='javascript:rimuovi("+cont+");'>&nbsp;rimuovi<br></a>";
    
   $('#form').append(newForm);
    
}
function rimuovi(id) {
    cont--;
   /* ... */
}
 </script>

Se hai bisogno di delucidazioni chiedi pure.

Addirittura protresti eliminare il primo form, e chiamare subito la funzione aggiungi() al caricamento della pagina.... effettuando le opportune modifiche.....
Ciao,
buon lavoro

[AsevenX]

Ti ringrazio per l'aiuto, sei stato gentilissimo. Dall'esempio che mi hai dato penso di poter riuscire ad implementare la funzione per rimuovere e la quary (o almeno spero.. io ci provo), ma ho provato lo script e non funziona. Devo modificarlo in qualche modo per farlo funzionare?

[autsel]

Ho tralasciato l'inclusione delle librerie jquery perché penso che tu già l'abbia dato che ne facevi uso nel tuo codice.
Per il resto lo script che ti ho postato io funziona benissimo perché prima di postarlo l'ho provato.

[AsevenX]

infatti avevo dimenticato proprio di richiamare la libreria...
sto aggiungendo una funzione per ottenere il totale di tutti gli importi netti:

function calcolaFattura() {
var totCont = cont + 1;
var totaleFattura = 0;

for (i=0; i<=cont; i++ ) {
var totImportoId = parseFloat(document.getElementById("totale"+i).val ue);

totaleFattura = totaleFattura + totImportoId;
}


document.getElementById("totaleFattura").value = totaleFattura;
}

per il momento sembra funzionare.

Ho problemi però con l'eliminazione delle righe, non capisco come fare per identificare l'id dell'intera riga, ho provato in diversi modi, tra cui:
var x = document.getElementById("form");
x.remove(id);

e

$('#form').removeChild();

Mi potresti spiegare come fare?

[autsel]

Hai due possibilità:

1) nella funzione che ti aggiunge la riga, nella variabile newForm racchiudi tutto un tag <div> (con id ovviamente sempre legato al contatore) e poi elimini quello;

2) devi eliminare ogni elemento della riga: prstazione, importo, sconto ecc.... però in questo modo devi assegnare degli id anche alle label

Ti consiglio la prima soluzione.

[AsevenX]

Hai due possibilità:

1) nella funzione che ti aggiunge la riga, nella variabile newForm racchiudi tutto un tag <div> (con id ovviamente sempre legato al contatore) e poi elimini quello;

2) devi eliminare ogni elemento della riga: prstazione, importo, sconto ecc.... però in questo modo devi assegnare degli id anche alle label

Ti consiglio la prima soluzione.

Perfetto, ora funziona correttamente...
Un ultima cosa, come ti dicevo ho realizzato una piccola funzione per calcolare tutti i totali e fare il calcolo della fattura. Funziona finché non elimino una riga, a quel punto si blocca e non si aggiorna più. Mi sapresti dire come fare per risolvere?
Grazie mille e scusa se sto abusando del tuo aiuto/pazienza, ma ci sto sbattendo la testa da due settimane su questa cosa!

[autsel]

Per calcolare il totale di tutte le righe lo fai con un ciclo for del contatore e non ci sono problemi.
Se ti si blocca probabilmente non hai decrementato il contatore quando elimini una riga.
Apri la console (F12) e vedi che errore c'è, perché se si blocca un errore c'è di sicuro.
Se non ci riesci postami il codice che calcola il totale e l'errore della console.