On the page containing reCAPTCHA, some customers have checked "I am not a robot", but the send button is not able to press.
The majority of people are operating without any problems, but about 5% of people complain that they can't press the send button.
Just in case, I asked about your browser, but it didn't work.
IE11 v11.437.17763.0
IE11 v11.0.9600.19356
IE11 v11.0.9600.19301
Chrome v58.0.3029.110
Chrome v75.0.3770.100
Also, I've been asking if JavaScript is enabled in the middle, but both IE and Chrome are enabled.(In the first place, if JavaScript is not enabled, reCAPTCHA will not be displayed and you will not be able to check...)
In either case, there are no error messages.
Do you have any knowledge that this kind of problem occurs in a particular environment?
javascript recaptcha
"If I were myself, I would change the following parts and check the ""What I want to check"" below."
(hereafter, the code block is the source code for the problem page when you see it)
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>
→Official document has async prefer, so try to attach it.The execution of the JS file will be delayed, so it may be resolved if the timing of execution affects it.
<script type="text/javascript">
// <![CDATA[
$(function(){
$("#SenderSection").blur(function(){
error;
if($(this).val()===''){
error = true;
}
if(error){
if(!$(this).next('span.error').length){
$(this).after('<span class="error">Not entered</span>');
}
} else{
$(this).next('span.error').remove();
}
});
$("#SenderName").blur(function(){
error;
if($(this).val()===''){
error = true;
}
if(error){
if(!$(this).next('span.error').length){
$(this).after('<span class="error">Not entered</span>');
}
} else{
$(this).next('span.error').remove();
}
});
$("#SenderEmail").blur(function(){
error;
if($(this).val()===''){
error = true;
}
if(error){
if(!$(this).next('span.error').length){
$(this).after('<span class="error">Not entered</span>');
}
} else{
$(this).next('span.error').remove();
if(!$(this).val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
$(this).after('<span class="error">Please enter a valid email address.</span>');
}
}
});
$("#SenderTel").blur(function(){
error;
if($(this).val()===''){
error = true;
}
if(error){
if(!$(this).next('span.error').length){
$(this).after('<span class="error">Not entered</span>');
}
} else{
$(this).next('span.error').remove();
US>vertel=$(this).val().replace(/[ *.*-.*-.*-.*\–.*-.*\-]/gi, ');
if(!tel.match(/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/)){
$(this).after('<span class="error">Please enter a valid phone number.</span>');
}
}
});
$('#SenderRequestButton').click(function(){
varmsg=';
US>vertel;
error;
if($('#SenderSection') .val()==='){
msg=msg+"The name of the organization/affiliation is required.\n";
error = true;
}
if($('#SenderName') .val()==='){
msg = msg + "Name is required.\n";
error = true;
}
if(!$('#SenderEmail').val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
msg=msg+"Please enter a valid email address.\n";
error = true;
}
tel=$('#SenderTel') .val().replace(/[ ..*-.*-.*-.*\–.*-.*\-]/gi, ');
if(!tel.match(/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/)){
msg = msg + "Please enter a valid phone number.\n";
error = true;
}
if(error){
alert(msg);
return false;
}
else{
msg="Send the following:Would that be all right?\n"
+ "Organization name/affiliation:"+$('#SenderSection').val()+"\n"
+ "Name:" +$('#SenderName') .val() + "\n"
+ "Email address:" +$('#SenderEmail').val() + "\n"
+ "Phone:" +$('#SenderTel').val();
if(confirm(msg)){
$(this).submit();
} else{
return false;
}
}
});
});
function enableButton (code) {
if(code!==""){
$('#SenderRequestButton').removeAttr('disabled');
}
}
//]]>
</script>
→ Initialize (assign) variables before referring to them: varror=false;.I declared var one by one in the function, so it won't affect me, but just in case.
<form action="https://ghg-santeikohyo.env.go.jp/download/request2" class="entryForm" novalidate="novalidate" id="SenderRequestForm" method="post" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST"/><div>;
</div>
→ Delete one extra </div> here.
I can't find anything to fix for the next code block, but it's related, so I can paste it for your convenience:
<div class="request">
<label style="display:block;float:left;width:120px;">group/affiliate</label>
<input name="data[Sender][section]"class="form-control"placeholder="group/affiliate"maxlength="50"type="text"id="SenderSection"/>
</div>
<div class="request">
<label style="display:block;float:left;width:120px;">Name</label>
<input name="data[Sender][name]"class="form-control"placeholder="Name" maxlength="50" type="text" id="SenderName"/>
</div>
<div class="request">
<label style="display:block;float:left;width:120px;">mail address</label>
<input name="data[Sender][email]"class="form-control"placeholder="xxxx @yyyyyyy"maxlength="50" type="text"id="SenderEmail"/>
</div>
<div class="request">
<label style="display:block;float:left;width:120px;">Phone number</label>
<input name="data[Sender][tel]"class="form-control"placeholder="Phone number" maxlength="20" type="text" id="SenderTel"/>
</div>
<div class="g-recaptcha" data-callback="enablebutton" data-sitekey="****"></div>
<button class="btbtNext" id="SenderRequestButton" disabled="disabled" type="submit">send</button>
</form>
If you have an environment to reproduce,
enablebutton running when there is a problemcallWhat are the values of the parameters
© 2024 OneMinuteCode. All rights reserved.