Update headers with AJAX

Question

Update headers with AJAX

Navigation

#1 by (1 votes)

0

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

I saved these attempts in $_SESSION with PHP, however as the form is sent via AJAX the captcha will only appear when the user refreshes the page even though he has submitted the form more than 2 times.

This happens because I'm not updating the headers I believe. How would I do this with AJAX? When sending form is this data updated?

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

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();
        });
};

php javascript ajax

asked by anonymous 30.08.2014 / 04:02

1 answer

How to get the URL or anchor on a One-page JQuery mask when typing text

score 1 · Accepted Answer

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

EDITED: I do not know if I could make a new answer ... but anyway, I'm editing this one:

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

So before

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

You will create a variable for your counter:

var counterform = 0;

and will add up to your submission:

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

and will also pass it as parameter to 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.

If you have any questions, just let me know what you think.