Question

Been struggling with this for a couple days now. Here’s the set up – I have a parent page “support.php” there are tabs, and when you click a tab it brings in the appropriate form via ajax.
(the relevant code for each section:)

form input’s on the AJAX page

<input type="text" class="numbers" name="captchaImage" id="SupportNumbers" size="6" value="" readonly>
<input type="text" class="numbers" name="SupportMath"  id="SupportMath" size="6" maxlength="6" tabindex="9">

The parent page – support.php calls for “validation.js” which is my jQuery.validate script.

...
SupportMath: {
    required: true,
    equal: "<?php echo $randomNumTotal; ?>" 
}

There is a .get command on the parent page for a file “random.php”

$.get('PHP/random.php', function (data){
    $("#SupportNumbers").val(data);
});

<?php
    $randomNum = rand(0,9);
    $randomNum2 = rand(0,9);
    echo $randomNum ."+". $randomNum2;
    $randomNumTotal = $randomNum + $randomNum2;
?>

which generates two random numbers so you can add them together. The validation checks to make sure
the two numbers that are generated are added correctly. I just can’t seem to get all these pieces to use the same numbers, i can get the text box “SupportNumbers” to populate with two random numbers say “2 + 5” but when I enter “7” into “#SupportMath” it displays the error msg. It should be $randomNumTotal but I can’t get that to the page, and have the validation script check against that.
HELP.

I realize this is clear as mud so ill try and explain more
I have 5 forms on my support page. To reduce the chaos, I have them in a vertical tab set. I don’t want my js validation script on the page and I don’t want all 5 forms hidden/displayed on the page due to some issues we’ve had with some bots. So my solution was to bring in the forms with AJAX (done) and just link to the validation script (done) all is good except for our “random math captcha” I can put it in a file and use the “.get” command to populate the box that holds the two random math questions, but can’t get the answer to validate. Hope this helps, code below.

Answer 1

EXPLANATION: ( step by step )

• we use your method to generate two random number from 1 to 9 at page load
• we have added an extra input <input type="hidden" name="math" id="math"/> this field is needed since you are using a readonly field, now the readonly fields are not submitted…by forms, this way we have the one shown to user and another one hidden, this one will be submitted;
• we get the #math value that is a string ex: 5+2 so we need to transform this into two int and sum it.
• finally we make the check the SUM against the user input #SupportMath

---

• DEMO: https://so.lucafilosofi.com/php-jquery-validation/

PHP ( that check the match against… )

if ( isset($_POST['post']) ) {  
  $math = explode('+',trim($_POST['math']));
  $sum = ( (int)$math[0] + (int)$math[1] );
  $message = 'error';
  if ( (int)$sum === (int)$_POST['SupportMath'] ) {
  $message = 'success';
  }
  echo $message;
}

jQuery ( pseudo code…)

$(function() {
    $.get('random.php',function(data) {
        $("#SupportNumbers,#math").val(data);
    });
    $('#form').submit(function(e) {
        e.preventDefault();
        var query = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "post.php",
            data: "post=post&" + query,
            success: function(msg) {
                if (msg.indexOf('success') == -1) {
                    alert('error');
                } else {
                    alert('cURL');
                }
            }
        });
    });
});

HTML

<input type="text" class="numbers" name="captchaImage" id="SupportNumbers" size="6" readonly>
<input type="hidden" name="math" id="math"/>
<input type="text" class="numbers" name="SupportMath"  id="SupportMath" size="6" maxlength="6" tabindex="9">