form dinamico php

[neohiro]

Salve a tutti e buona domenica,
allora ho un quesito da sottoporvi per risolvere il mio problema.

Devo fare un form da integrare poi in joomla. Classico form con i classici campi, solo che alla richiesta professione con menù a tendina, se l'utente seleziona "area commerciale" e solo in quel caso sotto, deve apparire un altro menù a tendina con altre possibilità da selezionere.

questo è il codice del form:

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Nome:</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="inserisci il tuo nome" id="nome" name="nome" type="text" />
  
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Cognome:</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="inserisci il tuo cognome" id="cognome" name="cognome" type="text" />
  
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">E mail:</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="inserici la tua E-mail" id="mail" name="mail" type="text" />
  
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Profilo professionale:</label>
    <select class="cf_inputbox validate-selection" id="professione" size="1" title="inserisci una professione"  name="profilo">
    <option value="">Choose Option</option>
      <option value="Programmatore">Programmatore</option>
<option value="Net Content Manager">Net Content Manager</option>
<option value="Web Designer">Web Designer</option>
<option value="Area Commerciale">Area Commerciale</option>

    </select>
    
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">solo se si è scelto Area commerciale:</span> </div>
  <div class="cfclear"></div>
</div>


////// Ecco questo che segue dovrebbe venire fuori solo se prima si è
scelto area commerciale, altrimenti non viene fuori nulla e si
prosegue con il resto del form ///////



<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Area Commerciale</label>
    <select class="cf_inputbox" id="area" size="1" title=""  name="area">
    <option value="">Choose Option</option>
      <option value="Professionisti">Professionisti</option>
<option value="Commercianti">Commercianti</option>
<option value="Piccola impresa">Piccola impresa</option>
<option value="Media impresa">Media impresa</option>
<option value="Grandi aziende">Grandi aziende</option>
<option value="Gruppi imprenditoriali">Gruppi imprenditoriali</option>

    </select>
    
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Url profilo su LinkedIn:</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="linkedin" name="linkedIn" type="text" />
  
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">Messaggio:</label>
    <textarea class="cf_inputbox" rows="3" id="messaggio" title="" cols="30" name="messaggio"></textarea>
    
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_fileupload">
    <label class="cf_label" style="width: 150px;">Invia C.V.</label>
    <input class="cf_fileinput cf_inputbox" title="" size="20" id="cv" name="cv" type="file" />
    
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Invia" name="button_9" type="submit" /><input type="reset" value="Reset"/>
  </div>
  <div class="cfclear"></div>
</div> 

Come posso fare?

Vi ringrazio ed auguro a tutti un buon san valentino
Max

[Jekkil]

potresti rinchiudere tutto quello che deve comparire solo se scegli "area commerciale" in un div impostato con proprietà display:none;

Poi inserisci una funzione javascript quando si cambia la select che ti interessa, in questo modo:

<select class="cf_inputbox validate-selection" id="professione" size="1" title="inserisci una professione" name="profilo" onChange="mostra()">

e la funzione sarà:

function mostra()
{
    if (document.getElementById('professione').value=="Area Commerciale")
    {
        document.getElementById('idDelDivContenitore').style.display="block";
    }
    else
    {
        document.getElementById('idDelDivContenitore').style.display="none";
    }
}

in questo modo quando cambia il valore della select, se selezioni Area Commerciale verrà visualizzato tutto quello che si trova nel div contenitore nascosto,
altrimenti se selezioni altre voci verrà nascosto.

[neohiro]

Ciao Jekkil,
grazie per il tuo pronto aiuto, in effetti mi sembra la soluzione migliore, ho provato ma mi da errore, questo:

Parse error: syntax error, unexpected '=' in /sito/components/com_chronocontact/chronocontact.html.php(141) : eval()'d code on line 6

la riga 6 è questa: document.getElementById('idDelDivContenitore').sty le.display="block";


io ho messo il dispay:none nello style, ma poi ho provato anche a meterlo nella div stessa.

Ho sbagliato qualcosa?

Ovviamente al posto di dDelDivContenitore ho messo area che è il suo id

Ciao e ancora grazie
Max

P.S. La funzione l'ho messa inizio pagina del codice form.

[Jekkil]

la funzione la devi mette nell'head tra i tag <script>

incolla un po' tutta la pagina e vediamo che è successo.

Usi IE? o Firefox?

[neohiro]

<script>
function mostra()
{
if (document.getElementById('professione').value=="Ar ea Commerciale")
{
document.getElementById('area').style.display="blo ck";
}
else
{
document.getElementById('area').style.display="non e";
}
}
</script>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Nome:</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="inserisci il tuo nome" id="nome" name="nome" type="text" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Cognome:</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="inserisci il tuo cognome" id="cognome" name="cognome" type="text" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">E mail:</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="inserici la tua E-mail" id="mail" name="mail" type="text" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Profilo professionale:</label>
<select class="cf_inputbox validate-selection" id="professione" size="1" title="inserisci una professione" name="profilo" onChange="mostra()">
<option value="">Scegli la tua professione</option>
<option value="Programmatore">Programmatore</option>
<option value="Net Content Manager">Net Content Manager</option>
<option value="Web Designer">Web Designer</option>
<option value="Area Commerciale">Area Commerciale</option>

</select>

</div>
<div class="cfclear"></div>
</div>
<div class="maremma">
<div class="form_item">
<div class="form_element cf_text"> <span class="cf_text">solo se si è scelto Area commerciale:</span> </div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Area Commerciale</label>
<select class="cf_inputbox" id="area" size="1" title="" name="area">
<option value="">Scegli la tua area commerciale</option>
<option value="Professionisti">Professionisti</option>
<option value="Commercianti">Commercianti</option>
<option value="Piccola impresa">Piccola impresa</option>
<option value="Media impresa">Media impresa</option>
<option value="Grandi aziende">Grandi aziende</option>
<option value="Gruppi imprenditoriali">Gruppi imprenditoriali</option>

</select>

</div>
</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Url profilo su LinkedIn:</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="linkedin" name="linkedIn" type="text" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: 150px;">Messaggio:</label>
<textarea class="cf_inputbox" rows="3" id="messaggio" title="" cols="30" name="messaggio"></textarea>

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Invia C.V.</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="cv" name="cv" type="file" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_button">
<input value="Invia" name="button_9" type="submit" /><input type="reset" value="Reset"/>
</div>
<div class="cfclear"></div>
</div>














uso firefox, però dovrebbe funzionare su tutti e due..

Ah forse è importante, questo codice sta in joomla, magari lo script lo devo mettere nella pagina che spara il form...

grazie ancora
Max

[Jekkil]

be' io l'ho provato e a me funziona.
Quindi si, lo devi mettere nello script che genera il form!

Prova e fammi sapere

[neohiro]

ok grazie
provo e ti dico


No non mi funziona, probabile che faccia casini con il componente di joomla, farò delle prove...

Grazie mille
Max

[Jekkil]

Quando viene creata la pagina, visualizza il sorgente della pagina e incollalo qui completo, (usa il tag code però) così vediamo cosa viene generato!

[neohiro]

</div>
<div class="clear">
<div class="boxIndent">

<p style="text-align: justify;"><span style="font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: 18px;"><span style="color: #003333;"><span style="color: #858484;">Oggi, essere presenti sul mercato significa essere presenti in rete. Sempre più consumatori, infatti, si rivolgono alla rete per cercare informazioni, consigli su servizi e prodotti, partecipare alla costruzione di eventi e progetti online che che hanno una ricaduta anche sulla società reale. Per questo nasce Lydian: per disegnare le strategie di business in rete dei nostri clienti e aiutarli a selezionare e rielaborare costantemente le proprie risorse secondo linguaggi e modelli in rete che abbiano un senso economico e consentire ai nostri clienti di raggiungere gli obiettivi ottimizzando i processi e con risultati altamente creativi e professionali.</span></span></span>

[img]/sito/images/persito/sapere_roll.jpg[/img]</p> </div>
</div>
</div>

</div>
</div>

<div id="container" class="equal">
<div class="clear">

<script>
function mostra()
{
if (document.getElementById('professione').value=="Ar ea Commerciale")
{
document.getElementById('area').style.display="blo ck";
}
else
{
document.getElementById('area').style.display="non e";
}
}
</script>
<div class="article-title-indent">
<div class="article-title-wrapper">
<table class="contentpaneopen">
<tr>
<td class="contentheading" width="100%"> Lavora con noi </td>
<td width="100%"><div class="icon-indent">
<table>

<tr>
<td align="right" width="100%" class="buttonheading">[img]/sito/images/M_images/pdf_button.png[/img] </td>
<td align="right" width="100%" class="buttonheading">[img]/sito/images/M_images/printButton.png[/img] </td>
<td align="right" width="100%" class="buttonheading">[img]/sito/images/M_images/emailButton.png[/img] </td>
</tr>
</table>
</div></td>

</tr>
</table>
</div>
</div>
<div class="article-text-indent">
<div class="clear">
<table class="contentpaneopen">
<tr>
<td valign="top">
<form name="ChronoContact_lavora" id="ChronoContact_lavora" method="post" enctype="multipart/form-data" action="http://www.lydian.it/sito/index.php?option=com_chronocontact&amp;task=send&a mp;chronoformname=lavora&amp;Itemid=57" >


<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Nome:</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="inserisci il tuo nome" id="nome" name="nome" type="text" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">

<label class="cf_label" style="width: 150px;">Cognome:</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="inserisci il tuo cognome" id="cognome" name="cognome" type="text" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">E mail:</label>

<input class="cf_inputbox required" maxlength="150" size="30" title="inserici la tua E-mail" id="mail" name="mail" type="text" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Profilo professionale:</label>
<select class="cf_inputbox validate-selection" id="professione" size="1" title="inserisci una professione" name="profilo" onChange="mostra()">
<option value="">Scegli la tua professione</option>

<option value="Programmatore">Programmatore</option>
<option value="Net Content Manager">Net Content Manager</option>
<option value="Web Designer">Web Designer</option>
<option value="Area Commerciale">Area Commerciale</option>

</select>

</div>
<div class="cfclear"></div>
</div>

<div class="maremma">
<div class="form_item">
<div class="form_element cf_text"> <span class="cf_text">solo se si è scelto Area commerciale:</span> </div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Area Commerciale</label>

<select class="cf_inputbox" id="area" size="1" title="" name="area">
<option value="">Scegli la tua area commerciale</option>
<option value="Professionisti">Professionisti</option>
<option value="Commercianti">Commercianti</option>
<option value="Piccola impresa">Piccola impresa</option>
<option value="Media impresa">Media impresa</option>
<option value="Grandi aziende">Grandi aziende</option>
<option value="Gruppi imprenditoriali">Gruppi imprenditoriali</option>

</select>

</div>
</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Url profilo su LinkedIn:</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="linkedin" name="linkedIn" type="text" />


</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: 150px;">Messaggio:</label>
<textarea class="cf_inputbox" rows="3" id="messaggio" title="" cols="30" name="messaggio"></textarea>

</div>

<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Invia C.V.</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="cv" name="cv" type="file" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_button">
<input value="Invia" name="button_9" type="submit" /><input type="reset" value="Reset"/>
</div>
<div class="cfclear"></div>
</div>











<input type="hidden" name="fa607e7f2ef0ddacf00d2c313209ac9c" value="1" />
<input type="hidden" name="cfreturnurl" value="http://www.lydian.it/sito/index.php?option=com_content&view=article&id=54&It emid=57" />

</form>


<script type="text/javascript">
Element.extend({

[neohiro]

ciao a parte il casino che ho postato del sorgente.
Ho provato a fare una pagina con solo il codice ma non mi funziona comunque.


<!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>Untitled Document</title>
<script>
function mostra()
{
if (document.getElementById('professione').value=="Ar ea Commerciale")
{
document.getElementById('area').style.display="blo ck";
}
else
{
document.getElementById('area').style.display="non e";
}
}
</script>
</head>

<style type="text/css">
<!--
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003366;
}
.maremma {
background-color: #b6c4eb;
display: none;
}
-->
</style>

<body>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Nome:</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="inserisci il tuo nome" id="nome" name="nome" type="text" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Cognome:</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="inserisci il tuo cognome" id="cognome" name="cognome" type="text" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">E mail:</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="inserici la tua E-mail" id="mail" name="mail" type="text" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Profilo professionale:</label>
<select class="cf_inputbox validate-selection" id="professione" size="1" title="inserisci una professione" name="profilo" onChange="mostra()">
<option value="">Scegli la tua professione</option>
<option value="Programmatore">Programmatore</option>
<option value="Net Content Manager">Net Content Manager</option>
<option value="Web Designer">Web Designer</option>
<option value="Area Commerciale">Area Commerciale</option>

</select>

</div>
<div class="cfclear"></div>
</div>
<div class="maremma" display:none>
<div class="form_item">
<div class="form_element cf_text"> <span class="cf_text">solo se si è scelto Area commerciale:</span> </div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Area Commerciale</label>
<select class="cf_inputbox" id="area" size="1" title="" name="area">
<option value="">Scegli la tua area commerciale</option>
<option value="Professionisti">Professionisti</option>
<option value="Commercianti">Commercianti</option>
<option value="Piccola impresa">Piccola impresa</option>
<option value="Media impresa">Media impresa</option>
<option value="Grandi aziende">Grandi aziende</option>
<option value="Gruppi imprenditoriali">Gruppi imprenditoriali</option>

</select>

</div>
</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Url profilo su LinkedIn:</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="linkedin" name="linkedIn" type="text" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: 150px;">Messaggio:</label>
<textarea class="cf_inputbox" rows="3" id="messaggio" title="" cols="30" name="messaggio"></textarea>

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Invia C.V.</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="cv" name="cv" type="file" />

</div>
<div class="cfclear"></div>
</div>

<div class="form_item">
<div class="form_element cf_button">
<input value="Invia" name="button_9" type="submit" /><input type="reset" value="Reset"/>
</div>
<div class="cfclear"></div>
</div>






<span class="style1">ccc</span>





</body>
</html>