[JS/HTML/PHP]Aflezen hidden field arrays met JS

[MrDummy]

Ik zit met een bijzonder probleem. Ik denk dat het misschien niet eens mogelijk is met.length

Voorbeeld code

code:

<?
$veld=array();
?>
<form .........>
<input type='hidden' name='veld[]' value='x1x'>
<input type='hidden' name='veld[]' value='x2x'>
<input type='hidden' name='veld[]' value='x3x'>
<input type='hidden' name='veld[]' value='x4x'>
<input type='hidden' name='veld[]' value='x5x'>
<input type='hidden' name='veld[]' value='x6x'>
.........
</form>

Deze methode werkt prima. De array() is verplicht om te zorgen dat waarden correct opgenomen en doorgegeven wordt na submit. Anders werkt geheel niet.
Vervolgens is het kinderspel om array tevoorschijn te halen via $waarde=$_POST['veld']; want dat is vanzelf opgebouwd dank aan [] in veld[].
Deze methode is altijd aan te raden bij automatisch generated multi checkbox velden via PHP.

Maar nu ben ik aan het uitzoeken hoe het gaat met uitlezen met javascript. Met type=checkbox is wel terug te vinden met document.form.veld.length en de rest is dan te lezen via for-lus aflees code.

Maar voor hidden fields zie ik nog geen syntax tot nu toe met .length. Het geeft bij mij foutmelding dat het geen properties heeft.
Hidden fields array is dus andere geval. Van Checkbox velden aflezen zijn er wel syntax oplossingen voor, maar hoe zit het eigenlijk hier?

Je mag het zeggen.

[crisp]

getElementsByName

[MrDummy]

Hmm, de eerste dat ik als antwoord krijg in Firefox console:

Fout document.mapform.getElementsByName is not a function

De code ziet er zo uit:

code:

    if (document.mapform.getElementsByName("mobid[]").length)
        {
        for (i=0; i<document.mapform.getElementsByName("mobid[]").length; i++)
            {
            idvalues=idvalues+"|"+document.mapform.modid[i].value;
            }
        }

Zit ik ergens naast?

[Verwijderd]

De naam is mobid, en niet mobid[] zou ik denken. In PHP roep je immers ook niet $mobid[] aan.

[crisp]

getElementsByName is een method van het document object en niet van een elementNode.
Echter werkt dit ook gewoon:

JavaScript:

var form = document.forms['mapform'];
var hiddens = form.elements['mobid[]'], i = 0, l = hiddens.length;
for (; i < l; i++)
{
  // doe iets met hiddens[i];
}

vergeet die dotnotatie gewoon...

[MrDummy]

In HTML is [] nodig in name veld omdat het dan array waarden bijeen kan sprokkelen. Zonder [] werkt array opbouw niet en telt alleen de laatste name veld mee, de rest wordt "overschreven".

Vervolgens is in $_POST de [] niet meer nodig omdat het al zelf array is geworden.

Maar javascript is kennelijk gevoeliger en moet verschil kunnen zien tussen normale mobid en mobid[] in hidden fields.

Ook moet ik opletten dat het niet elders per ongeluk waarde meepakt van andere velden zoals van smobid, omdat deze ook woord "mobid" bevat.

Ik ben dat nog steeds zonder succes aan het uitzoeken hoe het zit.

[crisp]

De oplossing staat toch boven je post

Niet de ranzige dot-notatie gebruik, maar gebruik maken van de forms en elements-collections

[MrDummy]

Ik ben ermee bezig, maar het gaat nog niet lekker
Ik zal je straks tonen welke foutmeldingen ik nu weer voor mijn neus krijg....

Sorry, was wat vergeten, nu komt er wel meer schot in de zaak...

Edit:
De code werkt goed.

Alleen deze probleem:
De dynamisch toegevoegde hidden fields (ook met name='mobid[]') worden echter niet goed opgepikt en ingelezen. Dat is jammer, want dat moet ik ook hebben. Ja, de veranderingen op de pagina via javascript innerHTML moet ik ook kunnen registeren.
De veranderingen in ene DIV veld is plotseling length = 0 geworden.
Alleen dan kan ik de zaak verder verwerken en ben ik klaar.

Anders moet ik een var aanmaken en dus parallel opslaan, niet alleen HTML, maar ook Javascript waarden.

[ Voor 112% gewijzigd door MrDummy op 08-11-2006 00:41 ]

[MrDummy]

Ik merk nu dat Childs gebruik (appendChild en RemoveChild) wat makkelijker maakt dan alles opnieuw bouwen en innerHTML doorgeven. Ik ga hiermee wat aan de slag
Scheelt ook moeite om alles te onthouden, zo heb ik gemerkt.
Demo van iemand anders hier: http://www.dustindiaz.com/basement/addRemoveChild.html

En nogmaals, veranderingen door Javascript laat niks zien in paginabron.
Voordat er wat verandert in div gebied, zit er 1 tijdelijke hidden veld mobid[] met nul waarde in om te voorkomen dat het foutmelding geeft.
Na verandering voeg ik de nieuwe hidden field toe, de oude wordt dus overschreven.
Gebleken dat met JS code hierdoor op 0 length ontstaat, het ziet dus niks meer. (voorheen is correct 1 length)

Ik heb gisteren lang zit te googlen, maar geen enkele site toont duidelijk antwoord op mijn probleem waar dynamisch toegepaste HTML elementen opnieuw gelezen wordt via JS. Zeker weinig voorkomende probleem, al ben ik wel 1 demo gezien, maar dat is nog niet duidelijk genoeg.

Er is kennelijk een reload code nodig om vernieuwde pagina beetje door browser buffer te voeren zodat JS dan pas naast oude elementen ook nieuwe elementen ziet. Welke code is dat? De pagina wordt zelf niet opnieuw herladen, die blijft hetzelfde.

De bovenstaande probleem mag je proberen oplossen, maar ik ga zeker child gebruiken omdat het hoop programmerklus scheelt.

[crisp]

Dit werkt prima in echte browsers:

HTML:

<form id="mapform" action="#">
<input type="hidden" name="mobid[]">
<input type="hidden" name="mobid[]">
<input type="hidden" name="mobid[]">
</form>
<script type="text/javascript">

var form = document.forms['mapform'];
alert(form.elements['mobid[]'].length); // 3

var newmobid = document.createElement('input');
newmobid.type = 'hidden';
newmobid.name = 'mobid[]';

form.appendChild(newmobid);

alert(form.elements['mobid[]'].length); // 4

</script>

maar... in IE kan je na createElement geen name-attribuut toekennen aan een input, dat kan alleen op deze manier (warning: ranzigheid ahead!)

JavaScript:

var newmobid = document.createElement('<input name="mobid[]">');

needless to say dat bovenstaande manier compleet non-standard is en dus niet werkt in echte browsers; je zal daar dus een browsercheck omheen moeten bouwen...

[Janoz]

MrDummy schreef op dinsdag 07 november 2006 @ 23:32:
In HTML is [] nodig in name veld omdat het dan array waarden bijeen kan sprokkelen. Zonder [] werkt array opbouw niet en telt alleen de laatste name veld mee, de rest wordt "overschreven".

Hier ga je de fout in. HTML heeft helemaal niks te maken en helemaal geen notie van het feit dat die haken een array opleveren. html ziet gewoon veldnamen met haken erin. De veldnamen worden exact zo opgetuurd. Pas als het request bij php binnenkomt gaat php de conclusie trekken dat daar wel eens een array van gemaakt zou moeten worden. Geef je ze allemaal dezelfde naam dan komt er dus een lijstje met dezelfde namen. Ze worden wel allemaal meegestuurd, maar php neemt alleen de laatst binnengekomen versie over.

Vergelijk maar eens de volgende stukjes code in php:

PHP:

$var = 1;
$var = 2;
$var = 3;
$var = 4;

PHP:

$var = array();
$var[] = 1;
$var[] = 2;
$var[] = 3;
$var[] = 4;

Vervolgens is in $_POST de [] niet meer nodig omdat het al zelf array is geworden.

Pas in php is het een array geworden en zijn de haken dus neit meer nodig.

[MrDummy]

Je hebt gelijk.

Verder merk ik dat name='field[]' niet werkt als ik niet vooraf een field=array(); aanmaak, voordat deze velden worden gemaakt op browser.

Zonder field=array(); wordt het dan als gewoon tekst herkend en zoals je inderdaad al zegt, geeft laatste de uiteindelijke waarde door. Dat heb ik gemerkt uit mijn experimenten.

Heeft dat te maken met php deel dan met html deel, zodat php merkt dat het array aangemaakt moet worden?

[MrDummy]

Ik heb probleem opgelost met adden van childs (gebruikmakend van demo site die ik eerder boven heb gepost). Dat heeft zaak makkelijker gemaakt en veel codes gescheeld, maar ik zal aan andere tips denken en ze zeker elders toepassen wanneer ik ze nodig heb.

Hartelijk dank voor de hulp!