sostituzione valori option in form

**Panto91** · 20-07-2012, 12:38

Ciao a tutti ragazzi, ho un problema con un sistema che sto sviluppando per permettere un ordine di prodotti online ma con pagamenti quali bonifico, contrassegno o ritiro a mano presso un posto.

Ho creato la pagina del form che vi mostro qui di seguito ma devo fare in modo che a seconda del valore selezionato nella select della spedizione mi cambino le option della modalità di pagamento ma senza ricaricare la pagina!!!

AIUTO

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>

<body>

<form action="bbb.php" method="POST">
	<fieldset title="Anagrafica">
		<label for="nome">Nome: </label>
    		<input type="text" name="nome" required="required" />

		<label for="cognome">Cognome: </label>
        	<input type="text" name="cognome" required="required" />

		<label for="data-nascita">Data di nascita: </label>
        	<input type="date" name="data-nascita" required="required" />

		<label for="indirizzo">Indirizzo residenza: </label>
			<select name="tipo-indirizzo-res" >
            	<option value="Via">Via</option>
                <option value="Viale">Viale</option>
                <option value="Vicolo">Vicolo</option>
                <option value="Piazza">Piazza</option>
                <option value="Circ.ne">Circ.ne</option>
                <option value="Altro ...">Altro ...</option>
            </select>
        	<input type="text" name="via-res" required="required" />
            <label for="civico-res"> Civico </label>
            	<input type="text" name="civico-res" maxlength="6" size="6" required="required" />

        <label for="citta">Città: </label>
        	<input type="text" name="citta" required="required" />
        <label for="cap">CAP: </label>
        	<input type="text" name="cap" required="required" maxlenght="5" size="5"/>
        <label for="provincia">Provincia: </label>
        	<input type="text" name="provincia" required="required" maxlength="2" size="2" />

		<label for="codice-fiscale">Codice fiscale: </label>
        	<input type="text" name="codice-fiscale" required="required" max="16" size="16"/>

		<label for="mail">e-Mail: </label>
        	<input type="email" name="mail" required="required" max="40" size="30"/>

		<label for="telefono">Telefono: </label>
        	<input type="text" name="telefono" required="required" maxlength="12" size="12"/>

		<label for="cellulare">Cellulare: </label>
        	<input type="text" name="cellulare" maxlength="12" size="12" />

    </fieldset>
    <fieldset title="Spedizione">
    	Lasciare i seguenti campi vuoti se vuoi che la spedizione avvenga all'indirizzo di residenza indicato sopra.
 
        <label for="indirizzo">Indirizzo spedizione: </label>
			<select name="tipo-indirizzo-sped" >
            	<option value="Via">Via</option>
                <option value="Viale">Viale</option>
                <option value="Vicolo">Vicolo</option>
                <option value="Piazza">Piazza</option>
                <option value="Circ.ne">Circ.ne</option>
                <option value="Altro ...">Altro ...</option>
            </select>
        	<input type="text" name="via-sped" />
            <label for="civico-sped"> Civico </label>
            	<input type="text" name="civico-sped" maxlength="6" size="6"/> 
        <label for="citta-sped">Città: </label>
        	<input type="text" name="citta-sped"/>
        <label for="cap-sped">CAP: </label>
        	<input type="text" name="cap-sped" maxlenght="5" size="5"/>
        <label for="provincia-sped">Provincia: </label>
        	<input type="text" name="provincia-sped" maxlength="2" size="2" />

    </fieldset>
    <fieldset title="Prodotto">
    	Qui di seguito scegli il prodotto che desideri acquistare.
 
        <label for="prodotto">Prodotto da acquistare: </label>
			<select name="prodotto" >
            	<option value="Racchettone">Racchettone</option>
            </select>
            <label for="q" />Quantità: </label>
            	<input type="text" name="q" maxlength="2" size="2"/>
    </fieldset>
    <fieldset title="Spedizione">
    	Qui di seguito scegli il metodo di spedizione.
 
        <label for="spedizione">Spedizione: </label>
			<select name="spedizione" >
            	<option value="Corriere Espresso (€6.50)">Corriere Espresso (€6.50)</option>
                <option value="Ritiro presso XXX">Ritiro presso XXX</option>
            </select>

QUI CI ANDREBBE LA SELECT CHE SELEZIONA IL METODO DI PAGAMENTO:
   - SE LA SPEDIZIONE E' CORRIERE ESPRESSO ALLORA LA SCELTA DEVE ESSERE TRA "BONIFICO BANCARIO" O "CONTRASSEGNO"
   - SE LA SPEDIZIONE E' RITIRO PRESSO XXX ALLORA LA SCELTA DEVE ESSERE OBBLIGATORIAMENTE "RITIRO"


eccetera....

please help me!!!

ovviamente la pagina bbb.php che è l'action del form riceve tutti i dati in POST e fa dei calcoli che funzionano alla perfezione ...

l'unico problema è quella scelta li!

NON voglio usare un database voglio fare tutto con variabili e altre poche cose. non ho a disposizione un database.

GRAZIE

**Vincent.Zeno** · 20-07-2012, 12:48

devo fare in modo che a seconda del valore selezionato nella select della spedizione mi cambino le option della modalità di pagamento ma senza ricaricare la pagina

puoi farlo con javascript, sposto

cambio il titolo, troppo generico
la parole tipo "aiuto"... non aiutano, evitale

buon lavoro

**Panto91** · 20-07-2012, 12:51

si ok in javascript, ma come? sono totalmente a digiudo di javascript.

**scimmiaparlante** · 20-07-2012, 12:51

devi usare javascript e fare un controllo ogni volta che la select sopra cambia.
Ti consiglio di leggerti la guida di base di html.it e la guida sul dom

**Panto91** · 20-07-2012, 12:57

avete ragione ragazzi ma mi servirebbe una volta nella vita e un piccolo aiutino mi farebbe comodo ... devo farlo velocemente perchè ho le ore contate e mi farebbe piacere che mi scriveste voi quelle 5 righe di codice per farlo ...

non ho tempo di leggermi tutta la guida di base di javascript ci metterei troppo tempo, ho bisogno di implementarlo entro massimo domani mattina

potete aiutarmi?

**Vincent.Zeno** · 20-07-2012, 13:11

io non so scrivertelo ma di sicuro trovi diversi esempi in rete cercando qualcosa tipo "onchange cambiare valori option"

**scimmiaparlante** · 20-07-2012, 20:14

puoi fare una cosa così
NELLA HEAD

codice:

<script type="text/javascript">
function cambia_select()
{
	if (document.getElementById('spedizione').value == 'Corriere Espresso (€6.50)')
	{	document.getElementById('pagamento').innerHTML = '<option value="bonifico">bonifico</option><option value="contrassegno">contrassegno</option>';
	}
	
	else if (document.getElementById('spedizione').value == 'Ritiro presso XXX')
	{	document.getElementById('pagamento').innerHTML = '<option value="ritiro">ritiro</option>';
	}
}
</script>

e poi in fondo

codice:

<label for="spedizione">Spedizione: </label>
			<select name="spedizione" onChange="cambia_select();" id="spedizione">
            	<option value="Corriere Espresso (€6.50)">Corriere Espresso (€6.50)</option>
                <option value="Ritiro presso XXX">Ritiro presso XXX</option>
            </select>

			
	<select name="pagamento" id="pagamento">
            	Qui ci metti le option che vuoi di default
            </select>
			
	</fieldset>
	</form>

occhio che ho messo degli id e l'evento sull'onChange

**carlomarx** · 21-07-2012, 00:59

In questi casi una buona soluzione è l'uso di un albero di oggetti, che puoi estendere a piacimento assieme alla select "spedizione":

codice:

<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Esempio</title>
<script type="text/javascript">
var oPayments = {
	"corriere": {
		"bonifico": "Bonifico bancario",
		"contrassegno": "Contrassegno"
	},
	"ritiro": {
		"ritiro": "Ritiro"
	}
};

function listPayments () {
	var	oNewOpt, sConsign = document.frmSpedizione.spedizione.options[document.frmSpedizione.spedizione.selectedIndex].value,
		oList = oPayments[sConsign], oSelect = document.frmSpedizione.pagamento;

	oSelect.innerHTML = "";

	for (var sOption in oList) {
		oNewOpt = document.createElement("option");
		oNewOpt.value = sOption;
		oNewOpt.innerHTML = oList[sOption];
		oSelect.appendChild(oNewOpt);
	}
}

window.onload = listPayments;
</script>
</head>

<body>

<form action="bbb.php" method="POST" name="frmSpedizione">
	<fieldset>
		<legend>Anagrafica</legend>
		Nome: <input type="text" name="nome" />

		Cognome: <input type="text" name="cognome" />

		Data di nascita: <input type="date" name="data-nascita" />

		Indirizzo residenza:
		<select name="tipo-indirizzo-res">
			<option value="Via">Via</option>
			<option value="Viale">Viale</option>
			<option value="Vicolo">Vicolo</option>
			<option value="Piazza">Piazza</option>
			<option value="Circ.ne">Circ.ne</option>
			<option value="Altro ...">Altro ...</option>
		</select>
		<input type="text" name="via-res" /> Civico <input type="text" name="civico-res" size="6" maxlength="6" />

		Citt&amp;agrave;: <input type="text" name="citta" /> CAP: <input type="text" name="cap" size="5" /> Provincia: <input type="text" name="provincia" size="2" maxlength="2" />

		Codice fiscale: <input type="text" name="codice-fiscale" size="16" />

		e-Mail: <input type="email" name="mail" size="30" />

		Telefono: <input type="text" name="telefono" size="12" maxlength="12" />

		Cellulare: <input type="text" name="cellulare" size="12" maxlength="12" />
	</fieldset>
	<fieldset>
		<legend>Spedizione</legend>
		Lasciare i seguenti campi vuoti se vuoi che la spedizione avvenga all'indirizzo di residenza indicato sopra.
Indirizzo spedizione:
		<select name="tipo-indirizzo-sped">
			<option value="Via">Via</option>
			<option value="Viale">Viale</option>
			<option value="Vicolo">Vicolo</option>
			<option value="Piazza">Piazza</option>
			<option value="Circ.ne">Circ.ne</option>
			<option value="Altro ...">Altro ...</option>
		</select>
		<input type="text" name="via-sped" /> Civico <input type="text" name="civico-sped" size="6" maxlength="6" /> Citt&amp;agrave;: <input type="text" name="citta-sped" /> CAP: <input type="text" name="cap-sped" size="5" /> Provincia: <input type="text" name="provincia-sped" size="2" maxlength="2" />
	</fieldset>
	<fieldset>
		<legend>Prodotto</legend>
		Qui di seguito scegli il prodotto che desideri acquistare.
Prodotto da acquistare:
		<select name="prodotto">
			<option value="Racchettone">Racchettone</option>
		</select>
		Quantit&amp;agrave;: <input type="text" name="q" size="2" maxlength="2" />
	</fieldset>
	<fieldset>
		<legend>Pagamento</legend>
		Qui di seguito scegli il metodo di spedizione.

		Spedizione:
		<select name="spedizione" onchange="listPayments();">
			<option selected value="corriere">Corriere Espresso (&amp;euro;6.50)</option>
			<option value="ritiro">Ritiro presso XXX</option>
		</select>
		Pagamento:
		<select name="pagamento"></select>
	</fieldset>
</form>

</body>
</html>

P.S. Ti ho eliminato tutte le label, ché le usavi male: l'attributo "for" delle label infatti non si associa al name del campo, come facevi tu, bensì al suo id. Di conseguenza tutte quelle label venivano tranquillamente ignorate dal browser. E siccome i tuoi campi non avevano id, ho trovato più comodo eliminartele. Per eliminarle ho usato TinyMce, in automatico.

Discussione: sostituzione valori option in form

Strumenti discussione

Ricerca discussione

Visualizza

problema form

Permessi di invio