Question

Trying to serialize a form with recaptcha in the form.

Here is how I serialize my form:

var serializedform = $('form.af').serialize();

Here is my form example:

<form class = 'af'>
    <input name='name' id = 'name'>
    <input name='lastname' id = 'lastname'>
        <div id = 'recaptchadiv'>
            <input name='recaptcha_response_field' id = 'recaptcha_response_field'>
            <input name='recaptcha_challenge_field' id = 'recaptcha_challenge_field'>
            <noscript>
                <input name='recaptcha_response_field' id = 'recaptcha_response_field'>
                <input name='recaptcha_challenge_field' id = 'recaptcha_challenge_field'>
            </noscript>
        </div>
    <button name = 'submit'>
</form>

problem comes from recaptcha noscript block injected by recaptcha automatically.
That block contains a copy of recaptcha_response_field and recaptcha_challenge_field.

So – when I serialize this form – values from noscript block inputs overwrite real recaptcha_response_field and recaptcha_challenge_field values.

Is there a way to serialize a form using jquery while skipping noscript block?

Thanks:)

Answer 1

You could use jQuery to remove the <noscript> tags before the form is serialized – clearly, they aren’t necessary by that point. Something like this:

var $form = $('form.af');
$form.find('noscript').remove();
var serializedform = $form.serialize();