[JS] Loop door form elements

[DeepFreeze.NL]

Ik probeer middels een simpel HTML form in combinatie met Javascript (AJAX) een form te submitten naar post.php. Dit script moet voor verschillende formulieren bruikbaar zijn waarvan de inhoud en aantal input velden elke keer anders is. Dit heb ik proberen op te lossen door een loop te maken waarmee het aantal input velden (elements) elke keer opnieuw wordt ingelezen. Tot dusver is dat mij gelukt, maar nu loop ik tegen het probleem aan dat alle waardes van de input velden achter elkaar worden gezet.

Het resultaat (echo uit post.php) van de volgende code is dan ook:
naam 1 is: pptxtname2=qq=Submit en naam 2 is:

Wanneer ik de uitkomst in een alert zet, dan krijg ik het volgende resultaat:
txtname=pp --> ok,
txtname=pptxtname2=qq --> ok,
txtname=pptxtname2=qq=Submit --> ok,

Wat doe ik nou fout?

HTML:

<form name="myForm" id="myForm">
<table>
<tr><td>Enter Name</td><td><input type="text" name="txtname" id="txtname" /></td></tr>
<tr><td>Enter Name</td><td><input type="text" name="txtname2" id="txtname2" /></td></tr>
<tr><td colspan="2"><input type="button" value="Submit" onclick="ajaxFunction();" /></td></tr> 
</table>
<hr />
<div id="message" name="message"></div> 
</form>

JavaScript:

<script type="text/javascript">
var time_variable;

function getXMLObject()  //XML OBJECT
{
    var xmlHttp = false;
    try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
        } catch (e2) {
            xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
        }
    }
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
    }
    return xmlHttp;  // Mandatory Statement returning the ajax object created
}

var xmlhttp = new getXMLObject();   //xmlhttp holds the ajax object

function ajaxFunction() {
    var getdate = new Date();  //Used to prevent caching during ajax call
    if(xmlhttp) { 
        // Loop door alle velden die verstuurd moeten worden.
            var poststr = '';
            var elem = document.getElementById('myForm').elements;
            for(var i = 0; i < elem.length; i++) {
                alert(poststr += elem[i].name + "=" + elem[i].value);
            }
        //var poststr = "txtname=" + encodeURI( document.getElementById("txtname").value ) +
        //"&txtname2=" + encodeURI( document.getElementById("txtname").value );
        
        xmlhttp.open("POST","post.php",true); //calling testing.php using POST method
        xmlhttp.onreadystatechange  = handleServerResponse;
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.send(poststr); //Posting txtname to PHP File
    }
}
 
function handleServerResponse() {
    if (xmlhttp.readyState == 4) {
        if(xmlhttp.status == 200) {
            document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
        } else {
            alert("Er is een fout opgetreden tijdens de verzending van dit formulier. Probeer het nog eens. Mocht u nogmaals deze melding krijgen, neemt u dan telefonisch contact op te nemen.");
        }
    }
}

PHP:

$a = "naam 1 is: ".$_POST['txtname']." en naam 2 is: ".$_POST['txtname2'];
echo $a;

[Bozozo]

Als je meerdere variabelen in de GET zet moeten er ampersands tussen. Dus index.php?text1=foo&text2=bar.

[Verwijderd]

Ik raad je sterk aan om een Javascript library te gebruiken zoals jquery, dan hoef je in elk geval om dingen als Xmlhttprequests voor de verschillende browsers niet te denken. Daarbij heeft jquery een aantal handige functies om door elementen te wandelen.

Over je huidige code: Je verlengt die poststr variabele steeds met de waarde van het volgende element. Die wordt daardoor idd steeds langer. Zie maar, je doet: +=
Ik begreep je probleem verkeerd, het komt inderdaad doordat je er geen ampersand tussen doet.

[ Voor 10% gewijzigd door Verwijderd op 18-05-2009 13:21 ]

[DeepFreeze.NL]

Bozozo schreef op maandag 18 mei 2009 @ 13:19:
Als je meerdere variabelen in de GET zet moeten er ampersands tussen. Dus index.php?text1=foo&text2=bar.

Dankje! De & was inderdaad de oplossing! Achteraf ook wel heel logisch

[Michali]

Let wel op dat je een XMLHttpRequest object niet kan delen tussen verschillende requests. Nu maak je hem 1 keer aan als globale variabel; dat gaat problemen opleveren als je 2 requests tegelijkertijd gaat doen.

[DeepFreeze.NL]

Michali schreef op maandag 18 mei 2009 @ 16:40:
Let wel op dat je een XMLHttpRequest object niet kan delen tussen verschillende requests. Nu maak je hem 1 keer aan als globale variabel; dat gaat problemen opleveren als je 2 requests tegelijkertijd gaat doen.

Hoe kan ik dit oplossen? Door voor elke request een aparte functie te maken?

[Bosmonster]

DeepFreeze.NL schreef op dinsdag 19 mei 2009 @ 14:56:
[...]

Hoe kan ik dit oplossen? Door voor elke request een aparte functie te maken?

Nee, door meerdere XHR objecten te gebruiken. Je kunt bijvoorbeeld een pool bijhouden van beschikbare XHR objecten en na gebruik weer vrijgeven. Als je er te weinig hebt kun je er dan eentje bijmaken.

De meeste libraries doen dit allemaal voor je.

[DeepFreeze.NL]

Bosmonster schreef op dinsdag 19 mei 2009 @ 15:03:
[...]


Nee, door meerdere XHR objecten te gebruiken. Je kunt bijvoorbeeld een pool bijhouden van beschikbare XHR objecten en na gebruik weer vrijgeven. Als je er te weinig hebt kun je er dan eentje bijmaken.

De meeste libraries doen dit allemaal voor je.

Ik ga het even uitzoeken allemaal. Het liefst wil ik JS libraries gaan vermijden omdat daar teveel functies en KB's aan JavaScript bij zit die ik toch niet gebruik. Ik ben meer opzoek naar een wat simpelere en kleinere functie.

[DeepFreeze.NL]

Voor diegene die de oplossing wilt hebben:
Instructies
Source

[Bosmonster]

Die oplossing hergebruikt alleen de objecten niet en ze worden ook niet vernietigd, waardoor het geheugengebruik op blijft lopen.

Libraries zijn zo gek nog niet hoor Die paar (verwaarloosbare) KB extra schelen je een heleboel tijd, geven je veel performance-winst terug en voorkomen xbrowser-problemen.

Daarnaast is de code die je schrijft (zeker in jQuery) een heel stuk kleiner dan anders, waardoor je zelfs die paar KB's wel weer terugverdient.

[ Voor 60% gewijzigd door Bosmonster op 19-05-2009 16:33 ]

[R4gnax]

Bosmonster schreef op dinsdag 19 mei 2009 @ 16:31:
Libraries zijn zo gek nog niet hoor Die paar (verwaarloosbare) KB extra schelen je een heleboel tijd, geven je veel performance-winst terug en voorkomen xbrowser-problemen.

Verwaarloosbaar is inderdaad het goede woord. Minified & GZipped is jQuery nog geen 20KB.

Om dat in perspectief te zien: De gegenereerde HTML van deze thread is volgens Firefox al 13 KB en alleen al de avatars van de 5 personen die er tot nu in gepost hebben zijn samen al groter dan de jQuery library.

[crisp]

Note dat form-serialisatie in javascript zeker niet eenvoudig is: http://malsup.com/jquery/form/comp/

edit: hmmz, per ongeluk nog een argument voor jQuery, ook al is het niet mijn favo library

[ Voor 32% gewijzigd door crisp op 19-05-2009 22:51 ]