[JS] Autopopulating text input

[remcotolsma]

Ik heb een contactformulier ontwikkeld m.b.v. HTML en met JavaScript wat extra functionalitieten toegevoegd. Helaas werkt dit formulier niet correct in Internet Explorer 6 en 7. Hieronder is een klein fragment uit dit formulier te zien:

HTML:

<div class="field">
    <div class="field-small">
        <label for="prefix-field">Aanhef</label>

        <input id="prefix-field" name="prefix" type="text" size="8" />
    </div>

    <div class="field-medium">
        <label for="name-field">Naam *</label>

        <input id="name-field" name="name" type="text" size="16" />
    </div>
</div>

De HTML van deze pagina is valide XHTML 1.0 Strict en CSS valideert als CSS versie 2.1. Het volledige formulier is te zien op de volgende locatie: http://www.ikhouvanchocola.nl/contact/.

Met behulp van een eigen gemaakt JavaScript (http://www.ikhouvanchocola.nl/scripts/index.js) worden de <label> elementen onzichtbaar gemaakt en de tekst in het bijbhorende invoerveld geplaatst. Ik maak hierbij gebruik van het JavaScript framework MooTools (versie 1.2.1).

Dit werkt allemaal correct in de volgende webbrowsers:

• Mozilla Firefox 3.0.4 (+ Firebug)
• Safari 3.1.2
• Opera 9.51
• Google Chrome 0.3.154.9

In Internet Explorer 7 werkt het helaas niet en krijg ik de de volgende foutmelding:

Regel: 257
Teken: 82
Fout: Deze eigenschap of methode wordt niet ondersteund door dit object
Code: 0
URL: http://www.ikhouvanchocola.nl/contact/

Internet Explorer 6 geeft de volgende foutmelding:

Line: 6
Char: 3
Error: 'getElements(...)' is null or not an object
Code: 0
URL: http://www.ikhouvanchocola.nl/contact/

Het is me niet helemaal duidelijk naar welke regels deze foutmeldingen verwijzen.

Ik ben urenlang aan het debuggen geweest, maar heb geen oplossing gevonden. Ook kon ik via Google niet een oplossing vinden. Het is natuurlijk ook lastig zoeken als je niet weet wat het probleem is.

Op een gegeven moment zag ik dat de <button> elementen in het formulier ook niet correct wordt weergegeven in het Internet Explorer 6 en 7. Ik had daarom deze voor de aardigheid even verwijderd uit de HTML. Tot mijn grote verbazing functioneerde het formulier en de scripts toen opeens wel. Dus zonder de volgende HTML werkt wel alles correct:

HTML:

<button class="send-button" name="send" type="submit">
    <span>Verstuur</span>
</button>

Kan iemand dit verklaren en mij helpen met het vinden van een oplossing?

[crisp]

<button> is gewoon broken in IE6 en 7; zoek daar dus een alternatief voor.

[remcotolsma]

Voor zover ik weet is het enigste alternatief voor een <button> element eem <input> element.

HTML:

<input class="send-button" name="send" type="submit" value="Verstuur" />

Hiermee zijn mijn problemen helaas niet verholpen. Ik krijg nog steeds in Internet Explorer 6 en 7 eerder genoemde foutmeldingen.

[Krooswijk.com]

Regel 6 van je index.js file roep je aan getElements uit de mootools core aan op een object.

Als je

code:

$(document.body).getElements('form')

vervangt door

code:

document.body.getElements('form')

werkt ie dan wel?

[remcotolsma]

Krooswijk.com schreef op maandag 17 november 2008 @ 12:01:

code:

$(document.body).getElements('form')

vervangt door

code:

document.body.getElements('form')

werkt ie dan wel?

Nee, ook dan krijg ik nog steeds precies dezelfde foutmeldingen. De regel $(document.body) heb ik ook vanuit de MooTools documentatie (http://mootools.net/docs/Element/Element#Element:getElements). Daar zou het dus in principe niet aan kunnen liggen.

Ik heb ook al document.forms (https://developer.mozilla.org/en/DOM/document.forms) en andere varianten geprobeerd, maar dit mocht allemaal niet baten.

Het is ook vreemd dat zonder het <button> en/of <input> submit element alles wel correct functioneert.

[Verwijderd]

Heb je al eens geprobeerd om die button een andere name te geven?

[remcotolsma]

Verwijderd schreef op dinsdag 18 november 2008 @ 10:33:
Heb je al eens geprobeerd om die button een andere name te geven?

Dat lijkt inderdaad te werken, bedankt voor de tip!

HTML:

<button class="send-button" name="send" type="submit">
    <span>Verstuur</span>
</button>

Bovenstaande werkt dus niet en onderstaande dus wel :

HTML:

<button class="send-button" name="submit" type="submit">
    <span>Verstuur</span>
</button>

Ik ben wel benieuwd of dit nou door MooTools, Internet Explorer of iets anders komt. Dit kon ik zelf niet zo snel achterhalen, maar mijn probleem is in ieder geval opgelost .

[Verwijderd]

MooTools voegt klaarblijkelijk - 'k heb echt niet al die code doorgespit - een send() method toe aan HTML elementen.

Je kunt zoiets gemakkelijk nagaan door bijvoorbeeld javascript:alert(typeof document.body.send) in de adresbalk in te vullen. Op jouw pagina krijg je dan 'function' te zien.

In IE botst die method naam met een name attribuut met dezelfde waarde.

[OxiMoron]

code:

$(document.body).getElements('form')

beetje een omweg imho..

code:

$$('form')

Is de CSS selector voor alles met de tag form.. als je form tags buiten je body tag hebt dan moet je misschien sowieso eens naar je html kijken

[crisp]

Verwijderd schreef op woensdag 19 november 2008 @ 10:14:
MooTools voegt klaarblijkelijk - 'k heb echt niet al die code doorgespit - een send() method toe aan HTML elementen.

Je kunt zoiets gemakkelijk nagaan door bijvoorbeeld javascript:alert(typeof document.body.send) in de adresbalk in te vullen. Op jouw pagina krijg je dan 'function' te zien.

In IE botst die method naam met een name attribuut met dezelfde waarde.

Dat lijkt me inderdaad een verklaring. Note dat je dezelfde soort problemen krijgt als je een input-element name="submit" geeft; dat overschrijft de default submit() method van je form.

* crisp is overigens geen fan van het 'extenden' van methods op HTML elementen op deze manier.