Chronoforms 4.0RC3.5.2 a "geometria variabile"

[Hulio]

Ciao a tutti
Sono nuovo del forum e sono alle prime armi con l'utilizzo di Joomla.

Sto usando Joomla versione 2.5 e Chronoforms versione 4.0RC3.5.2


Vado al dunque; la mia esigenza è quella di creare un form "a geometria variabile" dove il cliente, selezionando varie Checkbox o Radio Box attiva e quindi fa apparire parte del form.


Spulciando le varie discussioni sull'argomento ho trovato e studiato, con molto interesse, la guida di Vales al seguente link:


http://www.joomla.it/articoli-della-community/3832-form-a-geometria-variabile-con-chronoforms.html


ho letto anche questa guida:


http://www.joomla.it/articoli-community-16-e-17-tab/5234-guida-1-creare-form-in-joomla-17-con-chronoforms-v4-rc-20.html


e altre guide simili.


La difficoltà nasce nel dover "trasportare" le istruzioni delle guide citate alla nuova versione di Chronoforms 4.0RC3.5.2


Purtroppo continuo a non trovare nulla sull'argomento.


Dallo "studio" da autodidatta della nuova versione di Chronoforms e leggendo qua e la sui forum e su internet, desumo che le potenzialità della nuova versione sono ben maggiori della precedente.


La grossa difficoltà che sto incontrando è la mancanza (o comunque difficoltà di reperimento) di una guida/tutorial sulla nuova versione che spieghi le varie funzioni.

Qualcuno può aiutarmi?

Grazie

[tomtomeight]

Ciao e benvenuto nel forum
Un form a geometria variabile o con select dipendenti, come più precisamente si può definire,  da solo serve a poco o nulla o per puro scopo didattico. Dovresti indicare il campo di applicazione a cui asservirlo e in dipendenza dell'uso può andar bene chronoforms o altra estensione o addirittura creare proprio l'applicazione anche con chronoforms o altro.

[Hulio]

Ciao e grazie per il benvenuto 


Di seguito il link al sito "laboratorio" dove si può vedere lo stato embrionale del form:


http://torniamoapensare.altervista.org/index.php/spedisci-prodotti


Vado nello specifico della mia esigenza;


Il form serve per raccogliere ed inviare (tramite mail e raccogliere in tabella) informazioni riguardo il proprietario e le caratteristiche di una apparecchiatura per poterla spedire per la riparazione (in garanzia e non).


In particolare, la prima scelta condizionata riguarda la garanzia;
quando il prodotto è in garanzia verranno visualizzati campi del form (allega documento d'acquisto e/o estensione di garanzia) che altrimenti non avrebbero motivo di essere visualizzati e quindi compilati 


Da questo l'esigenza di far comparire tali campi solo se l'utente selezione la casella SI del campo "il prodotto è in garanzia?"


Capito il meccanismo di funzionamento posso "annidare" tale funzione per realizzare un form cucito a misura 


Sperando di essere stato chiaro vi auguro buona giornata 

[Hulio]

Dopo varie prove e vicoli ciechi, dopo vari esperimenti e dopo vari sbattimenti, credo di aver risolto il problema (purtroppo da auto didatta) 


La procedura che ho seguito è:

• Ho creato il form inserendo i vari elementi (text box, radio box, ecc...) con il wizard edit (wizard edit advanced);
• Ho modificato il codice HTML inserendo i relativi "rel" come indicato nella guida di VALES, andando su "code" della sezione "general" del form e impostando su "Custom";
• Nell'area "Action" ho inserito il codice Javascript (sempre indicato nella stessa guida) nella sezione "On Load" dopo "Show HTML"

Così facendo non funzionava.


Dopo una infinità di prove ed esperimenti, ho avuto il colpo di fortuna di capire che per far funzionare il tutto dovevo eliminare una parte di codice HTML per ogni input che deve generare un "rel"


Il codice andava così modificato:
(posto il codice di un singolo radio box)


Codice originale di un radio box

Codice: [Seleziona]

<div id="input_radio_21_container_div" class="ccms_form_element cfdiv_radio label_over">
      <label>Il prodotto &egrave; in garanzia?</label><input type="hidden" name="input_radio_2" alt="ghost">
      <>
    <div style="FLOAT: left; CLEAR: none">
      <input id="input_radio_2_0" class="validate['required']" title="e_garanzia" value="No" type="radio" name="input_radio_2"><label for="input_radio_2_0">No</label>
      <input id="input_radio_2_1" class="validate['required']" title="e_garanzia" value="Yes" type="radio" name="input_radio_2"><label for="input_radio_2_1">Si</label>
      <>


La modifica sta nella eliminazione della parte di codice sottolineata (input type="hidden")

Codice modificato

Codice: [Seleziona]

<div id="input_radio_21_container_div" class="ccms_form_element cfdiv_radio label_over">
      <label>Il prodotto &egrave; in garanzia?</label>< name="input_radio_2" alt="ghost">
      <>
    <div style="FLOAT: left; CLEAR: none">
      <input id="input_radio_2_0" class="validate['required']" title="e_garanzia" value="No" type="radio" name="input_radio_2"><label for="input_radio_2_0">No</label>
      <input id="input_radio_2_1" class="validate['required']" title="e_garanzia" value="Yes" type="radio" name="input_radio_2"><label for="input_radio_2_1">Si</label>
      <>

Con questa modifica (non so quanto ortodossa) il form finalmente diventa a "geometria variabile"

Non chiedetemi il motivo, perchè non lo so.... (anzi se qualcuno può spiegarmelo mi fa cosa gradita)


Potete vedere il risultato al seguente link:http://torniamoapensare.altervista.org/index.php/spedisci-prodotti


Fin qui felicissimo:


Risolto un problema ecco che ne nasce un'altro più "bello" del primo 


Fatta questa modifica, non funzionano più tutti i controlli (penso Javascript) sui singoli elementi.
Mi spiego meglio; i campi del form non vengono più validati, quindi posso anche non compilare i campi obbligatori e il form viene spedito... 


Ho provato ad inserire l'action "Auto JavaScript Validation" sia prima, sia dopo all'action Load JS ma non ne vuole sapere...


Qualcuno può aiutarmi?


Grazie in anticipo

[Hulio]

Nessuno può aiutarmi? 

[r.vanoni]

Ciao, provo a spiegare come ho fatto io.
1)- Seguendo le indicazioni dell'articolo di Vales ho scaricato il codice javascript con le funzioni necessarie (versione 2.0)
2)- Nella preview della mia form a geometria variabile ho aggiunto un Custom elements (HTML/PHP) preso da advanced elements e nella parte relativa al code ho inserito questo codice :

Codice: [Seleziona]


<script type="text/javascript">
/*****************************************/
/** 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.getAttribute('rel'))
        {
            var y = getAllFormFields(x);
            x.nestedRels = new Array();
            for (var j=0;j<y.length;j++)
            {
                var rel = y[j].getAttribute('rel');
                if (!rel || rel == 'none') continue;
                x.nestedRels.push(rel);
            }
            if (!x.nestedRels.length) x.nestedRels = null;
            hiddenFields.push(x);
        }
    }

    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.checked && y.getAttribute('rel'))
            intoMainForm(y.getAttribute('rel'))
    }

    var z = document.getElementsByTagName('select');
    for (var i=0;i<z.length;i++)
    {
        if (z.options[z.selectedIndex].getAttribute('rel'))
            intoMainForm(z.options[z.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.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);
        if (Elements.nestedRels)
            for (var j=0;j<Elements.nestedRels.length;j++)
                intoWaitingRoom(Elements.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,insertPoint);
        if (Elements.nestedRels)
        {
            var fields = getAllFormFields(Elements);
            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);
    var y = node.getElementsByTagName('option');
    for (var i=0;i<y.length;i++)
        allFormFields.push(y);
    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);
</script>
<input value="figli" title="" id="check10" name="check1" type="checkbox" rel="figli"/>
<div rel="figli">
QUI DENTRO METTI GLI INPUT BOX che vuoi attivare e nascondere naturalmente in codice html
</div>
Come si potrà notare il codice javascript è quello scaricato in precedenza (punto 1) ma decurtato di alcune parti necessarie per Internet explorer che non mi interessavano.
Ho messo il codice relativo agli input box nelle righe delimitate dal tag <div rel="figli"> e tutto funziona a meraviglia. 
Spero di essere stato utile. Ciao