So, I have a website and I've added a recaptcha to the contact form. I've used this code for the recaptcha and the contact form on multiple websites before, and it worked perfectly on those. But, for some reason, on this website, the recaptcha isn't working on the desktop version of the site.
I've tried removing the old recaptcha and creating a new one. That didn't work.
I thought that maybe because I had a different style of formatting for the mobile version and the desktop version on the same page, that it might be causing an error. But, when I deleted one of the recaptchas, I had the same result - mobile was fine and desktop was not.
I tried it in different browsers to see if it was a chrome error, and even updated my chrome - it wasn't that either.
I checked to see if anyone else had a similar issue and they claimed that they were loading the recaptcha twice. But I checked my files and I can't see anywhere it would be loading other than the google api link in the header.
The header:
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
</head>
The recaptcha section of my contact form:
<div class = "row d-none d-sm-none d-md-block">
<div class = "col-md-6">
<div class="g-recaptcha" id = "captcha" name = "captcha" data-sitekey="SITE_KEY_HERE" style = "text-align:left;"></div>
</div>
<div class = "col-md-6">
<div class = "submit" style = "text-align: right;">
<button id = "submitForm" type="submit" name = "submit" class="btn btn-lg">Send Message</button>
</div>
</div>
</div>
<div class = "row d-inline-block d-sm-inline-block d-md-none">
<div class = "col-sm-12 text-center">
<div class="g-recaptcha" id = "captcha" name = "captcha" data-sitekey="SITE_KEY_HERE" style = "text-align:center;"></div>
</div>
</div>
<div class = "row d-block d-sm-block d-md-none">
<div class = "col-sm-12 text-center">
<div class = "submit">
<button id = "submitForm" type="submit" name = "submit" class="btn btn-lg">Send Message</button>
</div>
</div>
</div>
I expected the user to be able to see a normal, recaptcha v2 'I am not a robot' checkbox, but I get:
ERROR for site owner: Invalid domain for site key
on the desktop version. It's working perfectly on the mobile version.
Update: I even tried making unique recaptcha keys for the desktop and mobile version, but that didn't work either.
SOLVED IT!!
I'm so sorry everyone.
Turns out that I had accidentally added two versions of the contact form and I didn't realize it. I wasn't updating the site key of the one visible on the desktop, and continued to edit the one version of the form that I thought I had.. so it kept showing as not valid.
I'm very very sorry everyone. I guess this means that it pays to read your code line by line sometimes..
If it's reloading for desktop twice that means could be issue with below code.
class = "row d-inline-block d-sm-inline-block d-md-none"
can you change class to "visible-xs" and see if it works?
Have you tried the explicit rendering as mentioned here - https://developers.google.com/recaptcha/docs/display#explicit_render
As stated in the link above, change your script tag to
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
Then add a callback function to logically render the widget you want to (based on maybe screen size!) something like this.
<script type="text/javascript">
var onloadCallback = function() {
if (screen.width < 600)
grecaptcha.render('captcha-one', { //id of the first captcha needs to be captcha-one
'sitekey' : 'your_site_key'
});
else
grecaptcha.render('captcha-two', { //id of the second captcha needs to be captcha-two
'sitekey' : 'your_site_key'
});
};
</script>
Or you might actually just render both of them based on the other sample codes there in the mentioned link.
Related
In a sharepoint site I have the following div that I need to call it. Problem is in SP sites the id is dynamic and it is bad idea to use, but I don't know any other way to call the div?
Any suggestion?
<span dir="none">
<div class='ms-rtestate-field ms-rtefield' style=''>
<div id='_ctl00_TextField_inplacerte_label' style='display:none'>Rich text
editor no & (Title)</div>
<div class=' ms-rtestate-write ms-rteflags-0'
id='_ctl00_TextField_inplacerte' style='min-height:42px' aria-
labelledby='_TextField_inplacerte_label' contentEditable='true' >
<div class="ms-rtestate-field"> no & (Title) field value.
</div>
</div>
<div style="clear:both;"></div></div>
<span dir="ltr">
Try with below line.You can get same also from class name
var divId = $('.ms-rtestate-write').attr('id');
console.log(divId);
Now you can do whatever you want with this Id or you can do same manipulation from class also.
let me know if it solve your problem.If you have multiple parrallel div with this div then let me know i will share it.
One way I used long time back -
$(window).load(function(){
var getDivFromitsPositioninLayout = $(".parent-div-class div:(n)th-child")
})
Got hold of the div based on the layout, but not sure if that fits in your criteria.
I am working on a weather page for myself (and maybe others in the future) and having an issue with a button that will show and hide weather alerts. You can view the page to see what I'm trying to do. (Sorry, I'm picking on FL, but they have a lot of alerts right now).
Page Source
JS Source
I have my alerts coming into an array and for each item, I need a button that will show and hide the alerts. My page source contains:
<div data-bind="foreach: alertsViewModel.features">
<div class="col-12">
<div class="alert alert-danger" role="alert">
<p>
<strong data-bind="text: properties.headline"></strong>
<button type="button" class="btn btn-link" data-bind="click: $root.showHideAlert">Show</button>
</p>
<div data-bind="attr: {id: properties.id}" style="display: none;">
<p data-bind="lineBreaks: properties.description"></p>
<p><strong>Instructions</strong></p>
<p data-bind="lineBreaks: properties.instruction"></p>
</div>
</div>
</div>
</div>
And my ViewModel looks like:
// ==================
// Alerts View Model
// ==================
var alertsViewModel = {
features: ko.observableArray([]),
hwoUrl: ko.observable(""),
hwoText: ko.observable(""),
showHideAlert: function(data, event){
alert('you clicked');
/*$('#hwo').toggle('slow',function(){
if ($('#showHwo').text() == "Show")
{
$('#showHwo').text("Hide");
}
else
{
$('#showHwo').text("Show");
}
});*/
}
};
ko.applyBindings(weatherViewModel, document.getElementById('weather-alerts'));
I have tried a few different methods and I can't get anything to work. (Thus the commented code and the alert). Which is strange, since I have done this a few times in the past with no issues. I'm sure it's something simple I missed. Any help would be appreciated.
Could it perhaps be because you used the weatherViewModel in your call to ko.applyBindings instead of alertsViewModel?
I think the $root in the button's bindings refers to weatherViewModel since that's the VM applied by ko.
Perhaps try changing the location of the function or simply use alertViewModel instead.
I have two sets of data: "heat" and "cold", which are retrieved from another provider. This data is quite unorganized and I have removed lots of stuff in the code just to show the essential part of my problem. "Heat" and "cold" both contain properties that the user has to fill in. This property however is dynamic and the amount of properties is not fixed (hence it is in a loop as shown in the code).
My goal is to hide/disable the submit button, which is located all the way down, whenever one single input field in the list in either sets of data is empty. This should also preferably work on Internet Explorer 9, where the 'required' tag is not supported.
I have tried:
Adding the required tag. This unfortunately does not work in IE9 and I have some issues even in Google Chrome because it is still submitting my form. (I added the form tags too)
Adding Ng-show on the submit form. I checked whether the userInput is empty, but this still does not work.
Now you may ask, why wouldn't I just check in my controller whether these properties are empty in my submit method? While it is a good point, I can not access this dynamic data very easily in my controller. Hence, I need a solution that will hopefully fix this problem with no/mimimal effort in the controller.
Code:
<!--Start wrapper!-->
<div class="wrapper">
<div ng-repeat="(code, program) in data.old.heat">
<div class="row" ng-repeat="(componentId, component) in program">
<div class="inputForm">
<!--This field may not be left empty!-->
<input type="text" class="form" ng-model="component.userInput">
</div>
</div>
</div>
<div ng-repeat="(code, program) in data.old.cold">
<div class="row" ng-repeat="(componentId, component) in program">
<div class="inputForm">
<!--This field may not be left empty!-->
<input type="text" class="form" ng-model="component.userInput">
</div>
</div>
</div>
</div>
<!--End of wrapper !-->
<div class="submitPanel">
<button ng-click="submit()">Submit</button>
</div>
Here ya go : https://jsfiddle.net/DIRTY_SMITH/zxbe5rt0/
function validate(){
var text1 = document.getElementById('text').value;
if (text1.length > 0){
alert("went through");
return true;
}
alert("did not go through");
return false;
}
Not specific to angular, but you could check if it has characters via jQuery.
Html
<div class="submitPanel">
<button class="submit-btn" ng-click="submit()">Submit</button>
</div>
jQuery
$('#form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('.submit-btn').addClass('hide');
}
});
CSS
.hide{
display:none;
}
I have two options for you, but they both include ng-disabled (https://docs.angularjs.org/api/ng/directive/ngDisabled).
You can put this attribute on the button and you can either call a function on the scope in that attribute and check if all values are given.
So like: ng-disabled="checkInputs()".
Or
You wrap a form around all your inputs, give the form a name like name=form and set the required attribute on all inputs. (EDIT: you could use ng-required="true" for IE9.)
Then you could say ng-disabled="!form.$valid".
I am trying to print a page with window.print but it ain't working in all the browsers.
This is the code that i am using:
<div class="user_buttons">
<!--Test 1-->
<IMG SRC="images/print.png" BORDER="0"
<!--Test 2-->
<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>
<!--Test 3-->
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form><input type=button name=print value="Print" onClick="window.print()"></form>');
}
</script>
<!--Test 4-->
<img src="images/print.png" onclick="window.print()">
<div><img src="images/overzicht.png" title="Terug naar overzicht"></div>
</div>
As you can see i am trying multiple solutions given by the internet. What is frustrating is that those codes are working on the demo sites but they aren't on my page. I post my code in JSF. The JSF example will not be a working example but it will have the entire code in the javascript area. The link for the entire code is here: http://jsfiddle.net/7bRNu/
I finally got it. It was a very painfull process of searching errors in a huge mess of code. The next time you ask a question on stackoverflow, please make sure that you broke the problem down into smaller pieces and post only the code that you think is probably the cause of your problem.
In the very bottom of your entire code, there is a little script-section in which it says:
var print = document.getElementById("print").value;
You are in the global scope, meaning that every variable you declare will be a property of window. Therefore, by writing print = you actually redefine window.print. Change the name of this variable and you should be good. The following line is only an example. You can choose whatever variable name you like. Just don't use print.
var printValue = document.getElementById("print").value;
Here is one method isolated:
http://jsfiddle.net/5PumN/
<IMG SRC="images/print.png" BORDER="0"
It works just fine here.
This is more like a auto-click link problem. But my problem is this link is generate by google's script.
http://translate.google.com/translate_tools
If you choose "translate a section" , there will be a link generate inside the goog-trans-control class
Original script:
<div class="goog-trans-section">
<div class="goog-trans-control">
</div>
Original Text here.
</div>
Script code after execute (Check Component):
<div class="goog-trans-section">
<div class="goog-trans-control">
<div class="skiptranslate goog-te-sectional-gadget-link" style="">
<div id=":1.gadgetLink">
<a class="goog-te-gadget-link" href="javascript:void(0)">
<span class="goog-te-sectional-gadget-link-text">Translate</span>
</a>
</div>
</div>
</div>
Original Text here.
</div>
How would I auto-click (or execute) the Translate link after this page is totally loaded?
For some reason, jsfiddle is not working with my script, though I still post this for your convenience.
http://jsfiddle.net/Wb7tE/
Really appreciate for your time and help.
Edited:
I tried Google translate API, but there is a limitation of 5000 words at a time.
My translations include whole html with tables and scripts, so it reach the limit with no exception.
I have a similar problem, and I solved it temporally like this
google_initialized = false;
function google_auto_translate()
{
if(google_initialized)
{
$('a.goog-te-gadget-link')[0].click();
}
else if(google.translate)
{
google_initialized = true;
setTimeout(google_auto_translate, 500);
}
else
setTimeout(google_auto_translate, 100);
}
window.onload = google_auto_translate;
but on slower connection, in 50 % of time google doesn't load on time, and script already clicks before loading is done. So if anyone know any other way to do this, via some events or something similar please add it here...
P.S. Don't use Google Translation API it's Deprecated and will be removed till the end of this year.