Creare nuovi elementi

A

Andrea Canonico

Nuovo Utente
17 Dic 2013
6
0
0
Salve a tutti,
Ho fatto un semplice codice html con javascript in cui devo selezionare cosa mangiare, con una select, e inserire una quantità, con una text, e poi effettua vari controlli. Io vorrei che pigiando su un tasto che creerò che si chiamerà "Scegli altro", nella pagina si crei una nuova select e un nuova text identici a quelli che già ho. So che si può fare con document.createElement ma non so utilizzarlo a questo scopo :( poi naturalmente i controlli e il totale, ovvero il prezzo, mi dovranno controllare tutti i select e le text che ci sono. Ecco il codice e, eventualmente, l'allegato:
HTML: 
<html>

<head>

</head>

<body>

<form id="lista">


<div id=riga>
    <select id="merenda" value="lista_merenda">
    
        <option select="select"/>SCEGLI
        <optgroup label="PIZZE">
            <option/>Pomodoro
        </optgroup>
    
        <optgroup label="PANINI">
            <option/>Hot Dog
        </optgroup>

    </select>
    <input type="text" size="2" id="quantita" placeholder="1"/>

    <br/>
</div>

<div id=nuovi>
</div>

<p id="correggi_merenda" style="display: none; color: red;">*INSERISCI LA MERENDA CHE VUOI</p>
<p id="correggi_quantita" style="display: none; color: red;">*INSERISCI UNA QUANTIT&Agrave </p>
<br>

<br><br>
<input type="button" value="Calcola il prezzo della lista!" onclick="calcolo_tot()"/>

</form>

<script type="text/javascript">

function calcolo_tot()
{
    var tot=0;
    var q=document.getElementById('quantita').value;
    
    if(document.getElementById('merenda').value=="SCEGLI")
    {
        if(document.getElementById('correggi_merenda').style.display=="none")
        {
            document.getElementById('correggi_merenda').style.display="inline";
            
            return false;
        
        }else{
              document.getElementById('correggi_merenda').style.display="none";
             }
    }else
     {
        if(document.getElementById('quantita').value=="" || isNaN(document.getElementById('quantita').value))
        {
            if(document.getElementById('correggi_quantita').style.display=="none" || document.getElementById('correggi_merenda').style.display=="inline")
            {
            document.getElementById('correggi_merenda').style.display="none"
            document.getElementById('correggi_quantita').style.display="inline";
            
            return false;
            
            }else{
              document.getElementById('correggi_quantita').style.display="none";
                 }
        }else{
			if(document.getElementById('correggi_quantita').style.display=="inline" || document.getElementById('correggi_merenda').style.display=="inline")
            {
            document.getElementById('correggi_merenda').style.display="none";
            document.getElementById('correggi_quantita').style.display="none";
            
            }else{
              document.getElementById('correggi_quantita').style.display="none";
			  document.getElementById('correggi_merenda').style.display="none";
                 }
            }       
     }
    
    if(document.getElementById('merenda').value=="Pomodoro")
    {
        tot=tot+(0.75*q);
    }
    
	if(document.getElementById('merenda').value=="Hot Dog")
    {
        tot=tot+(2*q);
    }
    
	alert("Il prezzo totale \xE8 "+tot+" euro");
	
    return tot;
    
}

</script>

</body>

</html>
 

Allegati

  • lista_prezzo.zip
    909 bytes · Visite: 241
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, ti sposto nella sezione di javascript
prova questo esempio
HTML: 
<html>
    <head>
        <script>
            i=1;
            function newList(){
                i++;
                var slct = document.ordine.list1.cloneNode(true);
                slct.setAttribute("name", "list"+i);
                document.ordine.appendChild(slct);
                var qta = document.ordine.qta1.cloneNode(true);
                qta.setAttribute("name", "qta"+i);
                document.ordine.appendChild(qta);
                var br = document.createElement("br");
                document.ordine.appendChild(br);
            }
        </script>
        <style>
            form select {
                margin : 5px;
            }
        </style>
    </head>
    <body>
        <form name="ordine">                
            <select name="list1">
                <option value="value1">value1</option>
                <option value="value2">value2</option>
                <option value="value3">value3</option>
            </select><input type="text" size="2" name="qta1"/>
            <br/>
        </form>
        <input type="button" value="Scegli altro" onclick="newList()"/>
    </body>
</html>
 
A

Andrea Canonico

Nuovo Utente
17 Dic 2013
6
0
0
Grazie funziona. A chi potesse interessare: quando si clicca su "scelgo altro", sulla nuova text mi prende quello che ho scritto in quella precedente. Mi spiego meglio: se sulla text precedente scrivo "3" in quella nuova c'è scritto scritto "3".
Quindi aggiungete qta.setAttribute("value", "");

Grazie ancora :D
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
Shyson [WordPress] [PHP] Creare codice che evidenzia nuovi articoli WordPress 0
E Creare un testo trasparente dietro un div HTML e CSS 5
M Creare traccia di download file sul server HTML e CSS 2
A Cerco programmatore/sviluppatore per creare forum Offerte e Richieste di Lavoro e/o Collaborazione 2
L Creare ancore interne alla pagina PHP 1
I Creare un banner temporaneo JavaScript Javascript 0
C Creare Tabella Dati Meteo prelevandoli da dei Tags in un altro foglio PHP 27
simgia Cordova errore quando cerco di emulare o creare la app Sviluppo app per Android 2
U PHP creare un file excel dopo ricerca nel DB PHP 0
A Creare un cronometro PHP 5
G [PHP] Creare script di prenotazione con controllo disponibilità. PHP 7
F Creare elementi html con javascript Javascript 3
Shyson Modificare codice e creare link PHP 0
Cosina Creare bottone delete in form upload PHP 5
Cosina Creare bottone delete in form upload PHP 1
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
L Creare una forma geometrica Photoshop 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
S Libreria PHP per creare file dwg o dxf PHP 0
R Come creare sistema Add to homescreen PHP 3
L Creare un countdown con giorno specifico della settimana PHP 3
W Creare link di una dato Classic ASP 0
W creare file .jar Java 2
M Creare con il Vb 2010 Il Classico Notes di Windows Vista Visual Basic 1
MarcoGrazia Creare una password Snippet Javascript 0
J creare pagina php di prenotazione PHP 5
A Creare un modulo di ricerca avanzata con dreamweaver HTML e CSS 0
INTEROPERABILITY Sviluppatrice/formatrice creare APP Offerte e Richieste di Lavoro e/o Collaborazione 0
L Creare una pagina pre-home WordPress 1
G Creare side-bar non visibile da dispositivi mobile HTML e CSS 0
L creare oggetti da una classe tramite un form Javascript 0
Web93 CREARE SITO WEB COMICS CON WORDPRESS WordPress 0
maxnegri Contare sessioni aperte e creare condizione PHP 1
A Come creare pulsante donazione PayPal HTML e CSS 5
L [CERCO] Creare blog su WordPress con tema Divi Offerte e Richieste di Lavoro e/o Collaborazione 3
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
R [Photoshop] Creare Azione Photoshop 1
F [PHP] creare tabella e tasto cerca PHP 3
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
B [PHP] Creare PDF dopo inserimento dati form PHP 4
A [HTML] Creare sito web per eLearnig HTML e CSS 2
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
Spenalzo Creare tabelle multiple con Access via VBA MS Access 2
R [PHP] Creare sistema random PHP 3
D [PHP] Consigli su come creare form PHP 1
I Creare Qsl radioamatore con testo editabile Presentati al Forum 1
T [PHP] Creare Honeypot per form contatti PHP 10
S [PHP] Creare collegamento filtri di ricerca al database PHP 6
Z Creare VirtualHost Apache2 con PHP? Programmazione 0
max_400 [HTML] Come creare un jpg animata (non gif animata) HTML e CSS 3

Discussioni simili

Alto Basso