The form in question is a simple form with reCaptcha v2 on it. Upon clicking the submit button Google challenges the user (me) with the reCaptcha. Every time Google is validating I am a human, the onSubmit is called, the form is serialized correctly, but the form.submit() does not invoke the ASP.Net MVC controller on the server. When Google reCaptcha is removed, the controller is called just fine so I don't think it is anything to do with the ASP.Net code.
JavaScript is not my strong point, so I am assuming a dumb mistake in trying to call the submit. What do I have wrong here?
<script>
var onSubmit = function (token) {
var form = $("form"); // $("#feedbackForm");
console.log(form.serialize());
form.submit();
}
var onGrecaptchaError = function (token) {
grecaptcha.reset();
}
var onloadCallback = function() {
grecaptcha.render('submit', {
'sitekey' : '@reCaptchaPublic',
'callback': onSubmit,
'error-callback': onGrecaptchaError,
'size': 'invisible'
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
and the razor form code:
@using (Html.BeginForm("Email", "Home", FormMethod.Post, new { id = "feedbackForm" }))
{
@* [SNIP] *@
<div class="formfield clear">
<button id="submit" class="btnSubmit">Send To Leadership</button>
</div>
}
After much searching I finally discovered that you cannot give the submit button an id of submit, that was the problem!