Incorrecte nesting van elements i.c.m. een form en inputs

zondag 3 juli 2011 14:28

Acties:

0Henk 'm!

Ik heb de volgende HTML pagina:

HTML:

<!doctype html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div>
            <form action="">
                <input name="a" value="1"/>
        </div>
        <div>
                <input name="b" value="2"/>
                <input type="submit"/>
            </form>
        </div>
    </body>
</html>

Dit is foutieve HTML code, dat hoef je me niet te vertellen.

Bij het versturen van dit formulier krijg je netjes ?a=1&b=2: De browser negeert daarbij de incorrecte "nesting" van elementen.

Als ik echter via Javascript alle input elementen wil ophalen in dat formulier, krijg ik alleen input[name=a] terug. form.b geeft echter wel weer het input element terug.

Voorbeeld, getest in Google Chrome:

JavaScript:

1
2
3

var form = document.getElementsByTagName("form")[0];
form.getElementsByTagName("input").length; // 1
form.b // <input name="b" value="2">

Nou is mijn vraag:
Hoe kan ik alle input-elements in het formulier ophalen via Javascript?

De HTML aanpassen is _geen_ optie.

Let op: Mijn post bevat meningen, aannames of onwaarheden

zondag 3 juli 2011 14:30

Acties:

0Henk 'm!

MueR

Moderator Devschuur®

is niet lief

Tja, dat is dan heel dikke pech voor je. de DOM tree waar JS tegenaan werkt gaat uit van valide html, en anders maakt ie het zelf wel valide. Ik vraag me ook af waarom je bewust invalid html schrijft en daarmee jezelf een hoop gezeik op de half haalt.

Anyone who gets in between me and my morning coffee should be insecure.
Breng nu uw applicatie naar de kloot. Dat is veel beter! Nu samen met klootopslag. Voor maar €9,95. Doei doei!

zondag 3 juli 2011 14:31

Acties:

0Henk 'm!

Gamebuster

Topicstarter

Ik heb de HTML niet geschreven, ik schrijf een javascript "plugin" voor een andere site

Let op: Mijn post bevat meningen, aannames of onwaarheden

zondag 3 juli 2011 14:38

Acties:

0Henk 'm!

NMe

Quia Ego Sic Dico.

Html

JavaScript:

1
2
3

var firstDiv = document.getElementsByTagName("form")[0].parentNode;
var secondDiv = firstDiv.nextSibling;   // niet vergeten rekening te houden met evt. textnodes
var inputs = firstDiv.getElementsByTagName("input").concat(secondDiv.getElementsByTagName("input"));

Zoiets? Het blijft überranzig maar daar ontkom je toch niet aan met deze rotzooi-HTML.

[Voor 8% gewijzigd door NMe op 03-07-2011 14:45]

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

zondag 3 juli 2011 14:40

Acties:

0Henk 'm!

Gamebuster

Topicstarter

Nja, dat werkt voor deze situatie, maar hij moet ook werken bij andere formulieren die op een of andere manier zo gaar in elkaar zitten

Ik denk dat ik een for in loop ga proberen over alle properties van het form-element en dan ga kijken of de property een input-element bevat.

Let op: Mijn post bevat meningen, aannames of onwaarheden

zondag 3 juli 2011 14:41

Acties:

0Henk 'm!

R4gnax

Gamebuster schreef op zondag 03 juli 2011 @ 14:31:
Ik heb de HTML niet geschreven, ik schrijf een javascript "plugin" voor een andere site

Mits mogelijk zou je contact op kunnen nemen met de beheerders van die andere site en ze op deze bug attenderen. Jammer genoeg leert de ervaring dat dat geen ene moer uithaalt.

Anders dan dat heb je weinig mogelijkheden. Nou ja; je zou kunnen proberen zelf het complete POST request te bouwen en versturen via XHR en zo het manke HTML formulier links laten liggen. Dat werkt natuurlijk alleen als je met de uitvoer dan ook nog wat kunt doen.

offtopic:
Welke site trouwens? Kan gelijk op m'n 'niet bezoeken'-lijstje.

zondag 3 juli 2011 14:42

Acties:

0Henk 'm!

Gamebuster

Topicstarter

Haha, ik denk niet dat de site zal meewerken aan mijn plugin

Bovendien moet het gewoon op iedere site werken, de huidige site is een gewoon 1 van de velen waar ik 'm op test.

Let op: Mijn post bevat meningen, aannames of onwaarheden

zondag 3 juli 2011 14:44

Acties:

0Henk 'm!

NMe

Quia Ego Sic Dico.

Html

Mja, je kan geen generieke DOM-code baseren op brakke HTML. Je kan nog makkelijker rijden in een auto zonder motor.

Dan kun je nog beter gewoon door alle inputs van het hele DOM heen lopen en hopen dat er maar één formulier op je pagina staat...

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

zondag 3 juli 2011 14:45

Acties:

0Henk 'm!

Gamebuster

Topicstarter

Dat dus ook niet, op deze site staan er 3

Let op: Mijn post bevat meningen, aannames of onwaarheden

zondag 3 juli 2011 14:45

Acties:

0Henk 'm!

NMe

Quia Ego Sic Dico.

Html

Dan zul je je erbij moeten neerleggen dat je ofwel per pagina een script moet schrijven, ofwel dat het niet kan.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

zondag 3 juli 2011 14:47

Acties:

0Henk 'm!

Struikrover

Wat NMe zegt. De enige optie lijkt me om een uitzondering voor deze pagina in te bouwen, maar dan blijf je aan de gang voor alle foute pagina's. Ik zou hoe dan ook contact met de maker van de HTML opnemen en hem vertellen dat hij een (best grove) fout in zijn code heeft staan.

zondag 3 juli 2011 14:49

Acties:

0Henk 'm!

Onbekend

...

Je zou met JavaScript het innerHTML van de form opnieuw op kunnen bouwen.

Speel ook Airplane Manager en Repeat

zondag 3 juli 2011 14:50

Acties:

0Henk 'm!

Gamebuster

Topicstarter

Ook al geprobeerd

JavaScript:

1	form.innerHTML; // <input name="a" value="1">

In de toekomst maak ik wel eigen HTML DOM parser die dit kan afhandelen. Voor nu sla ik zulke sites wel 'ff over

[Voor 44% gewijzigd door Gamebuster op 03-07-2011 14:51]

Let op: Mijn post bevat meningen, aannames of onwaarheden

zondag 3 juli 2011 14:51

Acties:

0Henk 'm!

Phyxion

_/-\o_

Hele document content nemen en zelf alles er uitstrippen wat niet goed is

'You like a gay cowboy and you look like a gay terrorist.' - James May

zondag 3 juli 2011 14:52

Acties:

0Henk 'm!

Gamebuster

Topicstarter

Ja, precies, zoals ik al zei: eigen HTML DOM parser. Maar voor nu hebben de sites met foutieve forms maar 'ff mazzel

edit: Nvm, ik maak er nu wel 1tje. Die parser die ik nu gebruik kan de helft van de pagina's niet fatsoenlijk afhandelen door al die bagger HTML van websites.

[Voor 40% gewijzigd door Gamebuster op 03-07-2011 15:12]

Let op: Mijn post bevat meningen, aannames of onwaarheden

zondag 3 juli 2011 18:12

Acties:

0Henk 'm!

Klaasvaak

Met een loopje door form.elements moet het ook lukken.

zondag 3 juli 2011 19:32

Acties:

0Henk 'm!

NMe

Quia Ego Sic Dico.

Html

Klaasvaak schreef op zondag 03 juli 2011 @ 18:12:
Met een loopje door form.elements moet het ook lukken.

Nee hoor, want de inputs in de tweede div staan dus niet in een form en komen dan ook niet in form.elements terug.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

zondag 3 juli 2011 20:27

Acties:

0Henk 'm!

Klaasvaak

Ik heb het in meerdere browsers getest, en krijg overal form.elements.length is 3. En het loopje geeft 3x een input element.

zondag 3 juli 2011 20:55

Acties:

0Henk 'm!

Gamebuster

Topicstarter

Inderdaad, form.elements werkt in browsers, zie ik nu.

Helaas werkt die ook niet i.c.m. NodeJS + JSDOM + jQuery.

> http://levensweg.net/GBTR/testform.html

JavaScript:

browser.add_response_handler("text", "html", function(response, cb)
{
    jsdom.env({
        html: response.content,
        url: response.url
    }, function(err, window)
    {
        response.window = window;
        cb(err, response);
    });
});

/* ... */

browser.open("http://levensweg.net/GBTR/testform.html", function(err, response)
{
    if(handle_error(err, response))
        return;
    jquery.create(response.window);
    response.window.$("form").each(function()
    {
        console.log(this.elements.length); // 1
    });
});

[Voor 36% gewijzigd door Gamebuster op 03-07-2011 21:01]

Let op: Mijn post bevat meningen, aannames of onwaarheden

zondag 3 juli 2011 21:38

Acties:

0Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Html

Of je laat 't aan de gebruiker(s) van de plugin over om een array van elementen te passen naar je plugin. Hoef jij geen vage constructies te bouwen en leg je het probleem op een "nette" manier bij hun neer. Oppelost!

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij

zondag 3 juli 2011 21:38

Acties:

0Henk 'm!

Gamebuster

Topicstarter

Ik ben de enige gebruiker van de "plugin"

Let op: Mijn post bevat meningen, aannames of onwaarheden

zondag 3 juli 2011 21:40

Acties:

0Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Html

Dan ben je, zoals dat in vaktermen zo mooi heet, screwed

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij

zondag 3 juli 2011 22:41

Acties:

0Henk 'm!

crisp

Devver

Pixelated

Html

RobIII schreef op zondag 03 juli 2011 @ 21:40:
Dan ben je, zoals dat in vaktermen zo mooi heet, screwed

Inderdaad, en wel om de volgende reden: normaliter wordt form control association al geregeld in de HTML parser (en uiteindelijk gereflecteerd in de elements collectie van het form element):

quote: http://www.w3.org/TR/html5/parsing.html#form-element-pointer
The form element pointer points to the last form element that was opened and whose end tag has not yet been seen. It is used to make form controls associate with forms in the face of dramatically bad markup, for historical reasons.

Hierdoor gaat dit (dramatische) geval goed in bestaande browsers. Echter gebruikt de topicstarter JSDOM en die bouwt de elements collectie anders op: die kijkt puur naar een form-element en traversed zijn siblings en matched daarbij op /button|fieldset|input|keygen|object|select|textarea/i. Dat is dus anders dan dat browsers het doen; die kijken in het gehele document naar form control elementen die een associatie hebben gekregen met een bepaald form-element.

[Voor 8% gewijzigd door crisp op 03-07-2011 22:45]

Intentionally left blank

zondag 3 juli 2011 23:07

Acties:

0Henk 'm!

Gamebuster

Topicstarter

Dus... alle input elements zoeken die komen na het huidige form-element maar voor het volgende form-element en die toevoegen aan de form.elements array.

Morgen even doordenken hoe ik dat het beste kan aanpakken. Bedankt voor de nuttige kijk op de zaak.

[Voor 27% gewijzigd door Gamebuster op 03-07-2011 23:10]

Let op: Mijn post bevat meningen, aannames of onwaarheden

zondag 3 juli 2011 23:28

Acties:

0Henk 'm!

crisp

Devver

Pixelated

Html

Gamebuster schreef op zondag 03 juli 2011 @ 23:07:
Dus... alle input elements zoeken die komen na het huidige form-element maar voor het volgende form-element en die toevoegen aan de form.elements array.

Nee; strict genomen alle form control elementen die geen expliciete form-associatie hebben maar voorkomen tussen de start- en endtag van het betreffende form element (ongeacht hoe die genest is), en eventuele form control elementen daarbuiten die een expliciete associatie hebben met het betreffende form element (dmv het form-attribuut).

Gelukkig is de form-associatie wel vanuit de DOM-tree te achterhalen*; iets als dit zou dus een correct resultaat moeten opleveren:

JavaScript:

function getFormElements(form)
{
    var elements = document.getElementsByTagName('*'),
        element,
        i = 0,
        formElements = [];

    while ((element = elements[i++]))
    {
        if (element.nodeName && /button|fieldset|input|keygen|object|select|textarea/i.test(element.nodeName))
        {
            // skip <input type="image">
            if (element.nodeName.toLowerCase() == 'input' && element.type == 'image')
                continue;

            if (element.form == form)
                formElements.push(element);
        }
    }

    return formElements;
}

* vooropgesteld dat de html parser die je gebruikt dat heeft geimplementeerd, en JSDOM daar mee overweg kan

edit: dit stukje code uit JSDOM doet me echter vermoeden dat dat ook niet echt gaat werken (HTMLInputElement interface):

JavaScript:

1
2
3

get form() {
    return closest(this, 'FORM');
}

[Voor 10% gewijzigd door crisp op 03-07-2011 23:34]

Intentionally left blank

Onderwerpen

Tweakers maakt gebruik van cookies

Toestemming beheren

Functioneel en analytisch

Relevantere advertenties

Ingesloten content van derden