I have the following in a page:
<div id="js-recaptcha">
<div class="g-recaptcha" style="display: inline-block;" data-sitekey="#SiteConfig.RecaptchaV2Key"></div>
</div>
then in script I have:
<script src="https://www.google.com/recaptcha/api.js"></script>
Now on load via jquery, I add the disabled property to the #js-recaptcha div. I can see that this has been applied. However, if I click on the form below the captcha box, it will either still tick the captcha or display a set of images. So my first question is how do I truly disable captcha?.
The second issue I have with captcha is that when the set of images are shown, when you select an image it selects the image up 1 and to the left 1 of the image selected, and this also continues when you try to press the 'verify' button, it selects a bottom image.
Related
I'm having a problem in a checkout page of my website (wordpress based).
I have two kind of products and for each one, during checkout, I created custom fields to collect specific informations. With conditional rules (by plugin) some fields show up only if a list of specific option is checked.
When they are hidden, analysing the code, I've this situation:
<div class="form-row form-row-wide thwcfe-html-field-wrapper thwcfe-conditional-field" id="stud_no_req_field" data-name="stud_no_req" data-rules="[[[[{"operand_type":"field","value":"2","operator":"value_eq","operand":["student"]}]]]]" data-rules-action="show" style="display: none;">...</div>
When they are showing up, style attribute change in "block".
At the end of the page, I also have a button to submit the order.
<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Associati" data-value="Associati">Associati</button>
I'm looking for a script that hides this button if custom file above has "display:block" and viceversa (show button if div has "display:none").
I've tried with this script (in checkout page), but nothing happens:
<script>
$(document).ready(function() {
if ($("#stud_no_req_field").style.display == "block")
{
$("#place_order").style.display = "none";
}
else
{
$("#place_order").style.display = "block";
}
});
</script>
I also need that this script is automatic (no click needed) and listens to any automatic change of div style (inside html tag).
Thank you very much!!! You are my angels!
You're using the wrong code. You should do
$("#place_order")[0].style.display = 'none'; // I added [0]
Or use jQuery API (https://api.jquery.com/css/)
$("#place_order").css('display', 'none');
I'm working with Semantic-UI and have a popup with an input field in it (search field). The popup is initialized/opened "on: 'click'", but I would like to set a value to the input field with javascript before the user opens the popup.
Trying to do so with
document.getElementById("sok_tekst").value = input;
only leads to
Uncaught TypeError: Cannot set property 'value' of null
When I look in the console, I see that the HTML-code contains the popup with the input field (id="sok_tekst"), but it looks like I "can't reach it" with javascript before it's initialized.
I feel I have tried everything, and it looks like I need to open the popup before adding a value to the input field.
Here is a DEMO
Do anyone have a trick up their sleeve for this??
Thanks!
For the curious: I am using the input field as a search field in a table/work plan. When the table is redrawn, by the user changing week number, the popup are redrawn as well. I'm trying to keep the search value, and put it back in the input field, in the new popup, in the new table.
In order to initialize input value you shouldn't specify popup content with data-html="..." , this won't let change the value cause the input is not yet created (this is why you're getting Cannot set property 'value' of null) , so should change it from a pre-existing HTML content , so use instead popup: $('#YourContentSelector'), in popup setting to set the content ,then and you'll be able to change input value using :$('#input_test').val('test'); like the following :
HTML:
<!-- Popup Button -->
<i class="search link icon sok"></i>
<!-- Popup Button -->
<!-- Popup Content -->
<div class='ui form popup hidden' id="content"><!-- hidden class added so it won't be shown when it's loaded -->
<div class='field'>
<div class='ui icon input'>
<input type='text' placeholder='Input' id='input_test'>
<i class='search icon'></i>
</div>
</div>
</div>
<!-- Popup Content -->
JS(jQuery)
$(document).on('click', '.search.sok', function() {
$('#input_test').val('test');
$(this)
.popup({
popup: $('#content'),
on:'click'
})
.popup('show');
});
Here is a working Demo
Docs
I've made a web application That starts from a specific amount and every time a donation is made it counts down and shows how much is needed. And at one time I might have about 10-20 of these counting down and I am always creating new ones. Now when I am doing that it would be nice that when I click the button it automatically focuses on the text field for ease of use. however I can't quite get that to work.
The window to set the countdown is shown using angularjs dialogs/modals. This means that when I click the a button it writes code onto the page that shows the dialog/modal and when I submit it it is removed from the page completely.
The first time around when I click the button it focuses on the text box and I can type the number and press enter and it's submitted, now I want to create a new one. I click the button, up comes the modal but now I have to grab the mouse, move it to the input and click it. Waste of time and not user friendly.
What I'm asking is for a way to have it focus on the text field when using modals every time I click the button.
here's the window:
<form name="formCountdown" novalidate class="css-form">
<div modal="showCountdownModal" close="showCountdownModal = false" options="opts" ng-cloak>
<div class="modal-header">
<h4>Enter Countdown Amount</h4>
</div>
<div class="modal-body">
<input id="focusbox" type="number" min="1" autofocus required ng-model="countDownAmount" name="countDownAmount" ui-keypress="{13:'setCountdown()'}" select-on-focus />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary cancel" ng-disabled="formCountdown.$invalid" ng-click="setCountdown()">Set</button>
</div>
</div>
</form>
I've tried using autofocus, and that works fine the first time you press the button after loading the page. but the second and up it does not.
I've also tried using this jquery code with no luck:
<script>
$("#focusbtn").click(function() {
$("#focusbox").focus();
});
</script>
And now I am completely lost and would really love it if someone could help me out here.
Edit: forgot to put in the timeout, to make sure the browser is ready!
add the following line to your setCountDown() function:
$timeout(function (){
document.querySelector('#focusbox').focus();
},0)
You need to inject the $timeout in your controller
That will probably do the trick!
However, this will work, but dom manipulation should be done in a directive!
I copied your posted code together with the script and it works just fine. I'm not sure if I understood the problem but the autofocus works well in my end. Autofocus is present after the page has loaded or refreshed and even after the button has been clicked. Of course the autofocus will be removed if a click outside the input text has been triggered.
Morever, I think Autofocus is an attribute by HTML5. You might want to include in your HTML or maybe it is just a browser compatibility issue.
You can test or check if autofocus is supported by your browser at http://html5test.com/.
Hope this help somehow.
EDIT:
Try this on your script.
$(document).ready(function() {
$(".modalName").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
});
This question already has answers here:
jQuery trigger file input
(21 answers)
Closed 8 years ago.
I have a HTML form like this one:
<style>.hidden { display: none; }</style>
<form method="post" action="upload">
<div id="dropzone" class="pre-upload">
<div class="comp">
<h1>Drop your images here</h1>
<p>or simply click to select them.</p>
<input type="file" name="images" id="upload_button" class="hidden" />
</div>
<div class="fing">
<p>Tap to select your images</p>
</div>
</div><!-- Pre upload div -->
</form>
I want to make #dropzone open up the standard file selecting window if it's clicked. It should open up #upload_button's file selector specifically.
I've tried the following, but it didn't work:
$('#dropzone').click(function(){
$('#upload_button').click();
});
As you see, I'm trying to achieve this result via jQuery.
I thought this would trigger the window, but it's simply doing nothing.
# The ones who are voting to close this down:
As you see, my issue was totally not answered in the other question you are linking to. This was a different issue with nesting my input wrongly. So, before going and blindly voting for a close, better check the provided code and try to see if the issue is somewhat different from the common. This is a site for help after all.
It looks like a circular reference problem. Your file upload button is inside the div you want to click to trigger the button. Triggering the click on the button from the div, also triggers the click on the div, so it infinitely recurses.
If you watch the console, you'll see you get a "Maximum call stack size exceeded" error.
Moving the button outside of the div you want to click causes it to function as intended.
Here's a jsfiddle to demonstrate the problem.
i have small-image class when i click on it megnefic popup open. in my megnific popup there is big image of clicked image and one button with other-form-opener class when i click on button other-form-div class with form comes up with my custom popup in this part when i click on form element they dont work as default.
<div class="megnific_opener"><img class="small-image" ></div>
<div class="megnific_popup_div">
<img class="big-image">
more-info
</div>
<div class="other-form-div">
<form>
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
i give stucture of my html and i already cheked that there is not a z-index problem.
so please help me thank you.
here is my demo in jsfiddle : http://jsfiddle.net/QHh7W/
Please use Magnific popup callbacks and move your custom html inside Magnific popup when opened and move it inside body when closed. You can check below working demo.
jsFiddle demo
Although i cannot get this working as per your that is opening both popups one above another in same window.
but in case you need it like this : open second after clicking from one.
http://jsfiddle.net/yDvvQ/5/
I have added different instance of megnific for both divs.
It is working for both popups, content and form both.
You can later amend it to add more popups or return to first from second.
Please review once and comment.
Regards