I have the following HTML Code. Clicking on the Buy now for 200 will show the below pop up with Buy now, ok and close
<button class="btn-standard buyButton currency-coins">Buy Now for 200</button>
<div class="dialog-body">
<button class>
span class="btn-text">Ok</span>
<span class="btn-subtext"></span>
</button>
<button class>
<span class="btn-text">Ok</span>
<span class="btn-subtext"></span>
</button>
</div>
I want to automatize the process, and I did something like this in javascript but it didn't work for the last step, click on OK.
So below is my code.
$("button:contains('Buy Now')").on('click', function(){
$("span:contains('Ok')").click();}); //alert("hello") is working, but click on OK button didn't
----------------------------
$("button:contains('Buy Now')").click(); // is doing nothing for Ok button click.
You want to trigger the click event of the span on the click of the 'Buy Now' button, if I understood correctly.
The code you have should work. All you need to do is create a function to do something about the click event of the span.
$("button:contains('Buy Now')").on('click', function() {
$("span:contains('Ok')").trigger('click');
return false;
});
$("span:contains('Ok')").on('click', function() {
//do something here
alert("This works");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class>
Buy Now
</button>
<div class="dialog-body">
<button class>
<span class="btn-text">Ok</span>
<span class="btn-subtext"></span>
</button>
<button class>
<span class="btn-text">Cancel</span>
<span class="btn-subtext"></span>
</button>
</div>
Related
I'm doing automate in applescript but use Javascript in which I want to click the exact button class ("boost-button") inside a bigger class ("product-item") that contains a string I want. I want to click about 5 of them, each in every ("product-item").
It's like: Do javascript "If getElementByClassName('product-item')[0].innerHTML contains 'The String I Need to Find' then click button class 'boost-button' inside that class"
Because the element number in getElementByClassName('product-item')[0].innerHTML and the getElementByClassName('boost-button')[0].click doesn't go together, they don't click the exact same Class Button.
Does anyone know how to do that? Thanks!
you can use this code
var btn = document.querySelector(".product-item").querySelector(".boost-button")
or just use
var btn = document.querySelector(".product-item .boost-button")
to setup Click Event And Got All Of Your Buttons ...
var btnCollections = document.querySelectorAll(".product-item .boost-button");
btnCollections.forEach(btn => { btn.addEventListener("click", event => EventHandler(event)); });
function EventHandler(event) {
console.log(event.target.textContent)
}
// Auto Click
document.querySelector(".auto-click").addEventListener("click",_=>{
var btnCollections = document.querySelectorAll(".product-item .boost-button");
btnCollections.forEach(btn => btn.click());
} );
<div class="product-item">
<button class="boost-button"> test 1 </button>
<button class="boost-button"> test 2 </button>
<button class="boost-button"> test 3 </button>
</div>
<div class="product-item">
<button class="boost-button"> test 4 </button>
<button class="boost-button"> test 5 </button>
<button class="boost-button"> test 6 </button>
</div>
<button class="auto-click"> Auto Click </button>
Other Way :
and for your click problem read click documentation and use event.target
I am using bootstrap version so I have created a slide down menu same like below example.
button not working second time
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
The problem is that when I click on close button in slide down the bar is closing up.
But when I again click on add wish list the slide down is not appearing again.
My problem is not only closing. It should close when i click on 'x' button if not it should close automatically after specific time.
Thanks.
Remove this from your close button 'data-dismiss="alert"' and add one more click function like below:
$(document).ready (function(){
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").slideUp(500);
});
});
$('#success-alert .close').click(function(){
$(this).parent().hide();
});
});
HTML will like:
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini" >Add to Wishlist </a>
Purchase
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
</div>
This simple trick worked for me. Use this close.bs.alert bootsrap's event type to hide the element instead of removing it.
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).addClass('hidden');
});
or
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).hide();
});
Instead of writing whole code .I used slideUp() dealy() and slideDown() methods of Jquery.
$(document).ready(function() {
$("#success-alert").hide();
$("#btn2").click(function showAlert() {
$("#success-alert").slideDown(300).delay(2000).slideUp(400);
});
});
$('#success-alert .close').click(function() {
$(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-options">
<input type="button" id="btn2" value="Add to wish list" />
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>
I want to fade in and out different <div> on my site. The div´s together are all one form. In every <div> I have a "go further" and a "go back" button. A go further button triggers this script:
document.getElementById("addnewjob_sitetwo").onclick = function(){
// Fade out all content
$('#newjobcontent-siteone').fadeOut(200);
function cutnewjobsitetwo(){
//Cut all content out
$('#newjobcontent-sitetwo').fadeIn(200);
$('#newjobcontent-siteone').css("display", "none");
}
setTimeout(cutnewjobsitetwo, 201);
};
And that works. Now, if I am on <div> three and i want to go back to <div> two I have a problem.
I modified the script from above like that:
document.getElementById("addnewjob_sitetwo").onclick = function(){
// Fade out all content
$('#newjobcontent-siteone').fadeOut(200);
$('#newjobcontent-sitethree').fadeOut(200);
function cutnewjobsitetwo(){
//Cut all content out
$('#newjobcontent-sitetwo').fadeIn(200);
$('#newjobcontent-siteone').css("display", "none");
$('#newjobcontent-sitethree').css("display", "none");
}
setTimeout(cutnewjobsitetwo, 201);
};
And that doesn´t work. The button does nothing if it gets clicked. Can anyone tell me why? I mean, the <div> of the first site gets faded out while it isn´t there, but is that realy the problem? - And I have to say, I`m a beginner...
Thank you
EDIT:
Here are some pictures. I hope it helps to understand what i want to do: Site one,Site two,Site three
So, the "weiter"-button on "Site one" triggers the same script as the "zurück"-button on "Site three". It fades out <div> one and three and fades in <div> two.
EDIT 2:
Here is the code of the buttons:
<button type="button" class="btn btn-default" name="addnewjob_sitetwo" id="addnewjob_sitetwo">
<span class="glyphicon glyphicon-new-window" style="font-size: 20px"></span> weiter
</button>
This is the first and here the second:
<button type="button" class="btn btn-default" name="addnewjob_sitetwo" id="addnewjob_sitetwo" style="font-size: 20px">
<span class="glyphicon glyphicon-new-window" style="font-size: 20px"></span> zurück
</button>
The code you have uploaded there for the third <div> seems to be set for the second with id
"addnewjob_sitetwo" instead of "addnewjob_sitethree"
Changing:
document.getElementById("addnewjob_sitetwo").onclick
To:
document.getElementById("addnewjob_sitethree").onclick
should do the trick.
$('a.locked').click(function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("button.button2").click(function(){
$("a").removeClass("locked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="example.com"target="_blank" id="action2">
<button class="button2">
<span class="icon">CLICK HERE</span>
</button>
<br>
<br>
</a>
<a href="example.com"class="locked">
<button class="locked-button">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="icon">CONTINUE</span>
</button>
</a>
I want that the last a element is locked, and if you click on the 2nd button, the class locked will be removed from the last a element and I will be able to click on the link.
It deletes the class but I still can't click the link. How to fix that?
Also, is there are smarter way to do that...
This event binding isn't removed from the <a> when its class="locked" is removed:
$('a.locked').click(function(e) {
e.preventDefault();
});
At least with direct bindings like this, jQuery only uses the selector initially to attach the event handler to all matching elements. It won't recheck the selector when the event is later triggered. Currently, you'll have to do that check yourself:
$('a').click(function (e) {
if ($(this).hasClass('locked')) {
e.preventDefault();
}
});
Though, if you have an overall parent element, you can use a delegated binding and jQuery will then recheck the (2nd) selector for you when the event is triggered.
<div id="parent">
<a href="example.com" target="_blank" id="action2">
<!-- ... -->
</a>
<a href="example.com" class="locked">
<!-- ... -->
</a>
</div>
$('#parent').on('click', 'a.locked', function (e) {
e.preventDefault();
});
So, just removing a css class will not work in your case.
You should remove the event handler to allow the button to be clicked, something like this should work:
$("a.locked").on("click.locked", function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("button.button2").click(function(){
$("a.locked").off("click.locked");
$("a").removeClass("locked");
});
});
Working jsfiddle.
Like this?
Check out this SO question to read more about the toggle function I used.
$(document).on("click", "#ToggleLock", function(e) {
$('#Continue').prop('disabled', function(i, v) {
return !v;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id='ToggleLock'>Unlock/Lock</button>
<button onclick="location.href='http://www.example.com'" type="button" id='Continue' disabled>Continue</button>
Let me know if I have greatly misunderstood the question.
Remove the class is not enough, since you added a click event to all $('a.locked') you need use .off() to remove the click event after removing the class. Also try to target the specific element, you could add id="btn_continue" to 2nd button. ($("a") will target all <a> which is not what you want to do)
Note:
$('a.locked').click(function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("button.button2").click(function(){
$("#btn_continue").off().removeClass("locked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="example.com" target="_blank" id="action2">
<button class="button2">
<span class="icon">CLICK HERE</span>
</button>
<br>
<br>
</a>
<a href="example.com" id="btn_continue" class="locked">
<button class="locked-button">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="icon">CONTINUE</span>
</button>
</a>
I'm trying to refresh one ID of my page within the click of a button.
I've tried several ways but none of them work. Although I've created the button to refresh it, it keep the submission of the page (triggering the validation event). So, each time I click that button, he tries to submit the form, validation the inputs instead refresh that div.
Here's my code right now:
function refreshCaptcha() {
$("#captcha_code").attr('src','./inc/captcha.php');
}
<div class="form-group">
<div class="col-xs-4">
<button class="btn btn-sm btn-warning" id="refreshcap" name="refreshcap" onclick="refreshCaptcha();">
<i class="fa fa-refresh push-5-r"></i>
<img id="captcha_code" src="inc/captcha.php" />
</button>
</div>
<div class="col-xs-8">
<div class="form-material floating">
<input class="form-control" type="text" id="cap" name="cap">
<label for="cap">Captcha</label>
</div>
</div>
</div>
Can someone help me trying to get what's wrong?
Thanks.
Assuming that your button is inside the form,
add type in your button
which will stop button from submitting your form
<button type="button" class="btn btn-sm btn-warning" id="refreshcap" name="refreshcap" onclick="refreshCaptcha();">
<i class="fa fa-refresh push-5-r"></i>
<img id="captcha_code" src="inc/captcha.php" />
</button>
other than that you can use javascript return false; in your function end
with js
<script>
$(document).ready(function() {
$("#refreshcap").on("click",function(event){
event.preventDefault();
$("#captcha_code").attr('src','./inc/captcha.php');
});
});
</script>
with this you wont need to call on click event this will do it for you, no matter type is button or submit
I think your JS function should return false; in order to not submit the form.
<script>
function refreshCaptcha() {
$("#captcha_code").attr('src','./inc/captcha.php');
return false;
}
</script>