CODEWITHSUNDEEP
javascriptjqueryhtmlrecaptcha
Edward Severinsen
Edward Severinsen

Reputation: 703

Recaptcha that only shows when submit pressed BUT is triggered in JavaScript/jQuery?

I have a Recaptcha for a clients form and they only want the Recaptcha to show when the submit button is clicked.

But the submit button is only clickable when all the input fields are filled and they want a tooltip to appear when the fields are empty and the button is clicked.

As you can imagine that means I can't disable the button when there are empty fields because I need a .click() event. However, I can't bind the recaptcha to the button because it will fire automatically so I had to do an invisible recaptcha where a div has the data-sitekey attribute and the g-recaptcha class.

So I need to know how to fire the recaptcha event through JavaScript and make it have the same results as if it were bound to the button.

If more info is needed please let me know.

EDIT:

var fieldsFilled = false;

    if(screen.width <= 767) {
        $('#fbForm2').find('input, textarea').each(function () {
            $(this).keyup(function () {
                fieldsFilled = checkFormFieldsEmpty('#fbForm2') && $('#terms').is(":checked");

                if(fieldsFilled) {
                    $("#btnSubmit").css("pointer-events","auto");
                } else {
                    $("#btnSubmit").css("pointer-events","none");
                }
            });
        });

        $('#terms').change(function () {
            fieldsFilled = checkFormFieldsEmpty('#fbForm2') && $('#terms').is(":checked");

            if(fieldsFilled) {
                $("#btnSubmit").css("pointer-events","auto");
            } else {
                $("#btnSubmit").css("pointer-events","none"); 
            }
        });
    } else {
        $('#fbForm').find('input, textarea').each(function () {
            $(this).keyup(function () {
                fieldsFilled = checkFormFieldsEmpty('#fbForm') && $('#terms').is(":checked");

                if(fieldsFilled) {
                    $("#btnSubmit").css("pointer-events","auto");
                } else {
                    $("#btnSubmit").css("pointer-events","none");
                }
            });
        });

        $('#terms').change(function () {
            fieldsFilled = checkFormFieldsEmpty('#fbForm') && $('#terms').is(":checked");

            if(fieldsFilled) {
                $("#btnSubmit").css("pointer-events","auto");
            } else {
                $("#btnSubmit").css("pointer-events","none"); 
            }
        });
    }

    //Checks if the form id has blank text fields
    function checkFormFieldsEmpty(id) {
        $(id).find('input, textarea').each(function () {
            //Check whether the input/textarea is blank
            if(!$(this).val()) {
                //If the input/textarea is empty return false
                return false;
            }
        });

        return true;
    }

    $('#btnSubmit').tooltip();

    $(document).on('click', '#btnSubmit', function (event) {
        if($('#btnSubmit').hasClass('disabled')) {
            $('#btnSubmit').tooltip({
                animation: false,
                delay: {show: 500, hide: 100},
                placement: 'right',
                text: 'Invalid input fields',
            });
        } else {
            grecaptcha.render('recaptchaField', {
                'sitekey' : '6LfDBGcUAAAAABnYRk1ZQkapzCs8c1Rr2ZARMchF',
                'callback' : onSubmit, 
            });
            grecaptcha.execute(widgetId);
        }
    });
    //-----------------------------------------------------------------------------------------

//recaptcha
var onSubmit = function (token) {
    if (screen.width >= 768) {
         document.getElementById("fbForm").submit();
    }else if (screen.width <= 767){
         document.getElementById("fbForm2").submit();
    }
};

</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

...

<div class="form-group">
      <label class="col-md-4 control-label"></label>
      <div class="col-md-4"><br>
       <!-- NOTE: Made some changes for click events as advised here: https://developers.google.com/recaptcha/docs/invisible#programmatic_execute -->
        <button id="btnSubmit" type="submit" value="" class="btn btn-success">SUBMIT <span class="glyphicon glyphicon-send"></span></button>
        <div class="g-recaptcha" data-sitekey="6LfDBGcUAAAAABnYRk1ZQkapzCs8c1Rr2ZARMchF" data-callback="onSubmit" data-size="invisible"></div>
        <!-- Test: 6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN -->
        <!-- Live: 6LfDBGcUAAAAABnYRk1ZQkapzCs8c1Rr2ZARMchF -->
      </div>
    </div>

Upvotes: 0

Views: 987

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

«However, I can't bind the recaptcha to the button because it will fire automatically...»
That is an assumption that may be false.

You can prevent the default submit behavior using .preventDefault(). So you can check that your inputs are ok... If so, proceed normally.

That is:

$('#btnSubmit').on("click",function(e){
  e.preventDefault();

  // Check all you input are filled
  // If yes, then submit for real:
  $(this).closest("form").submit();
});

I suppose there is no problem triggering the recaptcha on submit...

Upvotes: 1

Related Questions