eseguire calcoli in un form senza ricaricare la pagina

[milka]

Devo fare questo conto, in un form php:

materiale_1_qt x materiale_1_prezzo = materiale_1_prezzo_tot
materiale_2_qt x materiale_2_prezzo = materiale_2_prezzo_tot
materiale_3_qt x materiale_3_prezzo = materiale_3_prezzo_tot

costo_materiali=materiale_1_prezzo_tot + materiale_2_prezzo_tot + materiale_3_prezzo_tot

dove
- materiale_1_qt, 2, 3 ... sono delle select con numeri da 1 a 100
- materiale_1_prezzo , 2, 3 ... sono degli input con valuta decimale
- materiale_1_prezzo_tot, 2, 3 .. è un campo nascosto che serve per fare i conti
- costo_materiali è un input con valuta decimale

il tutto, quando apro il form, in modifica, carica i valori da database, ma posso cambiarli ed aggiornare il tutto. Vorrei però che si aggiornassero man mano che vengono ridigitati

per la select ho messo questa funzione:

<select name=materiale_1_qt onChange="MM_changeProp('materiale_1_prezzo_tot',' ','value', this.options[this.selectedIndex].value*<?=$materiale_1_prezzo;?> ,'input');">
<option value=0>... </option>
<?
for ($m=1; $m<101; $m++)
{
echo "<option value=$m";
if ($m=="$materiale_1_qt") echo " selected";
echo">$m</option>";
}
?>
</select>

e di fatti il materiale_1_prezzo_tot viene aggiornato, ma non riesco a far aggiornare il costo_materiali, facendo diverse prove.

costo_materiali lo faccio calcolare nella pagina, da una funzioncina:
function calcola_materiali ($m1, $m2, $m3, $m4)
{
$prezzo_materiali=$m1+$m2+$m3+$m4;
$prezzo_materiali=number_format ($prezzo_materiali, 2);
return $prezzo_materiali;
}

così ho pensato che poteva essere richiamata dalla select ma non produce risultato.

avevo fatto così:

<select name=materiale_1_qt onChange="MM_changeProp('materiale_1_prezzo_tot',' ','value', this.options[this.selectedIndex].value*<?=$materiale_1_prezzo;?> ,'input');
MM_changeProp('costo_materiali','','value', '<? costo_materiali=calcola_materiali ($materiale_1_prezzo_tot, materiale_2_prezzo_tot, materiale_3_prezzo_tot, materiale_4_prezzo_tot); ?>' ,'input');">
<option value=0>... </option>
<?
for ($m=1; $m<101; $m++)
{
echo "<option value=$m";
if ($m=="$materiale_1_qt") echo " selected";
echo">$m</option>";
}
?>
</select>

come faccio per aggiornare tutti i campi prima di inviare il form?

[milka]

nel frattempo ho trovato questo codice, che ho provato a riadattare, ma non funziona

<script>
function calcola(){
var m_1_qt = "document.materiale_1_qt.options[document.materiale_1_qt.selectedIndex].value";
var m_1_p = "document.materiale_1_prezzo.value";
document.materiale_1_prezzo_tot.value= m_1_qt * m_1_p;
}

</script>


mettendo poi:
<select name=materiale_1_qt onChange="calcola(); ">

ma non mi aggiorna più il campo materiale_1_prezzo_tot

se funzionava potevo fargli fare tutti i calcoli e su ogni select richiamare semplicemtne la funzione.

[cavicchiandrea]

Ho passi tutti i dati nella funzione "MM_changeProp" (che aggiornerà entrambe le select) sia del materiale che del costo, oppure fai due funzioni separate
MM_changeProp > aggiorna select materiale, MM_changePropCost > aggiorna select costo.


P.S. Consiglio posta sempre l'ouput (quello che riceve il browser) della pagina, come fai tu (inserendo php che non tutti conosco vedi sottoscritto) complichi di molto la lettura della stessa.

[milka]

ho trovato qui, questo codice:

<SCRIPT language="JavaScript">

function calcolatotale() {

var a = document.forms[0].numero.options[document.forms[0].numero.selectedIndex].text;
var b = document.forms[0].costo.value;
var c = a * b;

document.forms[0].IMPORTO.value=c;

}

function cancella() {

document.forms[0].IMPORTO.value= parseFloat(c).toFixed(2).replace('.',',');
document.forms[0].numero.selectedIndex=0;

}

</SCRIPT>
<form action="" method="post">
<select name="numero" onchange="calcolatotale();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<input name="costo" type=text value="75" readonly />
<input name="IMPORTO" type=text value="75,00" readonly id="IMPORTO" />
</form>


che se carico in una pagina a sé funziona, se lo copio identico nella mia, con gli stessi campi, non funziona più, è possibile?

[milka]

in pratica se scrivo

<form action="" method="post" class=rapportino>
<select name="numero" onchange="calcolatotale();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input name="costo" type=text value="75">
<input name="IMPORTO" type=text value="75,00" id="IMPORTO">
</form>


all'inizio della pagina funziona, se invece lo inserisco all'interno del mio form già esistente, e metto :

<form action="" method="post" class=rapportino>
<select name="numero" onchange="calcolatotale();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<input name="costo" type=text value="75">
<input name="IMPORTO" type=text value="75,00" id="IMPORTO">

.... il form continua ....
</form>

praticamente identico, dà questo errore nella barra di stato:

'document.forms.0.options' è nullo o non è un oggetto.
che vuol dire? dove devo modificarlo?

[cavicchiandrea]

Originariamente inviato da milka
..........

praticamente identico, dà questo errore nella barra di stato:

'document.forms.0.options' è nullo o non è un oggetto.
che vuol dire? dove devo modificarlo?

Ma quanti form hai nella pagina?

P.S. Da quello che scrivi deduco che tu abbia poca dimestichezza (per non dire nulla) con il javascript pertanto ti consiglio di scaricarti la guida base su javascript.html.it, altrimenti incontrerai molte più difficoltà sia nello spiegare il problema che nel risolverlo.