Develop Reference

Why does two recaptcha appear at one moment in time?

I have two forms in modal windows on one page (authorization and registration). For both forms, I connect an invisible recaptcha (v2). Here is code of recaptcha init:
var idCaptcha1, idCaptcha2;
var onloadReCaptchaInvisible = function () {
//login
idCaptcha1 = grecaptcha.render('recaptcha1', {
"sitekey": "6LfpltgUAAAAAMW3PstNGrEk3pMos0TzN9jyL7mT",
"callback": "onSubmitReCaptcha1",
"size": "invisible"
});
//reg
idCaptcha2 = grecaptcha.render('recaptcha2', {
"sitekey": "6LfpltgUAAAAAMW3PstNGrEk3pMos0TzN9jyL7mT",
"callback": "onSubmitReCaptcha2",
"size": "invisible"
});
};
function onSubmitReCaptcha1(token) {
alert('test');
sendForm('signin', idCaptcha1);
}
function onSubmitReCaptcha2(token) {
sendForm('signup', idCaptcha2);
}
When user submit any form, I try to find out whats form exctly, and execute captcha I need:
$('form').submit(function(event) {
// отменим отправку форму на сервер
event.preventDefault();
switch($(this).closest('.modal').attr('id')){
case 'signin':
grecaptcha.execute(idCaptcha1);
case 'signup':
grecaptcha.execute(idCaptcha2);
}
});
Finally, this is the code of sending form function:
function sendForm(id,captcha){
alert(id);
let form = $('#'+id).find('form'),
url = form.attr('action'),
formData = new FormData(form);
formData.append('g-recaptcha-response', grecaptcha.getResponse(captcha));
console.log(url);
console.log(formData);
}
So, captchas work fine, besides fact both of them appear at once. What I did wrong?
I suspect problem in $('form').submit() but I cant find out reason.

You forgot the break statement at the end of each case. If you match the first case and don't have break, it falls through and executes the next case, so both recaptchas are shown.
$('form').submit(function(event) {
// отменим отправку форму на сервер
event.preventDefault();
switch($(this).closest('.modal').attr('id')){
case 'signin':
grecaptcha.execute(idCaptcha1);
break;
case 'signup':
grecaptcha.execute(idCaptcha2);
break;
}
});

Return true/false on submit button click, based on ajax response

Based on some JSON I recieve from an ajax request, I wish to either allow or deny a submit button press (return true/false).
I've attempted to implement a promise, however, I can still see 'product unavailable' is called before I recieve my ajax response.
Is the issue down to it being a form/submit button? Or is this still possible?
var oAH = {
ValidateSubmit : function(self){
// send request to handler
$.ajax({
type: "POST",
url: "",
data: aData,
cache: false})
.done(function(data) {
var oJSON = JSON.parse(data);
if(oJSON.Status === 1){
// return true to allow form to submit
return true;
}else{
console.log('product unavailable (error message)');
return false;
}
})
}
}
// click handler
$('#submitButton').on('click', function(){
return oAH.ValidateSubmit(this);
}

You have number of issues. The most obvious one is that you can't just return from asynchronous code (promise) to use its return value (it's undefined!).
What you need to do is
prevent form submission by default for all cases.
treat promise properly and check returned flag. If it's true, submit form manually using DOM API (form submit method).
make sure you use onsubmit event instead of button onclick.
All together it would look something like this:
var oAH = {
ValidateSubmit: function(self) {
// send request to handler
return $.ajax({
type: "POST",
url: "",
data: aData,
cache: false
})
.then(function(data) { // <----- make sure you use .then
return data.Status === 1;
});
}
}
// form onsubmit handler, form has id form for example, etc.
$('#form').on('submit', function(e) {
var form = this;
e.preventDefault()
return oAH.ValidateSubmit(this)
.then(function(canSubmit) {
if (canSubmit) {
form.submit();
}
});
});

I think what you try to do is not possible. The UI event must be processed at the moment and the ajax request is async.
You could prevent form submiting when clicked, disable button and wait for ajax to return a value and then submit form or not in a callback, something like this:
var oAH = {
ValidateSubmit : function(self){
// send request to handler
$.ajax({
type: "POST",
url: "",
data: aData,
cache: false})
.done(function(data) {
var oJSON = JSON.parse(data);
if(oJSON.Status === 1){
// return true to allow form to submit
submitForm();
}else{
console.log('product unavailable (error message)');
}
})
}
}
function submitForm() {
$('#myForm').submit();
$('#submitButton').removeAttr('disabled');
}
// click handler
$('#submitButton').on('click', function(e){
//prevent submitting
e.preventDefault();
// Disable, you could show a loading animation/gif
$(this).attr('disabled','disabled');
// call ajax
oAH.ValidateSubmit(this);
}

How to respect client side validation when making an ajax call

I wanted to make an ajax call, and then wait for the response from ajax call (Stop form submission till then) and then post the form based on the ajax response that I get. This question is based on Make ajax call and then submit form. So, after putting below script, everything works fine, but I lose the client side validation. Can I make an ajax call and still respect the Client Side validation?
#section scripts {
<script>
var canSubmit = false;
$('form').submit(function (e) {
if (!canSubmit) {
e.preventDefault();
var data = $('form').serialize();
var url = $(this).data('url');
$.ajax({
url: url,
type: 'POST',
data: data,
success: function (response) {
if (response.hasPreviousRequest) {
if (confirm("You've already applied for this job. Apply again?")) {
canSubmit = true;
$('form').submit();
}
}
else {
canSubmit = true;
$('form').submit();
}
},
error: function () {
alert("error");
}
});
}
});
</script>
}
P.S: Kindly note that as soon I as remove the ajax call Client side validation starts working fine. Can some one please explain me this behaviour?

You need to call the .valid() method on the form element (and if not, then cancel the ajax call)
$('form').submit(function (e) {
if (!$(this).valid()) {
return // exit
}
if (!canSubmit) {
....

Use JavaScript to submit Ajax.BeginForm()

I'm typing this question away from my computer so I don't have the exact code, but the question might be straightforward enough without it.
When I have a submit button directly within an Ajax form and I click the button directly to submit, everything works fine, and as expected. The Ajax.Form POSTs back to the controller which returns a partial view that is rendered inside the current View that I have.
But what I need is for a button to be clicked in the Ajax.Form, and for a JavaScript function to run. The JavaScript function will do some vaildation which decides whether to submit the Ajax.Form or not.
I have tried putting 2 buttons in the Ajax.Form, a hidden submit button and a regular button. I used the onclick event of the regular button to call my JavaScript function which then called the click method of the hidden submit button. (I have also tried just submitting the Ajax.Form directly with document.forms[formname].submit() )
This sort of works.. But not correctly for some reason. The Ajax.Form POSTs back to the controller but when a partial view is returned from the controller, the partial view is the only thing rendered, and it is rendered as basic html with no css/bootstrap.
What is the difference between actually clicking the submit button and doing so programmatically?
How can Achieve what I am trying to do?
Edit
#using (Ajax.BeginForm("GetInstructorInfo", "Incident", FormMethod.Post, new AjaxOptions { OnBegin = "lookupInstructor();", UpdateTargetId = "InstructorInfo" }, new { #class = "form-inline", role = "form", #id = "instructorInfoForm", #name = "instructorInfoForm" }))
{
//code in here
}
Edit 2 / 3:
<script>
function lookupInstructor()
{
if ($('input[name="Instructors['+userInputInstructor+'].Username'+'"]').length > 0) //Don't allow user to enter multiple instances of the same Instructor
{
document.getElementById("InstructorUsername").value = ''; //clear textbox value
return false;
}
var userInputInstructor = document.getElementById("InstructorUsername").value;
$.ajax({
url: '#Url.Content("~/Incident/LookUpUsername")',
data: { userInput: userInputInstructor },
success: function (result) {
if (result.indexOf("not found") != -1){ //if not found
$("#InstructorNotFoundDisplay").show();
document.getElementById("InstructorUsername").value = ''; //clear textbox value
$('#InstructorInfo').empty();
return false;
}
else {
$("#InstructorNotFoundDisplay").hide();
return true;
}
}
});
}
</script>

You can use the OnBegin() ajax option to call a function that runs before the form is submitted (and return false if you want to cancel the submit). For example
function Validate() {
var isValid = // some logic
if (isValid) {
return true;
} else {
return false;
}
}
and then in the Ajax.BeginForm() options
OnBegin = "return Validate();"
Edit
Based on the edits to the question and the comments, you wanting to call an ajax function in the OnBegin() option which wont work because ajax is asynchronous. Instead, use jQuery.ajax() to submit you form rather than the Ajax.BeginForm() method (and save yourself the extra overhead of including jquery.unobtrusive-ajax.js).
Change Ajax.BeginForm() to Html.BeginForm() and inside the form tags replace the submit button with <button type="button" id="save">Save</button>and handle its .click() event
var form = $('#instructorInfoForm');
var url = '#Url.Action("GetInstructorInfo", "Incident")';
var target = $('#InstructorInfo');
$('#save').click(function() {
if ($('input[name="Instructors['+userInputInstructor+'].Username'+'"]').length > 0) {
....
return; // exit the function
}
$.ajax({
....
success: function (result) {
if (result.indexOf("not found") != -1) {
....
}
else {
$("#InstructorNotFoundDisplay").hide();
// submit the form and update the DOM
$.post(url, form.serialize(), function(data) {
target.html(data);
});
}
}
});
});

Delayed submit results in multiple continuous submits

I have the following jQuery code, the point of this code is to create a short time delay, so the AJAX request gets time to execute properly:
$('#form_id').submit(function(e) {
e.preventDefault();
$submit_url = $(this).data('submitUrl');
$submit_url = $submit_url.replace('http://','').replace(window.location.host,'');
if ($(this).data('toBeAjaxSubmitted') == true) {
$.ajax($submit_url, {
type : $(this).attr('method'),
data : $(this).serialize(),
complete : function(data) {
$(this).data('toBeAjaxSubmitted', false);
$('#form_id').submit();
}
});
}
});
What happens is, the form starts off with a submit url that I need to submit to in order for the component to save an entry to the database. But I also need user input to submit directly to a payment gateway URL where the user then makes a payment.
The code above creates the AJAX request, but does not return to normal postback behaviour (via $('#form_id').submit()).
It keeps submitting the form over and over, but never posts to the gateway URL or redirects out.
What am I doing wrong?

The following worked for me after some more debugging:
$('#chronoform_Online_Submission_Step8_Payment').submit(function(e) {
var form = this;
e.preventDefault();
$submit_url = $(this).data('submitUrl');
$submit_url = $submit_url.replace('http://','').replace(window.location.host,'');
if ($(this).data('toBeAjaxSubmitted') == true) {
$.ajax($submit_url, {
type : $(this).attr('method'),
data : $(this).serialize(),
complete : function(data, status) {
}
}).done(function() {
form.submit();
});
}
});
What really put me on the wrong path was that in Chrome's Developer Tools I had the following option enabled 'Disable cache (while DevTools is open)' and this was causing some headaches with inconsistent behaviour between Safari, Firefox (which worked) and Chrome which did not.

What about some fiddling with this approach?
$('#form_id').submit(function(e) {
// closures
var $form = $(this);
var fAjaxComplete = function(data) {
// don't send the ajax again
$form.data('toBeAjaxSubmitted', 'false');
// maybe do some form manipulation with data...
// re-trigger submit
$form.trigger('submit');
};
var oAjaxObject = {
type : $form.attr('method'),
data : $form.serialize(),
complete : fAjaxComplete
};
var sSubmitUrl = $form.data('submitUrl');
// scrub url
sSubmitUrl = sSubmitUrl.replace('http://','').replace(window.location.host,'');
// if ajax needed
if ($form.data('toBeAjaxSubmitted') != 'false') {
// go get ajax
$.ajax(sSubmitUrl, oAjaxObject);
// don't submit, prevent native submit behavior, we are using ajax first!
e.preventDefault();
return false;
}
// if you got here, go ahead and submit
return true;
});