aggiungere dei div non sostituirli

Michele Martinello

Nuovo Utente
15 Lug 2015
9
0
0
salve volevo un aiuto!
ho creato questo form che se uno sceglie ad esempio retro un colore ,viene fuori un div con delle opzioni"cambio" per questa scelta , ora però se io scelgo anche sinistra un colore vengono fuori le scelte "cambio" per questa opzione ,ma si sostiuscono a quelle comparse per il retro , invece io vorrei che si aggiungessero in modo che se ad asempio uno fa una scelta diersa per ogni opzione (fronte retro sinistra e destra)
gli appaiano tutte e quattro le opzioni di scelta "cambio "
Codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--css-->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.structure.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css">
<!--css-->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>

<script><!--test jquery-->
	function myFunction() {
		var obj = document.getElementById("h01");
		obj.innerHTML = "Hello jQuery";
	}
	onload = myFunction;
</script><!--test jquery fine-->
<script>
$(function(){

    $('#show-back').hide();
    
    $('#formid').on('click' ,'input[type=radio]', function(){
        if (this.id == "retro" && this.checked) {
            $('#show-back').show();
        } else {
            $('#show-back').hide();
        }
    });
                 
});
$(function (){

    $('#show-sx').hide();
    
    $('#formid').on('click' ,'input[type=radio]', function(){
        if (this.id == "sx" && this.checked) {
            $('#show-sx').show();
        } else {
            $('#show-sx').hide();
        }
    });
                 
});
$(function(){

    $('#show-dx').hide();
    
    $('#formid').on('click' ,'input[type=radio]', function(){
        if (this.id == "dx" && this.checked) {
            $('#show-dx').show();
        } else {
            $('#show-dx').hide();
        }
    });
                 
});

</script>
</head>
<body>
<?php
echo 'test php' ;
?>
<div id="h01">
</div>

<form action="ricezione.php" method="POST" id="formid">
<p>FRONTE</p>
<p>Seleziona il tipo di personalizzazione che vuoi effettuare sul Fronte della t-shirt.</p>
<ul>
	<li><input type="radio" name="stampafronte" value="Nessuna Stampa" checked>Nessuna stampa</li>
	<li><input type="radio" name="stampafronte" value="1 colore" id="fronte">Stampa a 1 colore</li>
	<li><input type="radio" name="stampafronte" value="2 colori" id="fronte">Stampa a 2 colore </li> 
	<li><input type="radio" name="stampafronte" value="3 colori" id="fronte">Stampa a 3 colore </li>
	<li><input type="radio" name="stampafronte" value="4 colori" id="fronte">Stampa a 4 colore </li>
	<li><input type="radio" name="stampafronte" value="5 colori" id="fronte">Stampa a 5 colore </li>
	<li><input type="radio" name="stampafronte" value="6 colori" id="fronte">Stampa a 6 colore</li><hr>
    <li><input type="radio" name="stampafronte" value="6 colori" id="fronte">Ricamo</li>
</ul>
<span>
<p>RETRO</p>
<p>Seleziona il tipo di personalizzazione che vuoi effettuare sul Retro della t-shirt.</p>
<ul>
	<li><input type="radio" name="stamparetro" value="Nessuna Stampa" checked>Nessuna stampa</li>
	<li><input type="radio" name="stamparetro" value="1 colore" id="retro">Stampa a 1 colore</li>
	<li><input type="radio" name="stamparetro" value="2 colori" id="retro">Stampa a 2 colore </li> 
	<li><input type="radio" name="stamparetro" value="3 colori" id="retro">Stampa a 3 colore </li>
	<li><input type="radio" name="stamparetro" value="4 colori" id="retro">Stampa a 4 colore </li>
	<li><input type="radio" name="stamparetro" value="5 colori" id="retro">Stampa a 5 colore </li>
	<li><input type="radio" name="stamparetro" value="6 colori" id="retro">Stampa a 6 colore</li><hr>
    <li><input type="radio" name="stamparetro" value="6 colori" id="retro">Ricamo</li>
</ul>
</span>

<p>SPALLA SINISTRA</p>
<p>Seleziona il tipo di personalizzazione che vuoi effettuare sulla spalla sinistra</p>
<ul>
	<li><input type="radio" name="stampasinistra" value="Nessuna Stampa" checked>Nessuna stampa</li>
	<li><input type="radio" name="stampasinistra" value="1 colore" id="sx">Stampa a 1 colore</li>
	<li><input type="radio" name="stampasinistra" value="2 colori" id="sx">Stampa a 2 colore </li> 
	<li><input type="radio" name="stampasinistra" value="3 colori" id="sx">Stampa a 3 colore </li>
	<li><input type="radio" name="stampasinistra" value="4 colori" id="sx">Stampa a 4 colore </li>
	<li><input type="radio" name="stampasinistra" value="5 colori" id="sx">Stampa a 5 colore </li>
	<li><input type="radio" name="stampasinistra" value="6 colori" id="sx">Stampa a 6 colore</li><hr>
    <li><input type="radio" name="stampasinistra" value="6 colori" id="sx">Ricamo</li>
</ul>

<p>SPALLA DESTRA</p>
<p>Seleziona il tipo di personalizzazione che vuoi effettuare sulla spalla destra</p>
<ul>
	<li><input type="radio" name="stampadestra" value="Nessuna Stampa" checked>Nessuna  stampa</li>
	<li><input type="radio" name="stampadestra" value="1 colore" id="dx">Stampa a 1 colore</li>
	<li><input type="radio" name="stampadestra" value="2 colori" id="dx">Stampa a 2 colore </li> 
	<li><input type="radio" name="stampadestra" value="3 colori" id="dx">Stampa a 3 colore </li>
	<li><input type="radio" name="stampadestra" value="4 colori" id="dx">Stampa a 4 colore </li>
	<li><input type="radio" name="stampadestra" value="5 colori" id="dx">Stampa a 5 colore </li>
	<li><input type="radio" name="stampadestra" value="6 colori" id="dx">Stampa a 6 colore</li><hr>
    <li><input type="radio" name="stampadestra" value="6 colori" id="dx">Ricamo</li>
</ul>
<p>Cambio</p>
<!-- cambio  fronte-->
<div id="show_front">
<ul>
	<li><input type="radio" name="cambio" value="Nessun Cambio" checked>Nessun cambio</li>
    <li><input type="radio" name="cambio" value="1colore" >1 colore</li>
    <li><input type="radio" name="cambio" value="2colore" >2 colori</li>
    <li><input type="radio" name="cambio" value="3colore" >3 colori</li>
    <li><input type="radio" name="cambio" value="4colore" >4 colori</li>
   	<li><input type="radio" name="cambio" value="5colore" >5 colori</li>
   	<li><input type="radio" name="cambio" value="6colore" >6 colori</li>	
</ul>
</div>
<!-- cambio  fronte fine-->

<!-- cambio  retro-->
<div>
<div id="show-back">
<p> Dietro </p>
    <ul>
        <li><input type="radio" name="cambio_r" value="Nessun Cambio" >Nessun cambio</li>
        <li><input type="radio" name="cambio_r" value="1colore" >1 colore</li>
        <li><input type="radio" name="cambio_r" value="2colore" >2 colori</li>
        <li><input type="radio" name="cambio_r" value="3colore" >3 colori</li>
        <li><input type="radio" name="cambio_r" value="4colore" >4 colori</li>
        <li><input type="radio" name="cambio_r" value="5colore" >5 colori</li>
        <li><input type="radio" name="cambio_r" value="6colore" >6 colori</li>	
    </ul>
</div>
</div>
<!-- cambio  sinistra fine -->
<!-- cambio  sinistra-->
<div id="show-sx">
<p>Sinistra</p>
    <ul>
        <li><input type="radio" name="cambio_s" value="Nessun Cambio" >Nessun cambio</li>
        <li><input type="radio" name="cambio_s" value="1colore" >1 colore</li>
        <li><input type="radio" name="cambio_s" value="2colore" >2 colori</li>
        <li><input type="radio" name="cambio_s" value="3colore" >3 colori</li>
        <li><input type="radio" name="cambio_s" value="4colore" >4 colori</li>
        <li><input type="radio" name="cambio_s" value="5colore" >5 colori</li>
        <li><input type="radio" name="cambio_s" value="6colore" >6 colori</li>	
    </ul>
</div>
<!-- cambio  sinistra fine -->
<!-- cambio  destra-->
<div id="show-dx">
<p>Destra</p>
    <ul>
        <li><input type="radio" name="cambio_d" value="Nessun Cambio" >Nessun cambio</li>
        <li><input type="radio" name="cambio_d" value="1colore" >1 colore</li>
        <li><input type="radio" name="cambio_d" value="2colore" >2 colori</li>
        <li><input type="radio" name="cambio_d" value="3colore" >3 colori</li>
        <li><input type="radio" name="cambio_d" value="4colore" >4 colori</li>
        <li><input type="radio" name="cambio_d" value="5colore" >5 colori</li>
        <li><input type="radio" name="cambio_d" value="6colore" >6 colori</li>	
    </ul>
</div>
<!-- cambio  destra fine -->

<button type="submit">Invia</button>
</form> 


</body>
</html>
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
ciao, prova a sostituire i 2 script js con questo unico e vedi l'effetto che fa ...
PHP:
<script>
$(document).ready(function(){
//	test jquery
	var obj = document.getElementById("h01");
	obj.innerHTML = "Hello jQuery";

	$('#show-back').hide();
	$('#show-sx').hide();
	$('#show-dx').hide();

	$('#formid').on('click' ,'input[type=radio]', function(){
		if (this.id == "retro" && this.checked) {
			$('#show-back').show();
		} 
	});
    
	$('#formid').on('click' ,'input[type=radio]', function(){
		if (this.id == "sx" && this.checked) {
			$('#show-sx').show();
		} 
	});

	$('#formid').on('click' ,'input[type=radio]', function(){
		if (this.id == "dx" && this.checked) {
			$('#show-dx').show();
		} 
	});
});
</script>
ciao
Marino
 
Discussioni simili
Autore Titolo Forum Risposte Data
U aggiungere resize a script che effettua slideshow dei file contenuti in una cartella Javascript 0
I aggiungere la sessione PHP 8
K [PHP] Aggiungere caratteri ad una stringa in base alla lunghezza della stessa PHP 2
E Aggiungere Parole PHP 1
A aggiungere stringa all'inizio di ogni riga di un file txt PHP 3
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
F Aggiungere automaticamente sito a home del telefono HTML e CSS 2
C Aggiungere blocco dati Javascript 6
F [PHP] Aggiungere ruolo per accedere alle pagine PHP 2
Cosina Aggiungere pulsante pause/play a slideshow Javascript 0
A Twitter aggiungere tweet a campagna esistente o salvare pubblico Social Media Marketing 0
S aggiungere colonna date in una tabella già esistente Database 0
P [PHP] Aggiungere un mio script a prestashop? PHP 10
Shyson [PHP] Aggiungere link al codice PHP 0
D Aggiungere file .css esterno su Android HTML e CSS 4
R [PHP] Aggiungere 90 minuti a stringa orario PHP 1
brasoft2019 [PHP] aggiungere timestamp in tabella correlata PHP 0
P [PHP] Aggiungere giorni e stampare risultato da data inserita in input PHP 3
L [Java] Aggiungere elementi ad array JSON Java 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
C [PHP] Aggiungere pulsante paypal PHP 2
M [javascript] Aggiungere eventi al caricamento Javascript 0
M aggiungere streaming audio a pagina html HTML e CSS 2
trattorino [PHP] sql aggiungere dato in una tabella senza cancellare contenuto PHP 6
Francesco Oliviero Aggiungere comando a pulsante HTML HTML e CSS 1
felino [WordPress] [WooCommerce] Ordine: aggiungere nuovi stati con notifica email al cliente WordPress 4
L [Photoshop] Aggiungere file video in timeline Photoshop 1
D [Photoshop] aggiungere piu tracce a immagine Photoshop 4
D Aggiungere slash finale ad URL con .htaccess Web Server 2
G [Javascript] aggiungere sub-namespace Javascript 0
L Aggiungere contenuto con ajax durante lo scroll jQuery 1
felino [WordPress] [Woocommerce] Aggiungere un costo addizionale per prodotto WordPress 0
G [RISOLTO][Javascript] aggiungere elemento ad array definito nella finestra madre da popup Javascript 4
elpirata Aggiungere un disco ssd separato dal raid 1 Hardware 0
S (VENDO) Possiamo aggiungere fino a 20000 Membri nei Gruppi Facebook Italiani Annunci servizi di Social Media Marketing 2
trattorino [PHP] aggiungere html in un codice PHP 0
otto9due Aggiungere n. giorni ad una data nel datepiker jQuery 4
R [HTML] Aggiungere una tabella a fianco di altre tabelle... HTML e CSS 6
F aggiungere codice dopo n elementi jquery jQuery 1
L [Javascript] Aggiungere una riga ad una tabella Javascript 5
asevenx [Javascript] aggiungere righe con select da database e calcolo sconto in automatico Javascript 0
Monital [Javascript] decidere dove aggiungere il campo dinamicamente Javascript 1
asevenx [Javascript] aggiungere dinamicamente un campo di un form Javascript 3
ACarty [Javascript] Aggiungere link alle foto. Javascript 19
matteoraggi Aggiungere filtri a woocommerce WordPress 0
S appinventor, aggiungere tasto registrazione Sviluppo app per Android 1
V Aggiungere un img nel background Sviluppo app per Android 1
felino Capability: aggiungere cap all'editor per admin.php?page WordPress 0
E problema per aggiungere un database mdf da visual studio .NET Framework 9
M Aggiungere input text dopo aver selezionato un campo da una select option Presentati al Forum 0

Discussioni simili