Form Post-Abfrage über Ajax / jQuery durchzuführen ?

Hallo,

Ich habe folgendes Anliegen an euch, auf einer Webseite möchte ich ein Kreis Captcha (welches funktioniert) benutzen.

Das ganze Funktioniert folgender Weise: Cirlecaptcha.php erzeugt ein Bild mit 8 geschlossenen & 1 offenen Kreis, beim Mauskick auf das Bild (Formular-Button / Input Image) werden per Form (Post method - $_POST['button_x/y']) die aktuellen Koordinaten vom "Mausklick"übertragen.

Diese Daten werden dann mit den Koordinaten von dem Offenden Kreis ($_SESSION['circle_x/y'];) weche über session_start(); übergeben werden verglichen (Ausgabe OK / Wrong).

Das Problem ist, dass zum Übertragen der Daten die Form abgeschickt wird, und dadurch ein Reload der Seite stattfindet.
Die Seite soll nicht neugeladen werden, die Form soll durch das Ergebniss ersetzt werden.

Ich habe schon versucht das irgenwie über jQuery bzw. Ajax umzusetzen, aber leider habe ich da noch nicht all zu viel Erfahrung.

Hier habe ich mal den Aktuellen Code für euch:

<?php session_start();?>


<?php
    if(isset($_POST['button_x']) && isset($_POST['button_y'])) {
        if(!empty($_SESSION['circle_x']) && !empty($_SESSION['circle_y']) && !empty($_SESSION['circle_r'])){
            $dx = $_POST['button_x'] - $_SESSION['circle_x'];
            $dy = $_POST['button_y'] - $_SESSION['circle_y'];
            $r1 = sqrt($dx * $dx + $dy * $dy);
            if ($r1 < $_SESSION['circle_r']){echo "OK";} else{echo "WRONG!";}
        }
    }
?>
    
<form id="form1" name="form1" method="post" action="<?=$_SERVER['PHP_SELF'];?>">
        <label>
        <input type="image" src="cirlecaptcha.php" style="cursor:crosshair;" name="button" id="button" value="Send" />
        </label>
</form>

cirlecaptcha.php gibt folgende Daten aus und über session_start weiter:

$_SESSION['circle_x'] = $x-pos;
$_SESSION['circle_y'] = $y-pos;
$_SESSION['circle_r'] = $radius;

Info:

Zitat

Klicke in den geöffneten Kreis: Hier handelt es sich um einen Formular-Button (type="image"). Klickt man nun irgendwo auf den Button, so wird die aktuelle X/Y-Position des Mauszeigers ausgewertet. Liegt die Position innerhalb des geöffneten Kreises, so war die Captcha-Prüfung erfolgreich

Ich habe mich schon mit dem Thema auseinandergesetzt, aber leider habe ich da wirklich keinen Durchblick.

Nun ist die Frage, ob ihr mir da weiterhelfen könnt, bzw. ob es überhaupt möglich ist?

Liebe Grüße,
Peter