Buongiorno,
ho provato a creare un form a geometria variabile.
Il form si trova a questa pagina:
http://www.homestagingschool.it/iscriviti-home-staging-startupPer la domanda 'Hai frequentato un corso di home staging':
- se la risposta è sì dovrebbe apparire un campo text 'se sì, quale?'
- se la risposta è no dovrebbe apparire un campo text 'se no, descrivici in sintesi la tua esperienza di Home stager'
E per la domanda 'Come ci hai conosciuto?':
- se la risposta è 'altro' allora dovrebbe apparire un campo text 'Come?'
La cosa apparentemente funziona ma... solo, dopo aver selezionato 'sì' o 'no' e 'altro', premo f5, solo su firefox....
Ho seguito questa guida:http://www.joomla.it/articoli-della-community/3832-form-a-geometria-variabile-con-chronoforms.html
Joomla: 2.35
Chronoform: V4
Il codice del form è il seguente:
var containerTag = 'DIV';
<div class="ccms_form_element cfdiv_header" id="1_container_div" style=""><h2 class="contentheading" style="margin-top:10px; color:#FF6E00;">Iscriviti al corso Home Staging Startup</h2>
<p>Compila il form sottostante selezionando la data desiderata per prenotare il tuo posto in aula, riceverai a breve una mail con le istruzioni per confermare l'iscrizione ed effettuare il pagamento.</p><div class="clear"></div></div><div class="ccms_form_element cfdiv_select" id="tipologia_formazione1_container_div" style=""><label>Seleziona data *</label><select size="1" class="" title="" name="seleziona_il_corso" >
<option value="Seleziona">Seleziona</option>
<option value="Milano - 15 giugno 2015">Milano - 15 giugno 2015</option>
<option value="Milano - 13 luglio 2015">Milano - 13 luglio 2015</option>
</select>
<div class="clear"></div><div id="error-message-tipologia_formazione"></div></div>
<div class="ccms_form_element cfdiv_radio" id="modalita_di_pagamento1_container_div" style=""><label>Modalità di pagamento *</label><input type="hidden" name="modalita_di_pagamento" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="modalita_di_pagamento" id="modalita_di_pagamento_0" title="Campo obbligatorio" value="Bonifico " class="validate['required']" />
<label for="modalita_di_pagamento_0">Bonifico</label>
<input type="radio" name="modalita_di_pagamento" id="modalita_di_pagamento_1" title="Campo obbligatorio" value="Carta di Credito " class="validate['required']" />
<label for="modalita_di_pagamento_1">Carta di Credito</label>
</div><div class="clear"></div><div id="error-message-modalita_di_pagamento"></div>
<div class="ccms_form_element cfdiv_text" id="nome1_container_div" style=""><label>Nome *</label><input maxlength="150" size="60" class=" validate['required']" title="Campo obbligatorio" type="text" value="" name="nome" />
<div class="clear"></div><div id="error-message-nome"></div></div><div class="ccms_form_element cfdiv_text" id="cognome1_container_div" style=""><label>Cognome *</label><input maxlength="150" size="60" class=" validate['required']" title="Campo obbligatorio" type="text" value="" name="cognome" />
<div class="clear"></div><div id="error-message-cognome"></div></div><div class="ccms_form_element cfdiv_text" id="via1_container_div" style=""><label>Via *</label><input maxlength="150" size="60" class=" validate['required']" title="Campo obbligatorio" type="text" value="" name="via" />
<div class="clear"></div><div id="error-message-via"></div></div><div class="ccms_form_element cfdiv_text" id="cap1_container_div" style=""><label>CAP *</label><input maxlength="150" size="60" class=" validate['required','number']" title="" type="text" value="" name="cap" />
<div class="clear"></div><div id="error-message-cap"></div></div><div class="ccms_form_element cfdiv_text" id="citta1_container_div" style=""><label>Città *</label><input maxlength="150" size="60" class=" validate['required']" title="Campo obbligatorio" type="text" value="" name="citta" />
<div class="clear"></div><div id="error-message-citta"></div></div><div class="ccms_form_element cfdiv_text" id="provincia1_container_div" style=""><label>Provincia *</label><input maxlength="150" size="60" class=" validate['required']" title="Campo obbligatorio" type="text" value="" name="provincia" />
<div class="clear"></div><div id="error-message-provincia"></div></div><div class="ccms_form_element cfdiv_text" id="data_di_nascita1_container_div" style=""><label>Data di nascita *</label><input maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="data_di_nascita" />
<div class="clear"></div><div id="error-message-data_di_nascita"></div></div><div class="ccms_form_element cfdiv_text" id="codice_fiscale1_container_div" style=""><label>Codice Fiscale *</label><input maxlength="150" size="60" class=" validate['required']" title="Campo obbligatorio" type="text" value="" name="codice_fiscale" />
<div class="clear"></div><div id="error-message-codice_fiscale"></div></div><div class="ccms_form_element cfdiv_text" id="telefono1_container_div" style=""><label>Telefono *</label><input maxlength="150" size="60" class=" validate['required','number']" title="" type="text" value="" name="telefono" />
<div class="clear"></div><div id="error-message-telefono"></div></div><div class="ccms_form_element cfdiv_text" id="email1_container_div" style=""><label>Email *</label><input maxlength="150" size="60" class=" validate['required','email']" title="" type="text" value="" name="email" />
<div class="clear"></div><div id="error-message-email"></div></div><div class="ccms_form_element cfdiv_text" id="professione1_container_div" style=""><label>Professione *</label><input maxlength="150" size="60" class=" validate['required']" title="Campo obbligatorio" type="text" value="" name="professione" />
<div class="clear"></div><div id="error-message-professione"></div></div><div class="ccms_form_element cfdiv_radio" id="input_radio_36" style=""><label>Hai frequentato un corso di Home Staging? *</label><input type="hidden" name="input_radio_36" value="" alt="ghost" />
<div style="float:left; clear:none;"><input value="No" title="" id="input_radio_36_0" name="input_radio_36" rel="altro_corso_no" class="validate['required']" type="radio" />
<label for="input_radio_36_0">No</label>
<input type="radio" name="input_radio_36" id="input_radio_36_1" title="" value="Sì" class="validate['required']" rel="altro_corso_si"/>
<label for="input_radio_36_1">Sì</label>
</div><div class="clear"></div><div id="error-message-input_radio_36"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_371_container_div" style="" rel="altro_corso_si"><label>Se sì, quale?</label><input maxlength="150" size="30" class="" title="" type="text" value="" name="input_text_37" />
<div class="clear"></div><div id="error-message-studi"></div></div>
<div class="ccms_form_element cfdiv_textarea" id="descrivici_esperienza" style="" rel="altro_corso_no"><label>Se no, descrivici in sintesi la tua esperienza di home stager</label><textarea cols="48" rows="4" class="" title="Campo obbligatorio" name="descrivici_esperienza" placeholder="max 400 battute"></textarea>
<div class="clear"></div><div id="descrivici_esperienza"></div></div>
<div class="ccms_form_element cfdiv_textarea" id="partecipo_al_corso_perche1_container_div" style=""><label>Partecipo al corso perché? *</label><textarea cols="48" rows="2" class=" validate['required']" title="Campo obbligatorio" name="partecipo_al_corso_perche"></textarea>
<div class="clear"></div><div id="error-message-partecipo_al_corso_perche"></div></div><div class="ccms_form_element cfdiv_select" id="come_ci_hai_conosciuto1_container_div" style=""><label>Come ci hai conosciuto? *</label><select size="1" class="" title="Campo obbligatorio" name="come_ci_hai_conosciuto">
<option value="Pubblicità su web ">Pubblicità su web</option>
<option value="Pubblicità su Radio-TV-Stampa ">Pubblicità su Radio-TV-Stampa</option>
<option value="Motori di ricerca web ">Motori di ricerca web</option>
<option value="Social Network ">Social Network</option>
<option value="Amici ">Amici</option>
<option value="Per caso ">Per caso</option>
<option value="Altro" rel="conosciuto_altro">Altro</option>
</select>
<div class="clear"></div><div id="error-message-come_ci_hai_conosciuto"></div></div>
<div class="ccms_form_element cfdiv_text" id="Come" style="" rel="conosciuto_altro"><label style="margin-top:-7px;">Come?</label><input maxlength="150" size="60" class="" title="" type="text" value="" name="come" />
<div class="clear"></div><div id="error-message-come"></div></div>
<div class="ccms_form_element cfdiv_radio" id="parte_del_gruppo_home_stager_lovers" style=""><label>Fai parte della community Home Staging Lovers? *</label><input type="hidden" name="input_radio_48" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="input_radio_48" id="input_radio_48_0" title="" value="No" class="validate['required']" />
<label for="input_radio_48_0">No</label>
<input type="radio" name="input_radio_48" id="input_radio_48_1" title="" value="Sì" class="validate['required']" />
<label for="input_radio_48_1">Sì</label>
</div><div class="clear"></div><div id="error-message-input_radio_48"></div></div>
<p> </p>
<p>In caso di fatturazione ad azienda o libero professionista indicare i dati nei campi sottostanti</p>
<div class="ccms_form_element cfdiv_text" id="societa_libero_professionista1_container_div" style=""><label style="margin-top:-7px;">Società <br> Libero Professionista</label><input maxlength="150" size="60" class="" title="" type="text" value="" name="societa_libero_professionista" />
<div class="clear"></div><div id="error-message-societa_libero_professionista"></div></div><div class="ccms_form_element cfdiv_text" id="indirizzo_completo1_container_div" style=""><label>Indirizzo completo</label><input maxlength="150" size="60" class="" title="" type="text" value="" name="indirizzo_completo" />
<div class="clear"></div><div id="error-message-indirizzo_completo"></div></div><div class="ccms_form_element cfdiv_text" id="codice_fiscale_azienda1_container_div" style=""><label>Codice Fiscale</label><input maxlength="150" size="60" class="" title="" type="text" value="" name="codice_fiscale_azienda" />
<div class="clear"></div><div id="error-message-codice_fiscale_azienda"></div></div>
<div class="clear"></div><div id="error-message-privacy"></div></div><div class="ccms_form_element cfdiv_checkbox" id="accettazione_privacy1_container_div" style=""><input type="hidden" name="accettazione_privacy" value="" alt="ghost" />
<input value="1" title="Campo obbligatorio" type="checkbox" class="validate['required'] label_left" name="accettazione_privacy" id="accettazione_privacy" style="margin-left:0px;" />Accetto le <a href="/condizioni-e-termini-di-privacy" target="_blank" style="color:#FF6E00;">condizioni e i termini di privacy</a><label for="accettazione_privacy"></label><div class="clear"></div><div id="error-message-accettazione_privacy"></div></div><br/><br/><div class="ccms_form_element cfdiv_text" id="chrono_verification1_container_div" style=""><input maxlength="5" size="5" class="chrono_captcha_input validate['required']" title="Campo obbligatorio" type="text" wf_key="28" value="" name="chrono_verification" style="margin-left:152px;"/>
{chronocaptcha_img}<div class="clear"></div><div id="error-message-chrono_verification"></div></div><div class="ccms_form_element cfdiv_submit" id="invia1_container_div" style="margin-top:-50px; margin-left:312px;"> <input name="invia" class="" value="Invia" type="submit" style="background:none no-repeat scroll 15px center #FF6E00;" /><br/><br/>
<div class="clear"></div><div id="error-message-invia"></div></div>
Mentre quello dell'evento Load JS inserito in 'On load' del form (ho provato ad inserirlo sia prima che dopo il 'load html' ma il risultato non cambia) è quest'altro:
/*****************************************/
/** 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
}
Inoltre vorrei far sparire quel fastidioso 'var containerTag = 'DIV';' prima del titolo del form...
Qualcuno riesce ad aiutarmi?
Grazie mille e buona giornata a tutti!
