Calcolo preventivo Javascript

**GabrielsDesign** · 15-01-2015, 11:56

Buon giorno a tutti,

avrei bisogno cortesemente di un aiuto riguardo a un calcolo che sto facendo su un form, per un preventivo di stampa su prodotti. Il tutto vorrei eseguirlo con Javascript...il mio form è questo:

<form method="post" id="cam-for">

<table>

<tr>
<td><b>Choose a printing methode:</b></td>
</tr>

<tr>
<td>
<div>
<select name="siti" >
<option id="edit-op" selected="selected" >Tampografia <p><?php echo($risultati['tipo_stampa_1']); ?></p></option>
<option id="edit-op">Stampa <p><?php echo($risultati['tipo_stampa_2']); ?></p></option>
</select>
</div>
</td>
</tr>

<?php

}

?>

<tr>
<td> </td>
</tr>

<tr>
<td><b>Quantity of product:</b></td>
</tr>

<tr>

<td><input name="qty" class="qty" value="1" type="text"></td>

</tr>

<tr>
<td><b>Quantity of printing:</b></td>
</tr>

<tr>
<td><select>
<option value="0.48" selected="selected">1</option>
<option value="0.25">2</option>
<option value="0.25">3</option>
<option value="0.25">4</option>
</select></td>
</tr>

<tr>
<td><b>Printing size:</b></td>
</tr>

<tr>
<td><input name="mis" class="mis" value="1" type="text"> x <input name="mis" class="mis" value="1" type="text"></td>
</tr>

<tr>
<td></td>
</tr>

<tr>
<td> </td>
</tr>

<tr>

<td><b>Upload your logo:</b></td>

</tr>

<tr>
<td><ul><li><input type="file" name="file1"></li><li> </li><li><input type="submit" value="Upload"></li></ul></td>

</tr>

<tr>
<td> </td>
</tr>

<tr>
<td><textarea style="width:310px;height:60px;" onfocus="this.value=''">Please, specify the position of logo!</textarea></td>
</tr>

<tr>
<td> </td>
</tr>

<<tr>
<td><input type="submit" value="Calcola" id="edit-btm"/></td>
<td><input type="hidden" name="inviato" value="si"/></td>
</tr>

</table>

</form>

Quello che vorrrei è che al momento del click, sul pulsante "calcola", mi faccia apparire accanto il prezzo totale. I campi da calcolare sono due, "Quantity of product" e "Quantity of printing".

E ora arriva il nocciolo, vorrei che il prezzo dei colori di stampa mi cambi in base alla quantità che il cliente vuole.
Esempio: Se il cliente seleziona stampa P0 e vuole 4 colori, il prezzo di base sarà ovviamente 0.48 per il primo colore e 0.25 per il secondo. Però se il cliente mi seleziona una quantità di prodotto superiore a 199 allora il mio prezzo di stampa cambierà, ovverò prezzo per il primo colore 0.14 e per il secondo, terzo e quarto colore sempre 0.14.

Grazie mille per qualunque aiuto.

P.S. Il prezzo di base del prodotto è di 0.14 €

**cavicchiandrea** · 15-01-2015, 12:29

Ma vuoi lo script o la logica?

**GabrielsDesign** · 15-01-2015, 13:12

Originariamente inviata da cavicchiandrea

Ma vuoi lo script o la logica?

Lo script intendenvo, sorry.

**GabrielsDesign** · 15-01-2015, 13:38

Un'ultima cosa scusa, volevo che ci fosse anche la possibilità che se il cliente mi seleziona la stampa P0 ci sia la possibilità di selezionare fino a 4 colori, altrimenti se mi seleziona la stampa UV allora l'obbligatorietà di scegliere solo 1 colore con il suo relativo prezzo.

Grazie ancora.

**cavicchiandrea** · 15-01-2015, 15:35

Originariamente inviata da GabrielsDesign

Lo script intendenvo, sorry.

Script già pronti dubito che esistono, comunque vedi su google, in alternativa apri un post su uno di questi forum ma una volta deciso che forum utilizzare ti pregherei di leggere attentamente il regolamento interno.

**GabrielsDesign** · 15-01-2015, 16:10

Ho capito, ti ringrazio per i consigli. Comunque stò provando a costruirlo piano piano...già qui, volevo chiederti una cosa:

<html>
<head>
<script type="text/javascript">
function processForm() {
// recuperi il prezzo
var price = document.getElementById('price').value;
// recuperi la quantita
var qta = document.getElementById('qty').value;
// recuperi il prezzo colore
var col = document.getElementById('col').value;
// moltiplichi
var totale = col * price * qta;
// mostri
document.getElementById('total').value = totale;
}
</script>
</head>
<body>

<table>
<input type="text" name="price" id="price" style="display:none;" value="0.14"/>

<tr><td>Quantity of product</td>
<td><ul>
<li><input name="qty" id="qty" value="0" type="text"></li>
</ul></td>
</tr>

<tr><td>Quantity of color</td>
<td><ul>
<li><select name="col" id="col" onchange="processForm()"></li>
<li><option value="0.48">1</option></li>
<li><option value="0.96">2</option></li>
<li><option value="1.44">3</option></li>
<li><option value="1.92">4</option></li>
</ul></td>
</tr>

Totale: <input type="text" id="total" size="20" maxlength="20" readonly="readonly" value="0.00" /><br>
<input type="button" id="submit" value="Calcola il Totale" onClick="processForm()" />

</table>

</body>
</html>

Io vorrei qui, per esempio, che mi prelevasse il prezzo principale del prodotto, ovvero 0.14 e poi mi moltiplicasse x il numero di quantità e x il numero di colore. Come mai non mi prende il prezzo singolo del prodotto? Dove sbaglio?

Grazie.

**cavicchiandrea** · 15-01-2015, 16:28

A) il campo prezzo (price) è nascosto in un posto (tra i tag table e tr) dove non dovrebbe essere
B) usando una select (menù) non puoi usare il semplice value essendo un un oggetto "collezione" (option)
C) meglio forzare dati numerici usando parseInt/parseFloat
Non credo che questa sia la strada più facile scrivere del codice e farselo correggere, prima si studia il linguaggio poi si scrivi il codice, è un consiglio.

**GabrielsDesign** · 15-01-2015, 17:33

Risolto, mi torna! Grazie mille.

Un'altra cosa ancora, scusa...ma...avendo questa situazione:

<html>
<head>
<script type="text/javascript">
function processForm() {
// recuperi il prezzo
// recuperi la quantita
var qta = document.getElementById('qty').value;
// recuperi il prezzo colore
var col = document.getElementById('col').value;
// moltiplichi
var totale = (qta * 0.14) + (col * qta);
// mostri

document.getElementById('total').value = totale;
}
</script>

<style>
ul{
list-style:none;
}
</style>

</head>
<body>

<table>

<br/>
<tr><td>Tipo di stampa</td></tr>
<tr><td><select name="siti" >
<option id="edit-op" selected="selected" >Tampografia <p>P0</p></option>
<option id="edit-op-sec">Stampa <p>UV</p></option></td>
</select></tr>
<br/>
<tr><td>Quantity of product</td>
<td><ul>
<li><input name="qty" id="qty" value="1" type="text"></li>
</ul></td>
</tr>

<tr><td>Quantity of color</td>
<td><ul>
<li><select name="col" id="col" onchange="processForm()"></li>
<li><option value="0.48">1</option></li>
<li><option value="0.96">2</option></li>
<li><option value="1.44">3</option></li>
<li><option value="1.92">4</option></li>
</ul></td>
</tr>

<tr style="display:none;"><td>Quantity of color</td>
<td><ul>
<li><select name="col" id="col" onchange="processForm()"></li>
<li><option value="0.76">1</option></li>
</ul></td>
</tr>

<tr><td>
Totale: <input type="text" id="total" size="20" maxlength="20" readonly="readonly" value="0.00" /><br/>
<input type="button" id="submit" value="Calcola il Totale" onClick="processForm()" /></td>
</tr>

</table>

</body>
</html>

Io ora vorrei che al momento della scelta di stampa su UV e non più p0, le opzioni di colori mi diventasse solo 1 e che il suo valore cambiasse. Come potrei fare?

**cavicchiandrea** · 15-01-2015, 19:06

Non ho capito cosa intendi e comunque mi sa che tu faccia molta confusioni anche al solo html delle option dentro un elenco puntato <li>

**GabrielsDesign** · 16-01-2015, 12:51

Mi sono spiegato male, intendevo dire...in questo form prima do la possibilità di scegliere due tipi di stampa e sotto la quantità dei prodotti e la quantità dei colori. Ora io volevo che se il cliente mi seleziona la prima stampa, allora gli dò la possibilità di selezionare fino a 4 colori nell'option con i relativi value. Altrimenti se mi seleziona la seconda stampa, allora nell'option dovrà prevedere solo 1 e non 4 come la precedente.

Per farti capire ancora meglio: Scelta prima: Stampa p0 <ul>
<li><select name="col" id="col" onchange="processForm()"></li>
<li><option value="0.48">1</option></li>
<li><option value="0.96">2</option></li>
<li><option value="1.44">3</option></li>
<li><option value="1.92">4</option></li>

Scelta seconda: Stampa UV <ul>
<li><select name="col" id="col" onchange="processForm()"></li>
<li><option value="0.76">1</option></li>

Grazie.

Discussione: Calcolo preventivo Javascript

Strumenti discussione

Ricerca discussione

Visualizza

Calcolo preventivo Javascript

Permessi di invio