i have a button , in its click i will call a function which will open a popup with OK and CANCEL button. And click of these button the first function which i called to open the div should return true or false respectively. below is what i want.
<a id="button"> click me </a>
$("#button").click(function(e){
if(openPopUp()){
}
});
function openPopUp()
{
// this will opean a popUpwith OK n Cancel and onclick of Ok this function should return true and false if its Cancel
}
You can use javascript confirm dialog, like following confirm("Popup example") when user click on OK it will return true else on clicking Cancel button it will return false.
Hope this helps.
$("#button").click(function(e)
{
if(openPopUp())
{
alert('OK clicked');
}
});
function openPopUp()
{
return confirm("Please enter your name");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button"> click me </a>
<script type="text/javascript">
function AlertIt() {
var answer = confirm ("Please click on OK to continue.")
if (answer)
window.location="http://www.continue.com";
}
</script>
<a href="javascript:AlertIt();">click me</a
you can try this one:
function demo(e, el){
alert(this);
alert(e);
alert(el);
}
/* this = "hey"
* e = "there"
* el = "!"
*/
demo.call("Hey", "there", "!");
Or
<script type="text/javascript">
function AlertIt() {
var answer = confirm ("Please click on OK to continue.")
if (answer)
window.location="http://www.continue.com";
}
</script>
click me
DEMO
This can be achieved easily using confirm
The snippet shows how to do this with the confirm code. You then just put your true code inside the if statement.
This put all script into ONE easy to manage function
$("#button").click(function(){
if (confirm("Are you sure?")) {
//put code for true here
$(".test").css("background-color", "red");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hello World</div>
<button id="button">Button</button>
Related
I needed to geta toggle function in my code, so I searched for it and got this. Now I implemented it into my code (below code is simplified), but you have to click the button twice to make it work properly. After clicking twice it works normally.
What causes this problem and how can I fix this?
var triggerbtn = $('#trigger');
function showThis() {
triggerbtn.text('Show this!');
$(this).one("click", hideThis);
}
function hideThis() {
triggerbtn.text('Hide this!');
$(this).one("click", showThis);
}
triggerbtn.one("click", showThis);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Show this!</button>
The default state of button is show and on first click you are again trying to show it. It should have been hide for first click
var triggerbtn = $('#trigger');
function showThis() {
triggerbtn.text('Show this!');
$(this).one("click", hideThis);
}
function hideThis() {
triggerbtn.text('Hide this!');
$(this).one("click", showThis);
}
triggerbtn.one("click", hideThis); // Here is the change
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Show this!</button>
I am trying to write a javascript function that would call on button click but through a div class id. How to write that?
<body>
<div class="content">
<button>Click me</button>
</div>
</body>
after click it should write message I am here.
This is really simple. just you will have to call click function with div class.
like this
$('.content').click(function(){
alert("You have done");
})
Here is DEMO
Javascript solution for the html provided:
document.getElementsByClassName('content')[0].onclick = function () {alert("I am here");};
Javascript for any button in the div:
message = function () {
alert("I am here");
};
var items = document.getElementsByClassName('content')[0].children;
for (var i in items) {
if (items[i].tagName == "BUTTON") {
items[i].onclick = message;
}
}
$(function(){
$(".content").find("button").on("click",function(){
alert("I am here");
});
});
I have a button as follows
<input type="button" id="btn" value="Click Me" />
and I have 2 functions
function event1(){
alert("1st Time Clicked");
}
function event2(){
alert("Further Clicks");
}
I want to run event1 function for 1st time when the user clicks on that button and for subsequent requests I need to run event2 function.
I tried the following way
$(document).ready(function(){
$("#btn").one("click",function(){
event1();
});
});
But I can't figure it out how to run event2 function for further clicks.
How Can I do that in Jquery ?
I created Jsfiddle = http://jsfiddle.net/rajeevgurram/d9Z3c/
In the first click handler(using .one()), register a normal click handler so that further clicks will trigger that handler
$(document).ready(function () {
$("#btn").one("click", function () {
event1();
$(this).click(event2)
});
});
Demo: Fiddle
I like booleans so I use
$(document).ready(function(){
var clicked = false;
$("#btn").on("click",function(){
if(!clicked) {
event1();
clicked = true;
} else {
event2();
}
});
});
P.S. I just wanted to be different from the first answer. XD
Below i mentioned my page contents
Currently it'l show only popup box for a sec only ,but i need to extend the time ihave no idea how to do that
script i used
<script type="text/javascript">
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
my button
<input type="submit" value="SUBMIT" onclick="lightbox_open();" />
poup box
<div id="light">
<h3 th:text="${result}"></h3>
hi hello
</div>
<div id="fade" onClick="lightbox_close();"></div>
You can use Window setTimeout() method for this purpose.
var t=setTimeout(lightbox_close,3000)
You'll want to use the window.setTimeout event. If you are using jQuery for example:
$(document).ready( function() {
$('#element').hide();
window.setTimeout(function() {
$('#element').show();
}, 5000);
});
You can swap the hide/show around to suit your needs.
JSFiddle: http://jsfiddle.net/NfCHG/1/
I have a image that links to a page. This is a process button which can take up to 20 seconds to run.
I want to prevent the user from pushing it more than once.
How would I write a Javascript that when the button is pushed, it would follow the hyperlink, but the link for the button would disable, and the image would change?
<script>
function buttonClicked()
{
document.getElementById('buttonImage').src = 'new-image.jpg';
document.getElementById('buttonId').disabled = true;
}
</script>
<a id="buttonId" href="next-page.html" onclick="return buttonClicked()"><img id="buttonImage" src="image1.jpg"></a>
From your question, it sounds like your "button" is the image that you click on...if that's true then you can use the following:
<a id="my_link" href="/page_to_vist_onclick"><img id="my_image"></a>
Then your javascript would be:
document.getElementById('my_link').onclick = function() {
document.getElementById('my_link').disabled = true;
document.getElementById("my_image").src='the_path_to_another_image';
};
On click, remove the href attribute from the a element.
I ended up going with the following:
$(document).ready(function() {
var isSubmitted = false;
$("#submit").click(function(e) {
if ( ! isSubmitted ) {
isSubmitted = true;
var src = $(this).attr("src").replace("gold","red");
$(this).attr("src", src);
} else {
e.preventDefault();
}
});
});
Here is a really simple one for you
in your JS
function Create(){
document.write('<INPUT disabled TYPE="button" value="Click Me!">');
}
in your HTML
<INPUT TYPE="button" value="Click Me!" onclick="Create()">
If you are ready to use jQuery, then here is another solution.
$("selectorbyclassorbyIDorbyName").click(function () {
$("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});
select the button and by its id or text or class ... it just disables after 1st click and enables after 20 Milli sec
Works very well for post backs n place it in Master page, applies to all buttons without calling implicitly like onclientClick
you can use this.
<script>
function hideme()
{
$("#buttonImage").hide();
}
</script>
<a id="buttonId" href="next-page.html" onclick="return hideme()"><img id="buttonImage" src="image1.jpg"></a>
if you don't want to hide image please use this..
$('#buttonImage').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
That will prevent the default behaviour of a hyperlink, which is to visit the specified href.
Let's make a jquery plugin :
$.fn.onlyoneclick=function(o){
var options=$.extend({src:"#"},o);
$(this).click(function(evt){
var $elf=$(this);
if( $elf.data("submitted") ){
evt.preventDefault();
return false;
}
$elf.attr("src", typeof(options.src) == 'function' ?
options.src($elf.attr("src"))
: options.src
).data("submitted",true);
});
}
$(".onlyoneclick").onlyoneclick({
src : function( src ){
return src.replace("gold","red");
}
})
on any button that should trigger only once :
<button ... class="onlyoneclick">tatatata... </button>
its simple...just one line of code :)
Onclick return false.