Emuliamo il form di tiscali con chronoform

[Mistik]

Salve a tutti,
sto cercando di emulare il form di tiscali seguendo la guida di Vales sui forms a geometria variabile.


Il problema che mi assilla è quello di inserire un select box tra due radio button (Si - No) e far in modo che attivando il "Si" venga attivato il selettore, e che una voce di quest'ultimo attivi il div a scomparsa.
Mentre scegliendo NO si attivi direttamente il div a scomparsa.


Spero di essere stato chiaro, comunque inserisco lo script (almeno fin dove sono giunto).


Cmq non capisco perché non riesco ad incollare il codice con i   tra <>

codice html

Codice: [Seleziona]



<style type="text/css">
#boxTc{width:657px;}
.contboxTc{
width:627px;
background:#efefef;
}


.content {
    padding: 0;
    width: 627px;
}


.question {
    margin-left: 20px;
    margin-top: 18px !important;
    width: 245px;
}
div, .fL {
    float: left;
}
div, .mL {
    margin: left;
}


.box_indirizzo {
    margin: 5px 0 0;
    width: 607px;
}


.boxAddress
div, .fL {
    float: left;
}
#city {
    margin-left: 10px;
    width: 175px;
}
#StreetAddressDiv {
    width: 188px;
 margin-right: 7px;
}
#civico {
    width: 50px;
margin-right: 31px;
}


#zipcode {
    width: 40px;
 margin-right: 31px;
}
#provincia {
    width: 20px;
 margin-right: 10px;
}
#prefisso {
    margin-left: 10px;
    width: 93px;
}
#numero {
    width: 188px;
 margin-right: 7px;
}
</style>


<div style="width:100%"><img src="img/grey.gif" alt="" /><>
<h4>Se non hai una linea telefonica puoi attivare il servizio su una nuova linea</h4>
<div class="contboxTc">
<div class="content">
<div class="question fL">Hai un servizio telefonico?<>
<div class="fL" style="margin-top:20px">
<div class="form_item">
  <div class="form_element cf_radiobutton">
          <input value="Si" title="" class="radio validate-one-required"
 id="radio00" name="radio0" type="radio" rel="con"/>
      <label for="radio00" class="radio_label">Si, con </label>
 
<div class="mL10 fL" id="olo_voce"><select name="ALTRO_OLO_TEL" id="ALTR_OLO_TEL" disabled="disabled">
<option selected="selected" value="scelta">- scelta operatore -</option>
<option value="Telecom">TELECOM ITALIA</option>
<option value="Fastweb">FASTWEB</option>
<option value="Libero">LIBERO INFOSTRADA</option>
<option value="Teletu">TELE2 / TELE TU</option>
<option value="Tiscali">TISCALI</option>
<option value="Altro">ALTRO</option>
</select><>
 
<div class="fL mL30" style="margin-top:20px"><input value="No" title="" class="radio validate-one-required"
id="radio01" name="radio0" type="radio" value="check" rel="none"/>
      <label for="radio01" class="radio_label">No</label>
<>
 <>
 <>
 <p></p>
<table cellspacing="0" cellpadding="0" width="95%" title="" class="multi_container">
<div class="content">
<div class="question fL">Hai un servizio adsl?<>
<div class="fL" style="margin-top:20px">
<div class="form_item">
  <div class="form_element cf_radiobutton">
    <class="float_middle">
      <input value="italiana" title="" class="radio validate-one-required"
 id="radio20" name="radio2" type="radio" rel="ita"/>
      <label for="radio20" class="radio_label">Si, con </label>
<input value="straniera" title="" class="radio validate-one-required"
 id="radio21" name="radio2" type="radio" rel="str"/>
      <label for="radio21" class="radio_label">No</label>
<div class="mL10 fL" id="olo_voce">
<select name="ALTRO_OLO_DAT" id="ALTR_OLO_DAT" disabled="disabled">
<option selected="selected" value="scelta">- scelta operatore -</option>
<option value="Telecom">TELECOM ITALIA</option>
<option value="Fastweb">FASTWEB</option>
<option value="Libero">LIBERO INFOSTRADA</option>
<option value="Teletu">TELE2 / TELE TU</option>
<option value="Tiscali">TISCALI</option>
<option value="Altro">ALTRO</option>
</select>
<>
<>
<>
<>
<>
<div id="city">
<table cellspacing="0" cellpadding="0" width="95%" title="" class="cf_multiholder">
<div class="form_item" rel="ita">
  <div class="form_element cf_textbox" rel="ita">
<div id="boxAddress" >
<p>Localita'</p>
       <input class="cf_inputbox validate-alpha" maxlength="30" size="26"
 title="" id="text_14" name="regione" type="text" />
 <>
<>
  <>
<div class="form_item" rel="ita">
 <div class="form_element cf_textbox" rel="ita">
<div id="StreetAddressDiv">
<p>Indirizzo</p>
        <input class="cf_inputbox validate-alpha" maxlength="30" size="26"
 title="" id="text_14" name="indirizzo" type="text" />
 <>
 <>
<>
<div class="form_item" rel="ita">
  <div class="form_element cf_textbox" rel="ita">
<div id="civico">
<p>N.civico</p>
      <input class="cf_inputbox validate-alpha" maxlength="7" size="7"
 title="" id="text_14" name="civico" type="text" />
 <>
<>
 <>
<div class="form_item" rel="ita">
  <div class="form_element cf_textbox" rel="ita">
<div id="zipcode">
<p>C.A.P.</p>
<input class="cf_inputbox validate-number" maxlength="5" size="5"
 title="" id="text_14" name="cap" type="text" />
<>
<>
<>
<div class="form_item" rel="ita">
  <div class="form_element cf_textbox" rel="ita">
<div id="provincia">
<p>Provincia</p>
        <input class="cf_inputbox validate-alpha" maxlength="2" size="2"
 title="" id="text_14" name="prov" type="text" />
  <>
<>
<>
<div class="form_item" rel="str">
  <div class="form_element cf_textbox" rel="str">
<>
<>
    </table>
<table cellspacing="0" cellpadding="0" width="95%" title="" class="multi_container">
<div class="form_item" rel="con">
  <div class="form_element cf_textbox" rel="con">
<div id="prefisso">
<p>Prefisso</p>
       <input class="cf_inputbox validate-number" maxlength="8" size="9"
title="" id="text_5" name="prefix" type="text" />
  </td>
<>
<>
<>
<div class="form_item" rel="con">
<div class="form_element cf_textbox" rel="con">
<div id="numero">
<p>Numero</p>
<input class="cf_inputbox validate-number" maxlength="15" size="16"
 title="" id="text_6" name="numerix" type="text" />
  <>
<>
</td>
 </tr>
    </table>
<div class="form_item">
  <div class="form_element cf_button">
    <input value="Invia" name="button_17" type="submit" /><input type="reset"
 name="reset" value="Reset"/>
<>
<div class="cfclear"><>
<>
<>
<>









codice javascript

Codice: [Seleziona]




/*****************************************/
/** Usable Forms 2.0, November 2005     **/
/** Written by ppk, www.quirksmode.org  **/
/** Instructions for use on my site     **/
/**                                     **/
/** You may use or change this script   **/
/** only when this copyright notice     **/
/** is intact.                          **/
/**                                     **/
/** If you extend the script, please    **/
/** add a short description and your    **/
/** name below.                         **/
/*****************************************/


var containerTag = 'DIV';


var compatible = (
   document.getElementById && document.getElementsByTagName && document.createElement
   &&
   !(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
   );


if (compatible)
{
   document.write('<style>.accessibility{display: none}</style>');
   var waitingRoom = document.createElement('div');
}


var hiddenFormFieldsPointers = new Object();


function prepareForm()
{
   if (!compatible) return;
   var marker = document.createElement(containerTag);
   marker.style.display = 'none';


   var x = document.getElementsByTagName('select');
   for (var i=0;i<x.length;i++)
      addEvent(x[i],'change',showHideFields)


   var x = document.getElementsByTagName(containerTag);
   var hiddenFields = new Array;
   for (var i=0;i<x.length;i++)
   {
      if (x[i].getAttribute('rel'))
      {
         var y = getAllFormFields(x[i]);
         x[i].nestedRels = new Array();
         for (var j=0;j<y.length;j++)
         {
            var rel = y[j].getAttribute('rel');
            if (!rel || rel == 'none') continue;
            x[i].nestedRels.push(rel);
         }
         if (!x[i].nestedRels.length) x[i].nestedRels = null;
         hiddenFields.push(x[i]);
      }
   }


   while (hiddenFields.length)
   {
      var rel = hiddenFields[0].getAttribute('rel');
      if (!hiddenFormFieldsPointers[rel])
         hiddenFormFieldsPointers[rel] = new Array();
      var relIndex = hiddenFormFieldsPointers[rel].length;
      hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
      var newMarker = marker.cloneNode(true);
      newMarker.id = rel + relIndex;
      hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
      waitingRoom.appendChild(hiddenFields.shift());
   }
   
   setDefaults();
   addEvent(document,'click',showHideFields);
}


function setDefaults()
{
   var y = document.getElementsByTagName('input');
   for (var i=0;i<y.length;i++)
   {
      if (y[i].checked && y[i].getAttribute('rel'))
         intoMainForm(y[i].getAttribute('rel'))
   }


   var z = document.getElementsByTagName('select');
   for (var i=0;i<z.length;i++)
   {
      if (z[i].options[z[i].selectedIndex].getAttribute('rel'))
         intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel'))
   }


}


function showHideFields(e)
{
   if (!e) var e = window.event;
   var tg = e.target || e.srcElement;


   if (tg.nodeName == 'LABEL')
   {
      var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor');
      tg = document.getElementById(relatedFieldName);
   }
     
   if (
      !(tg.nodeName == 'SELECT' && e.type == 'change')
      &&
      !(tg.nodeName == 'INPUT' && tg.getAttribute('rel'))
      ) return;


   var fieldsToBeInserted = tg.getAttribute('rel');


   if (tg.type == 'checkbox')
   {
      if (tg.checked)
         intoMainForm(fieldsToBeInserted);
      else
         intoWaitingRoom(fieldsToBeInserted);
   }
   else if (tg.type == 'radio')
   {
      removeOthers(tg.form[tg.name],fieldsToBeInserted)
      intoMainForm(fieldsToBeInserted);
   }
   else if (tg.type == 'select-one')
   {
      fieldsToBeInserted = tg.options[tg.selectedIndex].getAttribute('rel');
      removeOthers(tg.options,fieldsToBeInserted);
      intoMainForm(fieldsToBeInserted);
   }
}


function removeOthers(others,fieldsToBeInserted)
{
   for (var i=0;i<others.length;i++)
   {
      var show = others[i].getAttribute('rel');
      if (show == fieldsToBeInserted) continue;
      intoWaitingRoom(show);
   }
}


function intoWaitingRoom(relation)
{
   if (relation == 'none') return;
   var Elements = hiddenFormFieldsPointers[relation];
   for (var i=0;i<Elements.length;i++)
   {
      waitingRoom.appendChild(Elements[i]);
      if (Elements[i].nestedRels)
         for (var j=0;j<Elements[i].nestedRels.length;j++)
            intoWaitingRoom(Elements[i].nestedRels[j]);
   }
}


function intoMainForm(relation)
{
   if (relation == 'none') return;
   var Elements = hiddenFormFieldsPointers[relation];
   for (var i=0;i<Elements.length;i++)
   {
      var insertPoint = document.getElementById(relation+i);
      insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
      if (Elements[i].nestedRels)
      {
         var fields = getAllFormFields(Elements[i]);
         for (var j=0;j<fields.length;j++)
         {
            if (!fields[j].getAttribute('rel')) continue;
            if (fields[j].checked || fields[j].selected)
               intoMainForm(fields[j].getAttribute('rel'));
         }
      }
   }
}


function getAllFormFields(node)
{
   var allFormFields = new Array;
   var x = node.getElementsByTagName('input');
   for (var i=0;i<x.length;i++)
      allFormFields.push(x[i]);
   var y = node.getElementsByTagName('option');
   for (var i=0;i<y.length;i++)
      allFormFields.push(y[i]);
   return allFormFields;
}


/** ULTRA-SIMPLE EVENT ADDING **/


function addEvent(obj,type,fn)
{
   if (obj.addEventListener)
      obj.addEventListener(type,fn,false);
   else if (obj.attachEvent)
      obj.attachEvent("on"+type,fn);
}


addEvent(window,"load",prepareForm);




/** PUSH AND SHIFT FOR IE5 **/


function Array_push() {
   var A_p = 0
   for (A_p = 0; A_p < arguments.length; A_p++) {
      this[this.length] = arguments[A_p]
   }
   return this.length
}


if (typeof Array.prototype.push == "undefined") {
   Array.prototype.push = Array_push
}


function Array_shift() {
   var A_s = 0
   var response = this[0]
   for (A_s = 0; A_s < this.length-1; A_s++) {
      this[A_s] = this[A_s + 1]
   }
   this.length--
   return response
}


if (typeof Array.prototype.shift == "undefined") {
   Array.prototype.shift = Array_shift
}




[vales]

Qui puoi trovare altri dei metodi per realizzare form varibili in funzione delle scelte inserite.

http://forum.joomla.it/index.php/topic,98717.0.html

[Mistik]

Ci sono già passato da quella discussione.
Ho letto tantissimo ma non riesco a risolvere come inserire un selettore tra due radio button.
Mi va ai quattro poli, ma in mezzo mai !!

[vales]

La soluzione è legare ogni check del primo gruppo a delle funzioni di javascript che rendono visibili e selezionano determinati valori nei tag successivi in base ai primi valori selezionati.

[Mistik]

Riposto il codice che sembra se non altro funzionale.


Se poi qualcuno mi aiuta a sistemare il CSS gli sarei riconoscente a vita.

Codice: [Seleziona]

<style type="text/css">


#boxTc{width:657px;}
.contboxTc{
width:627px;
background:#efefef;
}


.content {    padding: 0;    width: 627px;}


.question {
   margin-left: 20px;
    margin-top: 18px !important;
    width: 245px;
}


div, fL {
   float: left;
}
.box_indirizzo {
    margin: 5px 0 0;
    width: 607px;
}


.boxAddress
div, .fL {
    float: left;
}
#city {
    margin-left: 10px;
    width: 175px;
}
#Street {
    width: 188px;
 margin-right: 7px;
}
#civico {
    width: 50px;
margin-right: 31px;
}


#capcode {
    width: 40px;
 margin-right: 31px;
}


#provincia {
    width: 20px;
 margin-right: 10px;}


#prefix {   
    width: 40px;
    margin-right: 21px;}
#numerox {
    width: 50px;
margin-right: 31px;
}


</style>




<body bgcolor="#ffffff">
<div class="contboxTc">


<h3>Tisca</h3>


<p>Emulazione del form tiscalese.</p>


<form>
<table class="example"><tbody>
   


   <div class="contboxTc">
<div class="content">
      <div class="question fL">Linea telefonica<>
      <div class="fL" style="margin-top:20px">
   
         <input type="radio" name="tel_si" value="tel_si" rel="tel_si_dett" id="id_tel_si" /> <label for="id_tel_si">Si</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                       
                        <input type="radio" name="tel_si" value="tel_noi" rel="none" id="id_tel_no" /> <label for="id_tel_no">No</label>[br /]
      <>
   <>






   <div rel="tel_si_dett">
      <div class="question"><p> Scegli il tuo operatore</p><>
      <div>
         <select name="tel_operatore" id="tel_operatore">
                                <option rel="none">-- Seleziona --</option>           
                                <option value="opzione1" rel="tel_slc"> opzione1</option>
            <option value="opzione2" rel="tel_slc"> opzione2</option>
            <option value="opzione3" rel="tel_slc"> opzione3</option>
            <option value="opzione4" rel="tel_slc"> opzione4</option>
            <option value="opzione5" rel="tel_slc"> opzione5</option>
            <option value="opzione6" rel="tel_slc"> opzione6</option>
         </select>
      <>
   <>


   


<!--  RADIOBUTTON ADSL  -->




<div>
      <div class="question fL">Linea adsl<>
      <div class="fL">
                        <input type="radio" name="adsl_butt_si" value="single3" rel="adsl_con_si"  id="adsl_si" /> <label for="adsl_si">Si</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="radio" name="adsl_butt_si" value="tel_si3" rel="adsl_con_no" id="adsl_no" /> <label for="adsl_no">No</label>[br /]
      <>
   <>




<div rel="adsl_con_si">
      <div class="question"><p>Scegli il tuo operatore adsl</p><>
      <div>      <select name="form_adsl" id="form_adsl">
                                <option rel="none">-- Seleziona --</option>
                                <option value="opzione7" rel="adsl_slc"> opzione7</option>
                              <option value="opzione8" rel="adsl_slc"> opzione8</option>
                                <option value="opzione9" rel="adsl_slc"> opzione9</option>
                                <option value="opzione10" rel="adsl_slc"> opzione10</option>           
                                <option value="opzione11" rel="adsl_slc"> opzione11</option>           
                                <option value="opzione12" rel="adsl_slc"> opzione12</option>   
                                                       </select>
      <>
   <>
















 
     
<div id="city">
   <div rel="adsl_con_no">
<div class="question"><label for="id_prefix3"> Localita</label><>
      <div><input name="id_prefix2" id="id_prefix3" /><>
   
 <div id="boxAddress">
       
      <div class="question"><label for="indirizzo"><p>Indirizzo</p><>
      <div><input name="indirizzo" id="id_prefix2" /><>
                <div id="civico" >
                <div class="question"><p>N.civico</p><>
      <div><input name="civicox" id="civix" /><>
                <div id="capcode">
                <div class="question"><p>C.A.P.</p><>
          <div><input name="capcodex" id="capcodex" /><>                <div id="prov" >
                <div class="question"><p>provincia</p><>
      <div><input name="provinciax" id="provx" /><>




<><><><>


       
  <div rel="adsl_slc">
      <div class="question">
<label for="id_prefix3"> Localita</label><>
      <div><input name="id_prefix2" id="id_prefix3" maxlength="30" size="30/><><>


   
<div rel="adsl_slc">
      <div class="question">
<label for="id_prefix2"> Indirizzo</label><>
      <div><input name="id_prefix2" id="id_prefix2" maxlength="30" size="30"
/><>
               
               
   <>


   


</table>
 
<!-- PREFISSO + NUMERO -->
<table cellspacing="0" cellpadding="0" width="95%" title="" class="multi_container">
        <tbody width="100%">
           
         
      <div class="question fL"><div class="prefix" rel="tel_slc"><p>Prefisso</p>
      <input name="prefix" id="id_prefix" maxlength="5" size="5"/><>
               
                <div class="numerox" rel="tel_slc"> <p>Numero</p>
      <div class="fL"><input name="numero" id="id_numero" maxlength="10" size="10"/><>
<>


</tbody>
</table>


<div>
      <div colspan="2"><input type="submit" value="Submit form" /><>
   <>


</tbody><></table>
</form>