[JS] weird probleem met dynamisch opgebouwd formuliertje

[BikkelZ]

Ik heb een formulier wat ik dynamisch opbouw op het moment dat ik mijn drag en drop beeindigd heb boven een blok wat daar op reageert. Daarin worden een paar zaken gevraag en dat kan dan vervolgens weer verder verwerkt worden. Dit met de volgende code:

JavaScript:

    function showHourBlockInput()
    {
        var werkzaamhedenVerleden = new Array();
        werkzaamhedenVerleden[0] = "Bouwen volgens FTO";
        werkzaamhedenVerleden[1] = "Update aan server software gedaan";
        werkzaamhedenVerleden[2] = "- SAE400839 opgelost\n- ERT945400 bijgesch...";
        werkzaamhedenVerleden[3] = "Ticket 9876 en 9445 opgelost";
        werkzaamhedenVerleden[4] = "Klant belde met een probleem bij het invul...";


        var hourBlockInput = document.createElement('FORM');
        hourBlockInput.className = "hourBlockInput";
        var hourBlockInputTitle = document.createElement('H2');
        hourBlockInputTitle.appendChild(document.createTextNode('Schrijf uren op project ' + draggedProject.getName()));
        hourBlockInput.appendChild(hourBlockInputTitle);
        var werkzaamhedenLabel = document.createElement('LABEL');
        werkzaamhedenLabel.appendChild(document.createTextNode('Beschrijf je werkzaamheden'));
        hourBlockInput.appendChild(werkzaamhedenLabel);
        var werkzaamhedenInput = document.createElement('TEXTAREA');
        //werkzaamhedenInput.appendChild(document.createTextNode("blaat"));
        hourBlockInput.appendChild(werkzaamhedenInput);
        var vorigeWerkzaamhedenLabel = document.createElement('LABEL');
        vorigeWerkzaamhedenLabel.appendChild(document.createTextNode('Of selecteer een van de vorige werkzaamheden verricht aan dit project'));
        hourBlockInput.appendChild(vorigeWerkzaamhedenLabel);
        var voorgaandeWerkzaamhedenSelect = document.createElement('SELECT');
        voorgaandeWerkzaamhedenSelect.appendChild(document.createElement('OPTION'));
        for (var t = 0; t < werkzaamhedenVerleden.length; t++)
        {
            voorgaandeWerkzaamhedenSelect.appendChild(createOption(t, werkzaamhedenVerleden[t]));
        }
        hourBlockInput.appendChild(voorgaandeWerkzaamhedenSelect);
        okButton = document.createElement("BUTTON");
        okButton.type = "button";
        cancelButton = document.createElement("BUTTON");
        cancelButton.type = "button";

        hourBlockInput.appendChild(okButton);
        hourBlockInput.appendChild(cancelButton);

        okButton.value = "Werkzaamheden toevoegen";
        cancelButton.value = "Urenblok niet opslaan";

        okButton.appendChild(document.createTextNode("Werkzaamheden toevoegen"));
        cancelButton.appendChild(document.createTextNode("Urenblok niet opslaan"));

        document.getElementsByTagName('BODY')[0].appendChild(hourBlockInput);
    }

Op het moment dat ik het formulier zie, kan de textfield niet invullen, en reageren de buttons helemaal niet (er zit natuurlijk geen actie onder maar je zou hem wel moeten zien veranderen) als ik er met links op klik. De SELECT werkt wel. Als ik met rechts klik, dan werken ze wel behalve de SELECT. Als ik een alert functie koppel aan een van de knoppen, dan alert hij als ik er op klik (maar de button beweegt niet).

Ik heb de oorpsronkelijke DIV al in een FORM veranderd, dat heeft dus niet geholpen. Ik heb geen lege DIV's gebruikt of dat soort trucs waardoor hij misschien ergens onder zou kunnen liggen. De volgende css heb ik gebruikt:

Cascading Stylesheet:

.hourBlockInput {
    top: 200px;
    left: 200px;
    width: 350px;
    padding: 4px;
    border: medium solid black;
    background-color: #EEE;
    position:absolute;
    z-index: 20;
}

.hourBlockInput TEXTAREA, SELECT {
    width: 340px;
}

.hourBlockInput TEXTAREA {
    height: 100px;
}

Waar zou ik nog aan kunnen denken?

[crisp]

Je gebruikt zeker ook een CSS reset? Dat is dan ws de reden dat je buttons niet meer als buttons lijken te fungeren. Verder struikelt IE over de okButton.type = "button"; (het is ook of een <input type="button"> of gewoon een <button>).

Verder zie ik eigenlijk niets raars.

[_Thanatos_]

Verder zie ik eigenlijk niets raars.

Behalve dat een compleet formulier in javascript wordt opgebouwd. Zeg maar dag met je handje tegen accessibility

[crisp]

Dit lijkt toch meer op een webapplication dan op een webpagina, en daar kan en mag je eisen voor stellen aan de client imo (en als aan die eisen voldaan is kan het alsnog prima accessible zijn).

[ Voor 21% gewijzigd door crisp op 22-09-2008 20:10 ]

[BikkelZ]

Het is inderdaad een applicatie voor intern gebruik die dynamisch opgebouwd wordt, minimaal IE7 (*pfew*) of echte browsers.

crisp schreef op maandag 22 september 2008 @ 19:17:
Je gebruikt zeker ook een CSS reset? Dat is dan ws de reden dat je buttons niet meer als buttons lijken te fungeren. Verder struikelt IE over de okButton.type = "button"; (het is ook of een <input type="button"> of gewoon een <button>).

Verder zie ik eigenlijk niets raars.

Nou hij leek als een submit te gaan fungeren bij default waarde en in een FORM tag, wat FireBug ook aangaf. Die CSS reset doe ik niet, ik gebruik alleen een default font op *. Als ik buiten dit formulier een knop plaats functioneert die wel normaal. Als ik de HTML pak en in een kladblok plak werkt het wel (behalve de resulterende <textbox />, maar dat zal wel een firebug bug zijn ).

Wat ik kan proberen is inderdaad INPUT type="button" te gebruiken, maar dat zegt niks over de TEXTAREA problemen.

Zou het kunnen zijn dat er nog een mousescriptje blijft plakken?

[crisp]

Je functie zo los in een document (met wat dependencies uitgecomment) geeft bij mij iig in Firefox een functionerend formulier. Als er iets blijft 'plakken' dan zit het ergens anders in je applicatie lijkt me...