AJAX-Question

[diego]

Hi fellow nerds,

I'm currently working on a little PHP-based webapplication and I wish to spice it up a little bit by having the user fill out forms without reloading the entire page. Enter AJAX, the now-infamous Web2.0-demon. I do not want to use prototype and/or Dojo and/or scriptaculous but rather build my own little framework step by step.

Now, I encountered a little problem:

I have a form with 3 little input type="text"-boxes, each one has its unique id in order to compare the user-input to the correct answers in the PHP-script. Whenever I hit the button (no, it's not a normal "submit"-button, but - rather - a "button"-button), the XMLHttpRequest-Object is instantiated, the PHP-script is called, but ... the array is not compared to the user-input.

Here my question:
Do I have to instantiate an XMLHttpRequest-Object for every input-type="text"-box or can I simply loop through all of them?

This is the template:

Code: Select all

<form action="includes/lueckentext1.php" method="get" id="luecke1">
"Ein Projekt ist eine <input type="text" id="aufgabe0" size="10" value="" /> Aufgabe
 und ist auf ein zu <input type="text" id="aufgabe1" size="10" /> 
 Ergebnis gerichtet. Es benötigt vielfältige <input type="text" id="aufgabe2" size="10" />
 und ist zeitlich begrenzt."<br /><br />
<input type="button" name="send" value="Prüfe!" onClick="baueAnfrage()" />

This is the JavaScript:

Code: Select all

function baueAnfrage()
{
	var text0, text1, text2;
	
	erzeugeAnfrage();
	text0 = document.getElementById("aufgabe0").value;
	var url0 = "includes/lueckentext1.php?aufgabe0=" + text0;
	anfrage.open("GET", url0, true);
	anfrage.onreadystatechange = updateSeite;		//KEINE KLAMMERN!
	anfrage.send(null);
	
	erzeugeAnfrage();
	text1 = document.getElementById("aufgabe1").value;
	var url1 = "includes/lueckentext1.php?aufgabe1=" + text1;
	anfrage.open("GET", url1, true);
	anfrage.onreadystatechange = updateSeite;		//KEINE KLAMMERN!
	anfrage.send(null);
	
	erzeugeAnfrage();
	text2 = document.getElementById("aufgabe2").value;
	var url2 = "includes/lueckentext1.php?aufgabe2=" + text2;
	anfrage.open("GET", url2, true);
	anfrage.onreadystatechange = updateSeite;		//KEINE KLAMMERN!
	anfrage.send(null);
}

      
function updateSeite()
      {
        if (anfrage.readyState == 4 && anfrage.status == 200)
        {
          var korrigierterText = anfrage.responseText;                //was steht im array?
          var myH3   = document.createElement("h3");                  //element erzeugen
          var myText = document.createTextNode(korrigierterText);     //textnode erzeugen
          myH3.appendChild(myText);                                   //text ans element kleben
          var Ausgabebereich = document.getElementById("neuerText");  //und in den entsprechenden div-container...
          Ausgabebereich.appendChild(myH3);                           //reinschreiben...
        }

      }

... and this is the PHP-Array:

Code: Select all

<?php
	
  //uebergabe der get-vars
	$eintrag0 = htmlspecialchars($_GET['aufgabe0']);
  $eintrag1 = htmlspecialchars($_GET['aufgabe1']);
	$eintrag2 = htmlspecialchars($_GET['aufgabe2']);
	      
	$korrekt0 = "einmalige";
	$korrekt1 = "erzielendes";
	$korrekt2 = "Ressourcen";
  
  if (isset ($eintrag0) && $eintrag0 != '')
  {
    if ($eintrag0 == $korrekt0)
    {
      echo "Prima! \"$eintrag0\" ist korrekt! ";
    }
    else
    {
      echo "Falsch geraten... ";
    }
  }
  else
  {
    echo "Bitte fuellen Sie alle Felder aus! ";
  }

[...]

As you can see - I take the user-input, make an AJAX-call and (try to) compare the user-input with the PHP-script, but it just does not compare the first two, just the last one.

Thanks for any nerdy help!

[MKJ]

lol, german scripting

[^misantropia^]

Have your JS code concatenate the "aufgabe" fields (lol, Germans) into one URL. Your PHP code expects three GET parameters but you only pass it one with each AJAX call. Also, you can't make simultaneous calls with a single object (the third call will override the first two).

[^misantropia^]

Code: Select all

if (isset ($eintrag0) && $eintrag0 != '')

And the isset() is superfluous because you unconditionally created $eintrag0 a few lines above (but failed to check if it was actually sent by the client). You'll want to do something like this:

Code: Select all

if (isset($_GET['aufgabe0']) /* lol, Germans */ && $eintrag0 = htmlspecialchars($_GET['aufgabe0']))

[diego]

Thanks misantropia, I'll make it so!

[diego]

owned - thanks, mate, I'll buy you a keg of beer when we'll ever meet :icon14:

[^misantropia^]

You're welcome. But beware, I've an endless repository of "lol, Germans" jokes.