[JavaScript] Children van een form doorlopen *

[Verwijderd]

om gegevens te posten met ajax heb ik een script gevonden dat velden uit een formulier verzameld en in een string zet, het zoekt echter alleen in form enn niet in de childs van form naar velden.
ik heb het al op mijn manier aangepast zodat het als het geen formulierveld is voor de cilds van dat object kijkt of dat velden zijn, dit zou ik natuurlijk eindeloos kunnen herhalen maar dan word het script ook eindeloos lang.
Er zal vast een manier zijn om in een loop ofzo dat het echt alle elementen doorloopt, maar ik weet niet hoe.

JavaScript:

            var obj = document.getElementById(objid);
            for (i=0; i<obj.childNodes.length; i++)
            {
                if (obj.childNodes[i].tagName == "INPUT")
                {
                    if (obj.childNodes[i].type == "hidden")
                    {
                        getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
                    }
                    if (obj.childNodes[i].type == "text")
                    {
                        getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
                    }
                    if (obj.childNodes[i].type == "checkbox")
                    {
                        if (obj.childNodes[i].checked)
                        {
                            getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
                        }
                        else
                        {
                            getstr += obj.childNodes[i].name + "=&";
                        }
                    }
                    if (obj.childNodes[i].type == "radio")
                    {
                        if (obj.childNodes[i].checked)
                        {
                            getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
                        }
                    }
                }   
                else if (obj.childNodes[i].tagName == "SELECT")
                {
                    var sel = obj.childNodes[i];
                    getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
                }   
                else if (obj.childNodes[i].tagName == "TEXTAREA")
                {
                    getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
                }
                else
                {
                    var iobj = obj.childNodes[i];
                    for (ii=0; ii<iobj.childNodes.length; ii++)
{
                                //hier kopieer ik het bovenste met obj = iobj en i = ii
}
}

[H004]

Ik weet dat in Mootools de functie "each" alle elementen (dus ook genest in andere nodes) doorloopt. Misschien kan je kijken hoe ze dat in die library hebben aangepakt.

[RobIII]

Zoals je in de Quickstart kunt lezen, waar ik je eerder al naar verwees zien we ook graag (puntje 3) wat je al gezocht/gevonden en geprobeerd hebt en wat er dan niet werkt; ook een indicatie van (puntje 4) waar je denkt dat het probleem zit. Verder mis ik nogal wat detail (puntje 2) want het is mij op dit moment in ieder geval niet duidelijk wat je bedoeld met "childs" (wat je overigens "children" noemt ); heb je geneste formulieren? Of...? Wat bedoel je met "het zoekt echter alleen in form enn niet in de childs van form naar velden."?

Tot slot is het misschien handig om je post, voordat je op verstuur klikt, even controleert op spelfouten en dat je nadenkt over een goede titel (dat laatste heb ik even voor je aangepast).

[ Voor 32% gewijzigd door RobIII op 29-02-2008 12:48 ]

[Cavorka]

Childs in een form? Klinkt ingewikkeld.

Ben je niet gewoon op zoek naar: document.forms['formname'].elements?

Zie ook hier.

[P.O. Box]

of (aangezien me niet echt duidelijk is wat je wil bereiken nog maar een optie:)

ben je niet op zoek naar een GET request van een formulier?

[Verwijderd]

het is de bedoeling dat het bijvoorbeeld in de volgende tabel ook de input objecten vindt, en dat doet het ook wel maar daarvoor moet ik wel 5 for loops in elkaar gebruiken. en wanneer ik dan ook nog div's toevoeg moet ik er nog een in de laatste zetten enz.
het werkt opzich wel maar elke keer als ik er een niveau bij maak moet ik ook het script langer maken.

HTML:

<form id=form>
    <table border="0" width="100%" id="table1">
        <tr>
            <td>naam<input type="text" name="naam" size="20"></td>
            <td><input type="checkbox" name="weergeven" value="ON">weergeven</td>
        </tr>
        <tr>
            <td colspan="2">inhoud<br>
            <textarea rows="2" name="inhoud" cols="200"></textarea></td>
        </tr>
    </table>
</form>

[Verwijderd]

Edwardvb schreef op vrijdag 29 februari 2008 @ 12:56:
of (aangezien me niet echt duidelijk is wat je wil bereiken nog maar een optie:)

ben je niet op zoek naar een GET request van een formulier?

als de GET request van een formulier hetgeen is dat bij normaal submitten van een get formulier achter de url komt zoek ik dat inderdaat.

[Verwijderd]

Verwijderd schreef op vrijdag 29 februari 2008 @ 13:36:
het is de bedoeling dat het bijvoorbeeld in de volgende tabel ook de input objecten vindt, en dat doet het ook wel maar daarvoor moet ik wel 5 for loops in elkaar gebruiken. en wanneer ik dan ook nog div's toevoeg moet ik er nog een in de laatste zetten enz.
het werkt opzich wel maar elke keer als ik er een niveau bij maak moet ik ook het script langer maken.

Wat hier normaal nodig is is recursion, maar je kunt het deze keer af met:

JavaScript:

var elts = document.getElementById('form').elements;
for (var i = 0; i < elts.length; i++) {
    // elts bevat alle inputs, selects, textareas, etc in het formulier
    // doe hier iets met elts[i];
}

[Verwijderd]

bedankt blues, dat werkt,
hieronder nog even hoe het is geworden:

JavaScript:

        var getstr = "";
        var elts = document.getElementById(objid).elements;
        for (var i = 0; i < elts.length; i++)
        {
            if (elts[i].tagName == "INPUT")
            {
                if (elts[i].type == "hidden")
                {
                    getstr += elts[i].name + "=" + elts[i].value + "&";
                }
                if (elts[i].type == "text")
                {
                    getstr += elts[i].name + "=" + elts[i].value + "&";
                }
                if (elts[i].type == "checkbox")
                {
                    if (elts[i].checked)
                    {
                        getstr += elts[i].name + "=" + elts[i].value + "&";
                    }
                    else
                    {
                        getstr += elts[i].name + "=&";
                    }
                }
                if (elts[i].type == "radio")
                {
                    if (elts[i].checked)
                    {
                        getstr += elts[i].name + "=" + elts[i].value + "&";
                    }
                }
            }   
            else if (elts[i].tagName == "SELECT")
            {
                var sel = obj.childNodes[i];
                getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
            }   
            else if (elts[i].tagName == "TEXTAREA")
            {
                getstr += elts[i].name + "=" + elts[i].value + "&";
            }
        }
        getstr += "post=1";
        makePOSTRequest(url,getstr,div); // dit verstuurt de gegevens naar url en laad het in in div

[ Voor 0% gewijzigd door een moderator op 29-02-2008 15:06 . Reden: Code tags toegevoegd / Syntax highlighting ftw \0/ ]

[reddevil]

En dan meteen dingen samenvoegen voor minder code, bijv:

JavaScript:

if (elts[i].type == "hidden") 
{ 
       getstr += elts[i].name + "=" + elts[i].value + "&"; 
} 
if (elts[i].type == "text") 
{ 
       getstr += elts[i].name + "=" + elts[i].value + "&"; 
}

naar

JavaScript:

if (elts[i].type == "hidden" || elts[i].type == "text") 
{ 
       getstr += elts[i].name + "=" + elts[i].value + "&"; 
} 

etc

[crisp]

Ik zou er niet zo makkelijk over denken, hier een aantal pitfalls:

- vergeten te urlencoden (gebruik encodeURIComponent voor zowel names als values)
- niet checken of een form-element toevallig disabled is
- niet checken of het form-element wel een name -attribuut heeft (of ueberhaupt een form-element is, zo nemen sommige browsers fieldsets ook mee in de elements collectie)
- type="reset" mag/kan nooit meegestuurd worden
- geen handling voor type="file" (error geven of een gewone submit forceren)
- geen (correcte) handling voor type="image" en type="submit" (mogen ook alleen meegestuurd worden indien de submit via zo'n element is getriggered)
- geen support voor type="password"
- geen support voor <button>
- geen support voor 'multiple' selects
- een select met selectedIndex -1 mag niet meegestuurd worden
- indien een geselecteerde option geen value-attribuut heeft moet de text worden meegestuurd
- ongeselecteerde checkboxen mogen niet meegestuurd worden
- een geselecteerde checkbox zonder value-atribuut moet 'on' meesturen als waarde

Maar niet getreurd, er zijn ook bijna geen libraries die het wel correct doen