[Ajax] form elementen worden niet meegestuurd

[Tux]

Ik ben bezig met het maken van een formulier dat voor een gedeelte dynamisch gegenereerd zal moeten worden. Aangezien het niet de bedoeling is dat het een formulier verdeeld over meer pagina's zal worden, ben ik aan de slag gegaan met AJAX om het formulier op te bouwen.

Echter ik loop tegen een probleem aan: het formulier wordt wel gewoon weergegeven, maar als ik op het submit knopje druk van het formulier, dan komen de waarden van de velden niet aan in mijn verwerkingsscript (dit geldt dus alleen voor velden die na het laden van de pagina d.m.v. AJAX toegevoegd worden).

Ik heb nu zitten spelen met de form tag en met createElement() om de form elementen toe te voegen. Maar dit helpt niet.

Wat zou een manier zijn om dit probleem op te lossen? Met AJAX de data als XML ophalen, parsen en adhv die gegevens het formulier genereren (andere javascript onderdelen vielen uit toen ik aan de gang ging met createElement(), dus liever niet)? Of iets anders?

[--MeAngry--]

Mag ik eens vragen hoe je dat formulier dan precies verstuurd? Want als je nu gewoon een onSubmit actie aan het form hebt gehangen zul je zelf alle elementen uit het formulier langs moeten lopen om ze mee te sturen.

[Tux]

Ik heb het ongeveer als volgt gedaan:

HTML:

<form method="post" action="verwerk.php">
<input .... enz ...
<div id="hier_komt_ajax_spul"></div>
<input type="submit" value="Verwerken" />
</form>

[--MeAngry--]

Ah wacht, ik was in de veronderstelling dat het om het versturen van een formulier ging.
Wel vreemd overigens, want ik doe zoiets zelf ook om het gebruikers mogelijk te maken dynamisch een formulier in elkaar te klikken en dat werkt prima.
Hoe creeër je de veld-elementen nu precies? Want met createElement en het toevoegen van een name-attribuut zou dat prima moeten werken.

Dus:

JavaScript:

var newInput = document.createElement('input');
newInput.setAttribute('name','veldnaam');
newInput.setAttribute('type','text');
document.getElementById('hier_komt_mijn_ajax_spul').appendChild(newInput);

[edit]
Als je trouwens in Firefox kijkt kun je de zojuist gecreëerde velden selecteren, rechtsklikken en vervolgens 'View selection source' selecteren om de output van je JS te bekijken.

[ Voor 13% gewijzigd door --MeAngry-- op 22-02-2007 18:47 ]

[Uhmmie]

Tux: Ik denk dat ik je probleem al weet.. als je namelijk in internet explorer iets doet als:

elem = createElement("input");
elem.type = checkbox;
elem.name = 'zoeMoetHetHetenInMijnPost";
elem.value = 'enDitIsDeWaarde";

Dan zal het niet in je post data komen

Waarom niet? Er zit een lekkere bug in internet explorer die het niet toestaat dat je een name set voor een input object (nadat het gecreeerd is).. Kortom je object heeft geen naam en zal daarom niet in je post opgenomen worden..

Microsoft oplossing is daarvoor:
elem = createElement('<input name="zoMoetHetHetenInMijnPost">');
elem.type = checkbox;
elem.value = 'enDitIsDeWaarde";

Echter werkt dit weer niet in firefox Ik heb nu zelf een functie geschreven die dus bij de internet explorer de uitzondering gebruikt en bij andere browsers de standaard methode..

[--MeAngry--]

Uhmmie schreef op donderdag 22 februari 2007 @ 18:48:
Tux: Ik denk dat ik je probleem al weet.. als je namelijk in internet explorer iets doet als:

elem = createElement("input");
elem.type = checkbox;
elem.name = 'zoeMoetHetHetenInMijnPost";
elem.value = 'enDitIsDeWaarde";

Dan zal het niet in je post data komen

Waarom niet? Er zit een lekkere bug in internet explorer die het niet toestaat dat je een name set voor een input object (nadat het gecreeerd is).. Kortom je object heeft geen naam en zal daarom niet in je post opgenomen worden..

Microsoft oplossing is daarvoor:
elem = createElement('<input name="zoMoetHetHetenInMijnPost">');
elem.type = checkbox;
elem.value = 'enDitIsDeWaarde";

Echter werkt dit weer niet in firefox Ik heb nu zelf een functie geschreven die dus bij de internet explorer de uitzondering gebruikt en bij andere browsers de standaard methode..

Dit is ook niet de correcte (nette) manier voor het defineren van attributen. Zie mijn eerdere post.
(Overigens zijn daar ook heel wat inconsistenties aanwezig tussen Firefox, IE en bijv. Opera, maar dat even daargelaten...)

[Uhmmie]

--MeAngry-- schreef op donderdag 22 februari 2007 @ 18:51:
[...]

Dit is ook niet de correcte (nette) manier voor het defineren van attributen. Zie mijn eerdere post.
(Overigens zijn daar ook heel wat inconsistenties aanwezig tussen Firefox, IE en bijv. Opera, maar dat even daargelaten...)

Vandaar ook dat ik zei "zoiets als".. Ook als je met setAtrtibute werkt zal internet explorer het niet slikken dat je het attribute name probeerd te setten (met als gevolg dat je object geen naam heeft).

[Tux]

Het werkt dus ook niet als ik gewoon zonder javascript de form elementen maak. Bovendien was ik nog uberhaupt niet aan het testen met IE.

Ik ga maar weer eens proberen om ze toch met createElement aan te maken.

[edit]
Het lijkt er trouwens op dat javascript in mijn ajax content helemaal niet uitgevoerd wordt.

[edit2]
Als ik op de <form> tag een onsubmit plaats zoals:

code:

onsubmit="alert(document.getElementById('id_van_veld').value)"

dan krijg ik wel netjes de waarde te zien. Vanuit de pagina kan ik dus wel bij de form elementen die via ajax op de pagina zijn gekomen. Alleen als ik submit worden ze niet meegestuurd.

[ Voor 53% gewijzigd door Tux op 22-02-2007 19:08 ]

[Uhmmie]

Nog als extra reactie naar MeAngry:

Check dit:
http://msdn.microsoft.com...nce/properties/name_2.asp

The NAME attribute cannot be set at run time on elements dynamically created with the createElement method. To create an element with a name attribute, include the attribute and value when using the createElement method.

[Uhmmie]

Tux schreef op donderdag 22 februari 2007 @ 18:53:
[edit]
Het lijkt er trouwens op dat javascript in mijn ajax content helemaal niet uitgevoerd wordt.

[edit2]
Als ik op de <form> tag een onsubmit plaats zoals:

code:

onsubmit="alert(document.getElementById('id_van_veld').value)"

dan krijg ik wel netjes de waarde te zien. Vanuit de pagina kan ik dus wel bij de form elementen die via ajax op de pagina zijn gekomen. Alleen als ik submit worden ze niet meegestuurd.

edit 1: Javascript via XML_HTTP_REQUEST gaat vaak kapot. Let op dat je alle tekens goed afvangt en voldoet aan alle regels voor XML (gebruik van ë, é, etc is niet toegestaan en sloopt je javascript object van je browser)..

edit 2: verander onsubmit="alert(document.getElementById('id_van_veld').value)" eens naar onsubmit="alert(document.getElementById('id_van_veld').name)".. Krijg je nu ook daadwerkelijk de naam van het object te zien?

[Tux]

Ik heb geloof ik de oorzaak gevonden. In gewone formulieren is het mogelijk om bijvoorbeeld name="blaat[3]" in te stellen. Dat werkt kennelijk niet icm AJAX. name="blaat_3" en dan komen de gegevens wel door.

Jammer dat het niet op die manier werkt.

iig bedankt voor de hulp.

[Uhmmie]

Dat heeft waarschijnlijk te maken met met het feit dat [ en ] een speciale funtie heeft tijdens een XML_HTTP_REQUEST.. Ik weet zo niet de code maar waarschijnlijk is er wel een speciale code waarmee je dit teken kan vervangen zodat het uit eindelijk wel goed terecht komt.

[ Voor 5% gewijzigd door Uhmmie op 22-02-2007 19:43 ]

[crisp]

--MeAngry-- schreef op donderdag 22 februari 2007 @ 18:51:
[...]

Dit is ook niet de correcte (nette) manier voor het defineren van attributen. Zie mijn eerdere post.

oh, waarom is dat niet een nette manier?

(Overigens zijn daar ook heel wat inconsistenties aanwezig tussen Firefox, IE en bijv. Opera, maar dat even daargelaten...)

vertel... afgezien van misbruik van setAttribute() om 'style' en eventhandlers te setten ken ik niet zoveel verschillen hoor...

Uhmmie schreef op donderdag 22 februari 2007 @ 18:56:
Nog als extra reactie naar MeAngry:

Check dit:
http://msdn.microsoft.com...nce/properties/name_2.asp


[...]

Het werkt toch wel gedeeltelijk:

HTML:

<!DOCTYPE HTML>
<title>test</title>
<script type="text/javascript">
window.onload = function()
{
    var form = document.forms['myform'];
    var input = document.createElement('input');
    input.type = 'text';
    input.name = 'blaat[3]';
    input.value = 'foo';
    form.appendChild(input);
}
</script>
<body>
<?php

print_r($_POST);

?>
<form action="#" method="POST" id="myform"
    onsubmit="alert(this.innerHTML);alert(this.elements['blaat[3]'])">
    <input type="submit">
</form>

De waarde van het gegenereerde element komt (in IE6) toch wel degelijk mee in de POST, echter zal je het name-attribuut niet terugvinden in de alert van de innerHTML en geeft de lookup op name 'undefined'.

Verder is er zoals je ziet geen enkele belemmering om blokhaken te gebruiken voor het name-attribuut...

Uhmmie schreef op donderdag 22 februari 2007 @ 19:28:
[...]

edit 1: Javascript via XML_HTTP_REQUEST gaat vaak kapot. Let op dat je alle tekens goed afvangt en voldoet aan alle regels voor XML (gebruik van ë, é, etc is niet toegestaan en sloopt je javascript object van je browser)..

'gaat kapot' Het is nu eenmaal zo dat als je mbv innerHTML ergens een stuk script ingooit dat dat niet uitgevoerd wordt, dat is by design. En verder is op die manier werken ook bad practice - logica hoort niet in je data zelf te zitten.
En wat XML hiermee te maken heeft of bepaalde karakters is mij ook een raadsel...

Kortom: weer een hoop onzin in dit topic...