Creare nuovi elementi

Andrea Canonico · 17 Dic 2013

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>

criric · 20 Dic 2013

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>

Andrea Canonico · 24 Dic 2013

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

Cerca

Cerca

Creare nuovi elementi

Andrea Canonico

Nuovo Utente

Allegati

criric

Super Moderatore

Andrea Canonico

Nuovo Utente

Discussioni simili