Update headers with AJAX

Question

I have an AJAX form that only shows a captcha to the user when the form is sent more than 2 times.

I save those attempts on $_SESSION with PHP, but as the form is sent via AJAX captcha will only appear when the user refreshes the page even though he has sent the form more than 2 times.

This is because I’m not updating the headers I believe. How would I do this with AJAX? By sending the form that data be updated?

@Edit: In my contact.php I do the following to set the requests

if ($_SERVER['REQUEST_METHOD'] == 'POST') $_SESSION['attemptsSendEmail'] += 1;

if ($_SESSION['attemptsSendEmail'] >= 2) {
    if(!isset($ret->captcha)){
        http_response_code(401);
        exit('Captcha errado, bloqueado pelo anti-spam');
    }
    if (isset($ret->captcha) && $ret->captcha !== $_SESSION['captcha']) {
        http_response_code(401);
        exit('Captcha errado, bloqueado pelo anti-spam');
    }
}

And here the validation in Javascript

waghcwb.query('#contact-form').onsubmit = function(event) {

    event.preventDefault();

    var btn = waghcwb.query('#contact-form button[type="submit"]');


    waghcwb.post('contact/contact.php', {
            name: waghcwb.query('input[name="name"]').value,
            email: waghcwb.query('input[name="email"]').value,
            message: waghcwb.query('textarea[name="message"]').value,
            captcha: (waghcwb.query('input[name="captcha"]')) ? waghcwb.query('input[name="captcha"]').value : null

        }, function() {
            btn.style.backgroundColor = '#34DB42';
            btn.style.borderColor = '#34DB42';
            btn.setAttribute('class', 'button success');
            btn.innerHTML = '<img src="img/check.svg" alt="Enviado com sucesso" title="Enviado com sucesso">';
            waghcwb.query('input[name="captcha"]').className = '';

            if (waghcwb.query('#captchaImg')) waghcwb.query('#captchaImg').src = '/captcha/captcha.php?' + new Date().getTime();

            waghcwb.query('input[name="name"]').value = '';
            waghcwb.query('input[name="email"]').value = '';
            waghcwb.query('textarea[name="message"]').value = '';
            if (waghcwb.query('input[name="captcha"]')) waghcwb.query('input[name="captcha"]').value = '';

        }, function() {
            btn.style.backgroundColor = '#DB3434';
            btn.style.borderColor = '#DB3434';
            btn.setAttribute('class', 'button error');
            btn.innerHTML = '<img src="img/times.svg" alt="Erro ao enviar os dados" title="Erro ao enviar os dados">';
        },

        function() {
            var input_captcha = waghcwb.query('input[name="captcha"]'),
                captcha = waghcwb.query('#captchaImg');
            input_captcha.placeholder = 'O código de segurança não confere.';
            input_captcha.className = 'error';
            input_captcha.value = '';
            if (captcha) captcha.src = '/captcha/captcha.php?' + new Date().getTime();
        });
};

Answer 1

Place your captcha in a hidden div, and count in the JS the number of submissions via the form ajax. After sending, if the counter reaches 2, show the div with jquery or normal javascript, going from Hide to block mode. Then, when sending the form via js, just check if the counter is above 2 and test the captcha before sending the form.

EDITED: I don’t know if I could make a new answer... but anyway, I’m editing this one:

The way you did, it actually got easier even... because you’re already passing the captcha by the call of ajax..

So, before the

waghcwb.query('#contact-form').onsubmit = function(event) {

you will create a variable for your counter:

var contadorform = 0;

and will add within your shipment:

...
var btn = waghcwb.query('#contact-form button[type="submit"]');
contadorform = contadorform + 1; // ou contadorform ++;
...

and will also pass it as a parameter for your contact.php

...
name: waghcwb.query('input[name="name"]').value,
email: waghcwb.query('input[name="email"]').value,
message: waghcwb.query('textarea[name="message"]').value,
contador: contadorform,
...

And finally, in contact.php, you will test this counter variable:

if ($_POST['contador'] >= 2) {

Everything else will be on top of this variable, both in JS and PHP.

In case you have any questions left, just say that I comment to explain better.