calling capcha function using jquery load

Question

I am using a capcha for my form and i want to display it to the user when the page first loads up, the capcha is randomly generated using a php function, is it possible to call the function using jquery load and display it to the user. any help would be most appreciated.

index.php

<input type="text" id="capcha" size ="25" placeholder="capcha" />
<span id="random_capcha" src="validate.php" ></span></br></br>

validate.php

<?php
session_start();
include 'display.php';
$first = first();
$second = second(); //returns omg lol;

$_SESSION["captcha_code"] = $captcha_code; $first.' '.' '.' '.$second;

?>

display.php

<?php
function first(){ //function parameters, two variables.

$min_number = 1;
$max_number = 15;
$random_number1 = mt_rand($min_number, $max_number);
return $random_number1;
}


function second() {

$min_number = 1;
$max_number = 15;
$random_number2 = mt_rand($min_number, $max_number);

return $random_number2;
}
?>

Answer 1

You can use AJAX to call the content from server and replace into document element.

$.ajax({
     url: "/captcha.php",
     context: document.body
}).done(function(data){$("#random_captcha").html(data);});

To validate, you can also check answer using AJAX.

More details on JQuery API documentation of $.ajax().

Suggestion : You could use image captcha for validation. The uses for php_gd' functions is well documented and exemplified on PHP.net. You print the text with imagestring function. More details on https://secure.php.net/manual/en/function.imagecreatetruecolor.php . I think it's most effective against bots.

Answer 2

You can send ajax request to server and insert result to target span.

Client javascript:

$.get("captcha.php", function(data) {
    //data is your captcha code retrieved from server
    $('#random_captcha').html(data);//insert captcha to target container
});

captcha.php

<?php
//...generating captcha
echo $captcha_code;