Editor main form id.

lifedaniel

Hello, for a javascript use, I need to know the name, or id of the main FORM of the editor.

Thank you very much.

Daniel

allan

The Editor manual contains full information about the Editor DOM structure, including class names and IDs.

Allan

lifedaniel

Well I need to use this script :

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" id="horsBon" method="post" onsubmit="if(W3DOM) return false;">
    <p>
        <label for="prenom">Prénom :</label>
        <input type="text" name="prenom" id="prenom" />
    </p>
    <p>
        <label for="nom">Nom :</label>
        <input type="text" name="nom" id="nom" />
    </p>
    <p>
        <label for="nom">Surnom :</label>
        <input type="text" name="surnom" id="surnom" />
    </p>
    <p>
        <label for="nom">Pseudo :</label>
        <input type="text" name="pseudo" id="pseudo" />
    </p>
    <p>
        <input type="submit" />
    </p>
</form>
<script type="text/javascript">
// Le navigateur reconnaît-il le DOM ?
var W3DOM = document.getElementById && document.getElementsByTagName;

// fonction addEvent (http://www.scottandrew.com/weblog/jsjunk)
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
}

// ajout de trim
String.prototype.trim = function() {
    return this.replace(/(?:^\s+|\s+$)/g, "");
}

// fonction focus sur INPUT suivant ou soumission
var oFocusNext =
{
    // Initialisation
    _Init: function()
    {
        // Pour chaque INPUT on initialise la fonction _FocusNext
        for(iIter = 0; iIter < oFocusNext._INPUTs().length; iIter++) {
            addEvent(oFocusNext._INPUTs()[iIter], 'keydown', oFocusNext._FocusNext, false);
        }
        // Focus sur le premier INPUT
        oFocusNext._INPUTs()[0].focus();
    },
    
    // Focus sur INPUT suivant
    _FocusNext: function(event)
    {
        var key = event.which || event.keyCode;
        // on ne fait rien sauf sur Entrée
        if(key != 13) return;

        var oElem = event.target || window.event.srcElement;
        var oNextInput = '';
        for(iIter = oFocusNext._INPUTs().length - 1; iIter >= 0; iIter--) {
            if(oFocusNext._INPUTs()[iIter].id == oElem.id) {
                if(oNextInput != '') {
                    oNextInput.focus();
                    return false;
                } else { // Dernier INPUt -> validation du formulaire
                    oFocusNext._VerifForm();
                }
            } else {
                oNextInput = oFocusNext._INPUTs()[iIter];
            }
        }
    },
    
    // Fonction vérifier le formulaire
    _VerifForm: function()
    {
        for(iIter = 0; iIter < oFocusNext._INPUTs().length-1; iIter++) {
            oFocusNext._INPUTs()[iIter].value = oFocusNext._INPUTs()[iIter].value.trim();
            if(oFocusNext._INPUTs()[iIter].value == '') {
                oFocusNext._INPUTs()[iIter].focus();
                alert('Champ obligatoire !');
                return false;
            }
        }
        oFocusNext._Cont().submit();
    },

    // Conteneur
    _Cont: function()
    {
        var Cont = document.getElementById(oFocusNext.IdForm);
        return Cont;
    },
    
    // éléments INPUT
    _INPUTs: function()
    {
        var oInputs = oFocusNext._Cont().getElementsByTagName('input');
        return oInputs;
    },
    
    // Id Formulaire
    IdForm: 'TestForm'
};
// Si le navigateur reconnaît le DOM on initialise la fonction
if(W3DOM) { addEvent(window, 'load', oFocusNext._Init, false); }
</script>

with the editor form.

I've modified in dataTables.editor.js

to match like this

"form": $(
            '<form id="TestForm" data-dte-e="form" class="'+classes.form.tag+'" method="post" onsubmit="if(W3DOM) return false;">'+
                '<div data-dte-e="form_content" class="'+classes.form.content+'"/>'+
            '</form>'
        )[0],

but the script doesn't work ...

Thank you

allan

I don't quite understand I'm afraid. You want to use your custom form inside Editor? That isn't currently possible - Editor will generate the form and it isn't possible to provide a custom form.

Allan

lifedaniel

I want to use the "javascript" I gave you in the code with the form of the editor. Not a custom one

allan

I don't think you would be able to use the Javascript from the above code directly. You would need to update it to use the Editor API to perform the same actions. For example you would use node() to get the nodes for the elements in the form to be able to perform your key handling and focus handling on them.

Allan

lifedaniel

where is the nodes() wiki or documentation please?

allan

Apologies the function is node() not nodes(). I've edited my above post.

Allan