Aggiornare valori in tempo reale sulla stessa pagina

**D@rKo** · 27-07-2010, 18:49

Ciao!
Posto qui perchè penso che javascript mi possa venire in aiuto per questo problema.
Non conosco javascript, ma almeno indicatemi la retta via che poi me la studio io a dovere

Ho una scheda prodotto da compilare attraverso un form e il prezzo di base del prodotto. Vorrei che, in base alla scelta che effettuo sul form, mi venga aggiornato in tempo reale il prezzo, senza però passare ad una pagina successiva, ma al click diretto sui vari valori del form.

Aiutino?

**mazzjoe** · 27-07-2010, 18:52

Beh puoi farlo con ajax.

Cmq non ho capito bene, vuoi fare qualcosa come fa l'apple store quando compri un nuovo macbook, imac ecc ecc?

**D@rKo** · 27-07-2010, 18:56

Non ho mai acquistato un prodotto Apple!

Comunque ti faccio un esempio:

Il prezzo di un prodotto è 10€
il prezzo è scritto nella parte alta della pagina e sotto ho 5 colori: rosso, bianco, blu, verde e giallo messi li in un form

Se seleziono il rosso il prezzo viene aggiornato automaticamente a 12€, se selezioni blu 14€ e via scorrendo.

**mazzjoe** · 27-07-2010, 19:03

Beh, era per intenderci, puoi far finta di acquistare qualcosa e poi chiudere al momento del pagamento, per vedere cosa intendevo io

Cmq si può fare, potresti ad esempio degli onclick sui vari elementi (blu, giallo ecc ecc) e cambiare il valore in tempo reale.

Usando librerie come jquery sarà ancora più facile

**D@rKo** · 27-07-2010, 19:22

uhmmmm! Ho scaricato jquery, ma non ci sto capendo molto..

**br1** · 27-07-2010, 19:24

Originariamente inviato da D@rKo
uhmmmm! Ho scaricato jquery, ma non ci sto capendo molto..

E che pretendi in venti minuti...

**D@rKo** · 27-07-2010, 19:27

Il problema che non ho le basi di javascript ed aprendo jquery vedo soltanto righe senza senso (per me).

Una guida per capirci qualcosa? :master:

**Enzaccio** · 28-07-2010, 06:20

Si possono seguire più strade: occorrerà sapere qualcosa di più da parte tua, vediamo da un primo esempio cosa mi dici.
Si potrà:

Applicare un operatore numerico a un prezzo base, ad esempio *0.2 (per poi fare +20%) se abbiamo dei prezzi che devono incrementare di una percentuale fissa step by step;
Passare al campo del prezzo finale tramite una function , valori fissi predeterminati, a seconda di dove l' utente clicca (ed è l' esempio che porto);
Compilare un Array (un piccolo database javascript) e da li attingere dati;

Questo "catalogo" sarà soggetto ad aggiornamenti/modifiche frequenti ?

Resta inteso che quanto elaboriamo via javascript sui campi form, resterà valido all' atto del submit agli effetti PHP.

codice:

<!DOCTYPE html PUBLIC>
<html>
<head><title></title>
<script type="text/javascript">

 function priceit(its){
 document.forms[0].elements["theprice"].value = its;
 }
</script>

</head><body>
<form>
<div align="center">
<table border="0" cellpadding="0" cellspacing="2" bgcolor="#B0B0B0"><tr>
<td colspan="5">€. <input name="theprice" value="10" type="text" size="5"></td>
</tr><tr>
<td bgcolor="red">&#38;nbsp;</td>
<td bgcolor="white">&#38;nbsp;</td>
<td bgcolor="blue">&#38;nbsp;</td>
<td bgcolor="green">&#38;nbsp;</td>
<td bgcolor="yellow">&#38;nbsp;</td>
</tr><tr>
<td><input name="group1" type="radio" onclick="priceit(12);"></td>
<td><input name="group1" type="radio" onclick="priceit(14);"></td>
<td><input name="group1" type="radio" onclick="priceit(15);"></td>
<td><input name="group1" type="radio" onclick="priceit(17);"></td>
<td><input name="group1" type="radio" onclick="priceit(20);"></td></tr>
</table>
</div>
</form>

</body>
</html>

**D@rKo** · 29-07-2010, 19:37

Enzaccio grazie mille! Senza il tuo aiuto non ce l'avrei mai fatta! Devo studare javascript assolutamente.
Ora mi trovo con un altro problema. Devo aggiornare il prezzo con vari checkbox, vi riporto quello che ho cercato di fare, con il primo checkbox tutto ok, con il secondo no.

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">



 function priceit(its){

 document.forms[0].elements["theprice"].value = its;

 }

 

 function priceit2(its){

 document.forms[0].elements["theprice2"].value = its;

 }

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento senza titolo</title>

</head>

<body>

<form id="form1" name="form1" method="post" action="">

  

€.

  <input name="theprice" value="<? echo $_POST['prezzo_cm']; ?>" type="text" size="5">

  </p>

  



    <input type="checkbox" name="iniziali" id="iniziali" onclick="if(this.checked){priceit(<?php $somma1 = $_POST['prezzo_cm'] + 3; echo $somma1; ?>)}else{priceit(<?php $somma1 = $_POST['prezzo_cm'] + 0; echo $somma1; ?>)}" />

    <input name="theprice2" value="<?php echo $somma1; ?>" type="hidden" size="5" />

    <label for="iniziali">Iniziali (+3€)</label>

  </p>

  



    <input type="checkbox" name="colletto" id="colletto" onclick="if(this.checked){priceit2(<?php $somma2 = $somma1 + 5; echo $somma2; ?>)}else{priceit2(<?php $somma2 = $somma1 + 0; echo $somma2; ?>)}" />

    <label for="colletto">Colletto (+5€)</label>

  </p>

</form>

</body>

</html>

**Enzaccio** · 29-07-2010, 23:42

Per collaudarlo rapidamente in locale, sostituisco $_POST['prezzo_cm'] con un ipotetico 2
Nota che la seconda tornata di if-statement nel determinare $somma2 trova $somma1 per come l' ultima esecuzione PHP la ha lasciata:
$somma1 = $_POST['prezzo_cm'] + 0; cioè uguale a $_POST['prezzo_cm']

Rendo visibile come textbox anche il campo hidden "theprice2"
dimmi cos'è che non ti torna:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">

 function priceit(its){
 document.forms[0].elements["theprice"].value = its;
 }
 
 function priceit2(its){
 document.forms[0].elements["theprice2"].value = its;
 }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  

€.
  <input name="theprice" value="2" type="text" size="5">
  </p>
  


    <input type="checkbox" name="iniziali" id="iniziali" onclick="if(this.checked){priceit(5 )}else{priceit(2)}" />
    (<input name="theprice2" value="2" type="text" size="5" />)
    <label for="iniziali">Iniziali (+3€)</label>
  </p>
  


    <input type="checkbox" name="colletto" id="colletto" onclick="if(this.checked){priceit2(7)}else{priceit2(2)}" />
    <label for="colletto">Colletto (+5€)</label>
  </p>
</form>
</body>
</html>

Discussione: Aggiornare valori in tempo reale sulla stessa pagina

Strumenti discussione

Ricerca discussione

Visualizza

Aggiornare valori in tempo reale sulla stessa pagina

Permessi di invio