Question

First of all, I’m using the following code to generate a form via JavaScript and appending it to some container ( of my choice ) :

var registerStructureWrapper = '<div class="content-register"></div>';

var registerStructure = [
        '<form name="',opts.regFormClass,'" class="',opts.regFormClass,'" method="post" action="#">',
            '<fieldset class="',opts.regFieldsWrapper,'">',
                '<fieldset class="',opts.regUserWrapper,'">',
                    '<label for="',opts.regUserInt,'" class="',opts.regUserLbl,'">',checkNameLenght(opts.regUserName,regNamesLenght.userNameLenght,20,'Username'),'</label>',
                    '<input type="text" name="',opts.regUserInt,'" class="',opts.regUserInt,'" placeholder="" value="" autocomplete="off" />',
                '</fieldset>',
                '<fieldset class="',opts.regEmailWrapper,'">',
                    '<label for="',opts.regEmailInt,'" class="',opts.regEmailLbl,'">',checkNameLenght(opts.regEmailName,regNamesLenght.emailNameLenght,20,'Email'),'</label>',
                    '<input type="email" name="',opts.regEmailInt,'" class="',opts.regEmailInt,'" placeholder="" value="" autocomplete="off" />',
                '</fieldset>',
                '<fieldset class="',opts.regPassWrapper,'">',
                    '<label for="',opts.regPassInt,'" class="',opts.regPassLbl,'">',checkNameLenght(opts.regPassName,regNamesLenght.passNameLenght,20,'Password'),'</label>',
                    '<input type="password" name="',opts.regPassInt,'" class="',opts.regPassInt,'" placeholder="" value="" autocomplete="off" />',
                '</fieldset>',
                '<fieldset class="',opts.regConfWrapper,'">',
                    '<label for="',opts.regConfInt,'" class="',opts.regConfLbl,'">',checkNameLenght(opts.regConfName,regNamesLenght.confNameLenght,20,'Confirm Password'),'</label>',
                    '<input type="password" name="',opts.regConfInt,'" class="',opts.regConfInt,'" placeholder="" value="" autocomplete="off" />',
                '</fieldset>',
                '<fieldset class="',opts.regBtnWrapper,'">',
                    '<div class="message-handling"></div>',
                    '<button type="submit" name="',opts.regBtnInt,'" class="',opts.regBtnInt,'">',checkNameLenght(opts.regBtnName,regNamesLenght.btnNameLenght,8,'Register'),'</button>',
                '</fieldset>',
            '</fieldset>',
        '</form>',
        '<div class="',opts.regBackBtn,'">',
            '<ul class="inside">',
                '<li class="back"><a><img src="assets/gfx/back.png" alt="Back" /></a></li>',
            '</ul>',
        '</div>'
    ];


    $(registerStructureWrapper).appendTo(container).hide();
    var registerWrapper = $(container).find('.content-register');
    $(registerStructure.join('')).appendTo(registerWrapper);

And I have the following code to generate a math captcha :

<?php

    public function mathCaptcha()
    {
        $sum1 = mt_rand(1,9);
        $sum2 = mt_rand(1,9);
        $sum3 = $sum1 + $sum2;
        $_SESSION['answer'] = $sum3;
       return $sum1 . ' + ' . $sum2 . ' = ';
    }

?>

My question would be can I somehow include that sum into the js generated form ? Is there a way to do that without having the form in plain html but generating it as I already do ?

Mention: The script is’t on page, it’s a loaded script with <script> tags.

Answer 1

If you want to pass the variable from PHP to JS, you need to generate the JS code by PHP or you need to load the PHP result dynamically by AJAX and include it to your form.

For AJAX loading, use something like this:

$('#captcha_placeholder').load('/php_captcha.php');

Where your php_captcha.php file should look similar to yours, but should echo the output.

You should make some changes, as this is just the raw idea.