Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    Somma e moltiplicazione in un form

    Ciao a tutti, questo è il mio primo messaggio. Non sono un esperto di javascript..e non sono sicuro che sia la sezione giusta del forum. Comunque passiamo al problema.
    Ho necessità di creare un form per un servizio di biglietteria. trai pochi campi presenti, ci dovrà essere la possibilità di scegliere il numero di adulti e di bambini , ed in automatico in un nuovo campo dovrà comparire il costo totale che dovranno pagare. Per esempio, il costo ad adulto è 10€ mentre per il bambino 5€. L'utente seleziona 2 adulti e due bambini, e il sistema dovrà mostrare in automatico il costo finale, ovvero 30€. Naturalmente io dovrò avere la possibilità di modificare il costo per adulti e per bambini che potrebbe cambiare ( non mi serve un area riservata, posso farlo anche andando a cambiarlo direttamente nel codice ). Grazie mille per la disponibilità


    codice:
    <form >
     <table width="640" border="0" cellpadding="4" cellspacing="4" style="margin:10px 0px 0px -5px">
      <tr>
       <td colspan="2">
        <span> Nome</span><br>
        <input style="width:300px;  font-size:15px;font-family:Verdana;color:#876221;background: #eee;  height:22px; border:1px solid #999; padding-left:5px;" type="text"    >                            </td>
       <td> 
        <span> Cognome</span><br>
        <input style="width:300px;  font-size:15px;font-family:Verdana;color:#876221;background: #eee;  height:22px; border:1px solid #999; padding-left:5px;" type="text"  >                             </td>
       </td>
      </tr>
      <tr>
       <td colspan="2">
        <span> Numero di Telefono</span><br>
        <input style="width:300px;  font-size:15px;font-family:Verdana;color:#876221;background: #eee;  height:22px; border:1px solid #999; padding-left:5px;" type="text"  >                             </td>
       </td>
       <td> 
        <span> Indirizzo e-mail</span><br>
        <input style="width:300px;  font-size:15px;font-family:Verdana;color:#876221;background: #eee;  height:22px; border:1px solid #999; padding-left:5px;" type="text"  >                             </td>
       </td>
      </tr>
      <tr>
       <td colspan="2">
        <span> N° adulti</span> 
        <span style="margin-left:57px"> N° bambini</span><br>
        <select name="adulti" id="adulti"  style="  font-size:15px;font-family:Verdana;color:#876221;background: #eee;  height:25px; border:1px solid #999; padding-left:5px; width:60px"> 
         <option value="">0</option>
         <option value="1">1</option> 
         <option value="2">2</option>
         <option value="3">3</option>
        </select> 
        <select name="bambini" id="bambini" style="  font-size:15px;font-family:Verdana;color:#876221;background: #eee;  height:25px; border:1px solid #999; padding-left:5px; width:60px;  margin-left:50px;"> 
         <option value="0">0</option>
         <option value="1">1</option> 
         <option value="2">2</option>
        </select>  
       </td>
       <td> 
        <span> Costo totale Escursione</span><br>
        <input style="width:142px;  font-size:15px;font-family:Verdana;color:#876221;background: #eee;  height:22px; border:1px solid #999; padding-left:5px;" type="text"  >   </td>
       </td>
      </tr>
      <tr>
       <td colspan="2">
        <span> Messaggio</span><br>
        <textarea rows="4"   style="width:300px;  font-size:15px;font-family:Verdana;color:#876221;background: #eee;  border:1px solid #999; padding-left:5px; resize: none;"  ></textarea>
       </td>
       <td><input value="PAGA ADESSO" alt="Invia la richiesta" title="Invia la richiesta" type="submit" style="cursor:pointer"> </td>
      </tr>
     </table>
    </form>

  2. #2
    Utente di HTML.it L'avatar di pietro09
    Registrato dal
    Jan 2002
    Messaggi
    10,116
    mi pare un po' troppo base-base


    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>
        <title></title>
    <script type="text/javascript">
    // <![CDATA[
    
    var costo_adulto = 10;
    var costo_bambino = 5;
    
    function visulizza_costo()
    {
        costo_totale = costo_adulto * parseFloat(document.getElementById("adulti").value) + costo_bambino * parseFloat(document.getElementById("bambini").value)
        document.getElementById("totale_escursione").value = costo_totale;
    }
    
    // ]]>
    </script>
    </head>
    <body>
        <form>
        <table width="640" border="0" cellpadding="4" cellspacing="4" style="margin: 10px 0px 0px -5px">
            <tr>
                <td colspan="2">
                    <span>Nome</span><br>
                    <input style="width: 300px; font-size: 15px; font-family: Verdana; color: #876221; background: #eee; height: 22px; border: 1px solid #999; padding-left: 5px;" type="text">
                </td>
                <td>
                    <span>Cognome</span><br>
                    <input style="width: 300px; font-size: 15px; font-family: Verdana; color: #876221; background: #eee; height: 22px; border: 1px solid #999; padding-left: 5px;" type="text">
                </td>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <span>Numero di Telefono</span><br>
                    <input style="width: 300px; font-size: 15px; font-family: Verdana; color: #876221; background: #eee; height: 22px; border: 1px solid #999; padding-left: 5px;" type="text">
                </td>
                </td>
                <td>
                    <span>Indirizzo e-mail</span><br>
                    <input style="width: 300px; font-size: 15px; font-family: Verdana; color: #876221; background: #eee; height: 22px; border: 1px solid #999; padding-left: 5px;" type="text">
                </td>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <span>N° adulti</span> <span style="margin-left: 57px">N° bambini</span><br>
                    <select name="adulti" id="adulti" style="font-size: 15px; font-family: Verdana; color: #876221; background: #eee; height: 25px; border: 1px solid #999; padding-left: 5px; width: 60px" onchange="visulizza_costo();">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                    <select name="bambini" id="bambini" style="font-size: 15px; font-family: Verdana; color: #876221; background: #eee; height: 25px; border: 1px solid #999; padding-left: 5px; width: 60px; margin-left: 50px;" onchange="visulizza_costo();">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </td>
                <td>
                    <span>Costo totale Escursione</span><br>
                    <input id="totale_escursione" style="width: 142px; font-size: 15px; font-family: Verdana; color: #876221; background: #eee; height: 22px; border: 1px solid #999; padding-left: 5px;" type="text">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <span>Messaggio</span><br>
                    <textarea rows="4" style="width: 300px; font-size: 15px; font-family: Verdana; color: #876221; background: #eee; border: 1px solid #999; padding-left: 5px; resize: none;"></textarea>
                </td>
                <td>
                    <input value="PAGA ADESSO" alt="Invia la richiesta" title="Invia la richiesta" type="submit" style="cursor: pointer">
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>
    Pietro

  3. #3
    Hai ragione Pietro, non avrei dovuto scrivere "Non sono un esperto di javascript" ma piuttosto " sono una capra in javascript". Comunque grazie mille

  4. #4
    Utente di HTML.it L'avatar di pietro09
    Registrato dal
    Jan 2002
    Messaggi
    10,116
    no, è che pensavo ci fosse qualche altro problema non riportato
    Pietro

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,780
    Ciao e benvenuto.

    Quoto Pietro e, senza nulla togliere alla sua soluzione, posto una soluzione molto simile e aggiungo però qualche spunto di riflessione.

    Non sono un esperto di javascript..e non sono sicuro che sia la sezione giusta del forum.
    Sì, la sezione è giusta dal momento che è opportuno utilizzare JavaScript per elaborare gli input e mostrarne al volo i risultati lato client.
    Puoi risolvere in svariati modi ma in linea di massima puoi farlo creando una funzione in cui saranno eseguiti i dovuti calcoli e mostrato il risultato nell'opportuno campo. Tale funzione la andrai a richiamare sull'evento onchange dei due elementi select, come giustamente propone Pietro.

    Posto uno script d'esempio in base al tuo codice.
    Per prima cosa dovrai dare un id al campo in cui sarà mostrato il risultato (così da poter manipolare quell'elemento da script); puoi mettere ad esempio id="totale_escursione", come proposto da Pietro.
    Puoi quindi inserire, quanto segue, direttamente alla fine del body sul tuo documento, o comunque dopo l'intero form:
    codice:
    <script type="text/javascript">
      (function(){
        var costoAdulto = 10
          , costoBambino = 5
          , selAdulti = document.getElementById("adulti")
          , selBambini = document.getElementById("bambini")
          , inpRisultato = document.getElementById("totale_escursione")
        ;
        selAdulti.onchange = selBambini.onchange = aggiornaCostoTotale;
        function aggiornaCostoTotale(){
          inpRisultato.value = selAdulti.value*costoAdulto + selBambini.value*costoBambino;
        }
      })();
    </script>
    Il gioco è fatto.

    Fai attenzione però, il campo input che usi per mostrare il risultato è normalmente scrivibile, ma in questo caso non dovrebbe esserlo. Dovresti quindi impostarlo come non-scrivibile applicandogli l'attributo readonly, oppure usare un semplice div o span opportunamente formattato.

    Chiaramente non fare l'errore di utilizzare il valore, restituito in quel campo, come dato da inviare al form (e quindi da considerare per il pagamento), perché questo può essere facilmente manipolato lato client, ma presumibilmente dovrai rifare il calcolo nello script lato server che processa il form, utilizzando opportunamente i valori delle select.

    Note a margine:
    Non per smontare il tuo lavoro ma non ti nascondo comunque che il tuo codice presenta svariati errori di validazione (puoi verificare con un validatore online tipo questo) ed è molto "sporco" a livello di stesura. Il css in linea, come lo hai impostato, è ridondante e sicuramente può essere ottimizzato parecchio creando invece un foglio di style incorporato nell'head del tuo documento o incluso come file esterno; molti attributi che hai utilizzato sono obsoleti e sostituibili con relativo css; l'uso di tabelle per la creazione del layout è una pratica da evitare a favore di un uso più sano e appropriato dei css.
    Naturalmente io dovrò avere la possibilità di modificare il costo per adulti e per bambini che potrebbe cambiare ( non mi serve un area riservata, posso farlo anche andando a cambiarlo direttamente nel codice )
    Non ho idea dell'ambito di utilizzo di questa tua applicazione ma il sistema che vuoi adoperare è, senza ombra di dubbio, poco professionale. In teoria sarebbe opportuno usare un database (che può anche essere un semplice file di testo) per gestire eventuali dati modificabili evitando di mettere mano a script o codici sorgente per compiere tali operazioni.

    Chiaramente i miei sono giusto dei consigli, poi nessuno ti impedisce di fare come meglio credi

    Hai ragione Pietro, non avrei dovuto scrivere "Non sono un esperto di javascript" ma piuttosto " sono una capra in javascript"
    senza offesa, ma personalmente credo ci siano varie altre lacune di base a prescindere da JavaScript.

    Se può interessarti, ti invito a dare una sbirciata ai link utili css, iniziando magari dalle guide di base. Sicuramente troverai molto materiale interessante e utile per imparare a creare codice pulito e "fresco"

    Buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.