Nascondere una parte di form

**bisco11** · 24-01-2017, 16:02

Buongiorno a tutti.

Nel terzo campo di questo form alla voce "Hai gia in mente dei modelli di smartphone?" se selezione l'opzione "Si" mi appare un campo text.
Vorrei far si che quando schiaccio "Si" mi appaia il campo text e contemporaneamente mi nasconda tutti i campi che ho sotto.

Qualcuno puo' aiutarmi?

Ecco il codice
dal tag script cè il codice che interessa

codice:

<form name="sentMessage" method="post" action="mail/dettagliemail.php">                                    
                                       <div class="row control-group">
                                            <div class="form-group col-xs-12 controls">
                                                <label for="email">Email<span>*</span></label>
                                                <input type="text" class="form-control" placeholder="Email" name="email" required data-validation-required-message="Per favore inserisci un Email valida">
                                                <p class="help-block"></p>
                                            </div>
                                        </div>
                                        
                                        <script language="javascript"> 
    function toggleMe(obj, a){ 
      var e=document.getElementById(a); 
      if(obj=="due"){ 
        e.style.display="block"; 
      }else{ 
    e.style.display="none"; 
} 
    } 
</script> 




                                            <div class="row control-group">
                                            <div class="form-group col-xs-12 controls">
                                            
                                             <script language="javascript"> 
    function toggleMe(obj, a){ 
      var e=document.getElementById(a); 
      if(obj=="due"){ 
        e.style.display="block"; 
        hide.style.display="none";
      }else{ 
    e.style.display="none"; 
} 
    } 
</script> 




 
<strong>Hai già in mente dei modelli di smartphone?</strong>
<!--Se selezioni caso 1 non appare niente 
    se selezioni caso 2 appare la tabella con l'altro campo a selezione multipla 
--> 
        <select name="scelta" onchange="toggleMe(this.options[this.selectedIndex].value, 'esempioInfo')"> 
          <option value="" selected>- Seleziona</option> 
          <option value="uno" >No</option> 
          <option value="due">Si</option> 
         </select>        
   
  <div id="esempioInfo" style="display: none;">          
    <div class="row control-group">
                                    <div class="form-group col-xs-12 controls">
                                        <label for="scelta2">Inserisci i modelli</label>
                                        <textarea rows="5" type="text" class="form-control" placeholder="Inserisci i modelli" name="scelta2"></textarea>
                                        <p class="help-block"></p>
                                    </div>
                                </div>
  </div> 
  
  </div>
  </div>
                                        
                                        <div class="row control-group">
                                            <div class="form-group col-xs-12 controls">
                                                <label for="prodotto">Marca cellulare preferita<span>*</span></label>
                                                <input type="text" class="form-control" placeholder="Marca cellulare preferita" name="prodotto" required data-validation-required-message="Per favore inserisci il prodotto">
                                                <p class="help-block"></p>
                                            </div>
                                        </div>
                                          
                                <div class="row control-group">
                                    <div class="form-group col-xs-12  controls">
                                        <label for="dimensione">Dimensione display<span>*</span></label>
                                        <input type="text" class="form-control" placeholder="Dimensioni display" name="dimensione" required data-validation-required-message="Per favore inserisci  le dimensioni dello schermo desiderate">


                                    </div>
                                </div>
                                
                                <div class="row control-group">
                                    <div class="form-group col-xs-12  controls">
                                        <label for="so">Sistema operativo<span>*</span></label>
                                        <input type="text" class="form-control" placeholder="Sistema operativo  Android / Windows / Apple" name="so" required data-validation-required-message="Per favore inserisci  il sistema operativo desiderato">


                                    </div>
                                </div>
                                
                                <div class="row control-group">
                                    <div class="form-group col-xs-12 controls">
                                        <label for="dettagli">Altre caratteristiche desiderate</label>
                                        <textarea rows="5" type="text" class="form-control" placeholder="Altre caratteristiche desiderate" name="dettagli"></textarea>
                                        <p class="help-block"></p>
                                    </div>
                                </div>
                                
                                <div class="row control-group">
                                    <div class="form-group col-xs-12 controls">
                                        <label for="prezzo">Prezzo Massimo<span>*</span></label>
                                        <input type="text" class="form-control" placeholder="Prezzo Massimo" name="prezzo" required data-validation-required-message="Per favore inserisciun prezzo massimo">
                                        <p class="help-block"></p>
                                    </div>
                                </div>


                                <div id="success"></div>
                                <div class="row">
                                    <div class="form-group col-xs-12 text-right">
                                        <button type="submit" name="button" class="btn btn-primary btn-lg">Invia Richiesta</button>
                                    </div>
                                </div>
                            </form>
                            
                            <input style="float:left;" type="checkbox" checked ><p style="margin-left:20px;"> Con la spunta dichiaro di aver letto
l'informativa privacy pubblicata <a href="privacy.html">QUI</a> ed autorizzo il trattamento dei miei dati personali.</p>


                        </div>

**Little Hawk** · 24-01-2017, 19:37

Perche' hai messo quella funzione due volte? Prova il codice sotto. Ti basta wrappare i campi alternativi in un div che puoi far comparire quando l'altro viene nascosto. Cmq ti consiglio di dare un'occhiata ad unobtrusive javascript/css.

codice:

<form name="sentMessage" method="post" action="mail/dettagliemail.php">   <div class="row control-group">
      <div class="form-group col-xs-12 controls">
         <label for="email">Email<span>*</span></label>
         <input type="text" class="form-control" placeholder="Email" name="email" required data-validation-required-message="Per favore inserisci un Email valida">
         <p class="help-block"></p>
      </div>
   </div>
   <script language="javascript">
      function toggleFields() {
        var scelta = document.getElementById("scelta");
        var txtField = document.getElementById("esempioInfo");
        var alternateFields = document.getElementById("alternate_fields");


        if (scelta.selectedIndex === 2) {
          txtField.style.display = "block";
          alternateFields.style.display = "none";
        } else {
          txtField.style.display = "none";
          alternateFields.style.display = "block";
        };
      }
   </script>
   <div class="row control-group">
      <div class="form-group col-xs-12 controls">
         <strong>Hai già in mente dei modelli di smartphone?</strong>
         <!--Se selezioni caso 1 non appare niente
            se selezioni caso 2 appare la tabella con l'altro campo a selezione multipla
            -->
         <select name="scelta" id="scelta" onchange="toggleFields()">
            <option value="" selected>- Seleziona</option>
            <option value="uno" >No</option>
            <option value="due">Si</option>
         </select>
         <div id="esempioInfo" style="display: none;">
            <div class="row control-group">
               <div class="form-group col-xs-12 controls">
                  <label for="scelta2">Inserisci i modelli</label>
                  <textarea rows="5" type="text" class="form-control" placeholder="Inserisci i modelli" name="scelta2"></textarea>
                  <p class="help-block"></p>
               </div>
            </div>
         </div>
      </div>
   </div>
    <div id="alternate_fields" style="display: none;">
      <div class="row control-group">
         <div class="form-group col-xs-12 controls">
            <label for="prodotto">Marca cellulare preferita<span>*</span></label>
            <input type="text" class="form-control" placeholder="Marca cellulare preferita" name="prodotto" required data-validation-required-message="Per favore inserisci il prodotto">
            <p class="help-block"></p>
         </div>
      </div>
      <div class="row control-group">
         <div class="form-group col-xs-12  controls">
            <label for="dimensione">Dimensione display<span>*</span></label>
            <input type="text" class="form-control" placeholder="Dimensioni display" name="dimensione" required data-validation-required-message="Per favore inserisci  le dimensioni dello schermo desiderate">
         </div>
      </div>
      <div class="row control-group">
         <div class="form-group col-xs-12  controls">
            <label for="so">Sistema operativo<span>*</span></label>
            <input type="text" class="form-control" placeholder="Sistema operativo  Android / Windows / Apple" name="so" required data-validation-required-message="Per favore inserisci  il sistema operativo desiderato">
         </div>
      </div>
      <div class="row control-group">
         <div class="form-group col-xs-12 controls">
            <label for="dettagli">Altre caratteristiche desiderate</label>
            <textarea rows="5" type="text" class="form-control" placeholder="Altre caratteristiche desiderate" name="dettagli"></textarea>
            <p class="help-block"></p>
         </div>
      </div>
      <div class="row control-group">
         <div class="form-group col-xs-12 controls">
            <label for="prezzo">Prezzo Massimo<span>*</span></label>
            <input type="text" class="form-control" placeholder="Prezzo Massimo" name="prezzo" required data-validation-required-message="Per favore inserisciun prezzo massimo">
            <p class="help-block"></p>
         </div>
      </div>
    </div>
   <div id="success"></div>
   <div class="row">
      <div class="form-group col-xs-12 text-right">
         <button type="submit" name="button" class="btn btn-primary btn-lg">Invia Richiesta</button>
      </div>
   </div>
</form>
<input style="float:left;" type="checkbox" checked >
<p style="margin-left:20px;"> Con la spunta dichiaro di aver letto
   l'informativa privacy pubblicata <a href="privacy.html">QUI</a> ed autorizzo il trattamento dei miei dati personali.
</p>

**bisco11** · 24-01-2017, 20:14

Sei un grande

era proprio quello che volevo.
Ti ringrazio molto.
Buonaserata caro.

**Little Hawk** · 24-01-2017, 20:15

Originariamente inviata da bisco11

Sei un grande

era proprio quello che volevo.
Ti ringrazio molto.
Buonaserata caro.

Figurati

**bisco11** · 24-01-2017, 22:15

Un ultima cosa.
il JavaScript funziona, però quando seleziono l'opzione si non va il tasto Invia

secondo te quale può essere l'errore?

questa è la pagina
http://www.expertone.eu/acquisto-cons.html

Discussione: Nascondere una parte di form

Strumenti discussione

Ricerca discussione

Visualizza

Nascondere una parte di form

Permessi di invio