How to output two different labels on two buttons? - javascript

I have this code that shows a label when clicking the button, but I need the following:
Two buttons showing two different labels, in one of the buttons show your label below that button;
When a label is active or shown by clicking on the other button, that label is replaced by the new one.
(function() {
$('button').on('click', function() {
$("#action").html("button was clicked");
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<label id="action"></label>
See example: https://jsfiddle.net/fr4x32g7/

(function () {
var active = "";
$('button').on('click', function (e) {
var id = "#" + e.target.value;
$(active).html("");
active = id;
$(id).html("button was clicked");
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button value="action">Action</button>
<label id="action"></label>
<button value="action1">Action</button>
<label id="action1"></label>

Does this solve the problem ?
(function() {
$('#button1').on('click', function() {
$("#action").html("button1 was clicked");
});
$('#button2').on('click', function() {
$("#action").html("button2 was clicked");
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button id="button1">Action1</button>
<button id="button2">Action2</button>
<label id="action"></label>

I assume that both labels are to be hidden initially and to show only one of them if the user clicks on a button. Here's a solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button data-label="action1">Action 1</button>
<button data-label="action2">Action 2</button>
<br>
<label class="action" id="action1" style="display:none;">button 1 was clicked</label>
<label class="action" id="action2" style="display:none;">button 2 was clicked</label>
and
$(function() {
$('button').on('click', function() {
$("#" + $(this).data('label')).show().siblings("label").hide();
});
});
Fiddle: https://jsfiddle.net/0phz62ot/
Basically we bind the button with its label via an attribute and whenever a button is clicked, the label bound to it will be shown and the sibling labels will be hidden.

Related

How to add only one click event on a label?

Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>

onclick switch div position

Brief Description: Need to switch the position of the div's when i click on them.
Requirement: If i click on hello,world these 2 should switch , if i click on hello2,world2 those 2 will switch.
Here is my code:
Note - i have switched the div's with a checkbox, note - only the top one is switching, i want to achieve the switching on clicking
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
alert("div swapped");
})
$('#check').change(function () {
//alert('check clicked');
if ($(this).is(':checked')) {
$('#div1').insertAfter($('#div2'));
} else {
$('#div1').insertBefore($('#div2'));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="div1">Hello</div>
<div id="div2">World</div>
</div>
<br>
<div>
<div id="div1">Hello2</div>
<div id="div2">World2</div>
</div>
<br>
click me to switch Hello,World<input type="checkbox" name="check" id="check"/>
If i click on hello,world these 2 should switch , if i click on hello2,world2 those 2 will switch.
Please help.
If I get you right this is what you're looking for:
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
alert("div swapped");
})
$('.click').click(function (evt) {
var $div = $(evt.target).closest('.switch');
$div.next('.switch').after($div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">
<div class="switch">Hello</div>
<div class="switch">World</div>
</div>
<br>
<div class="click">
<div class="switch">Hello2</div>
<div class="switch">World2</div>
</div>

can we write script for the button which is inside the popover?

I have created a popover so that if I click on the image the popover should appear.
The popover is working. what my main problem is I have inserted buttons in the popover.
so I want to write javascript or jquery code for the button when it is clicked. Can anyone help on this?
I have tried but it's not working!!!!
$(function() {
$('button').click(function() {
var x = $(this).attr('class');
alert(x);
});
});
$(function() {
$("[data-toggle=popover]").popover({
html: true,
container: 'body',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
},
placement: "auto"
});
});
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./isobar.js">
</script>
<span>
<img src="./img/more_options_icon.png" data-toggle="popover" tabindex="5" data-trigger="focus" data-popover-content="#moreoptions">
</span>
<div id="moreoptions" class="hidden">
<div class="popover-body">
<div class="list-group">
<button type="button" class="list-group-item"><span class="gap"></span>Edit</button>
<button type="button" class="list-group-item"><span class="gap"></span>Logic Builder</button>
<button type="button" class="list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
O.k. Here is an updated version of my answer and checked and working code. A secret of a popover is to fire the correspondence function in a right time with a popover firing. So the JS code is:
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
Here I an using html selector
:not(.main)
to prevent binding and unbinding events to the main button. In addition, we have to pay attention on the fact that every popover rising binds a new event handler to each button. This means that after n popover risings every button will fire it's alert n times. To prevent this effect, it is possible to bind events in the first rising only, or as I did, to unbind an event from a button every popover rising. As to html code, here it is:
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
I only added the ".main" button to accept a simulation, and each button got additional corresponding class "class-0", "class-1", "class-2" for successful demonstration. Now, when you push on the main button, other 3 buttons appear. And to the contrary, pushing on any of those 3 buttons, is following by alert firing and disappearing of all of them. I hope this will help you.
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
.hidden {
display: none;
}
button {
float: left;
}
.class-0 {
clear: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>

When checkbox is checked show hidden button and hide the visible button

I am a beginner in javascript, hopefully you can help me with this problem..
I have 2 buttons in html form and 1 checkbox, 1 button should be hidden and the other is visible. My problem is how to show the hidden button and hide the visible button at the same time when the checkbox is checked..
I know how to hide/show the button flip-ch1 but I can't do it to other button.
I have a script here:
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').mouseup(function() {
$('#flip-ch1').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add</button>
<button class="btn_style" id="flip-ch1">Add</button>
</div>
Toggle them both:
<script type="text/javascript">
$(document).ready(function(){
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#ch1').toggle();
$('#flip-ch1').toggle();
});
});
</script>
Just add this line:
$('#ch1').toggle();
So, the complete js code would be:
$(document).ready(function () {
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#flip-ch1').toggle();
$('#ch1').toggle();
});
});
Do not get confused by the .hide(). It is used to hide one of the buttons only in the beginning. No need to use afterwards. The reason that you do not see any changes after toggling the checkbox, is that when first button is hidden the second one gets its place, the place does not remain empty. You can spot all this that I mentioned on inspect element of any major browser.
Try $('#radio').is(':checked') as below
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').on('change', function() {
if ($('#radio').is(':checked')) {
$('#flip-ch1').show();
$('#ch1').hide();
} else {
$('#flip-ch1').hide();
$('#ch1').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add 1</button>
<button class="btn_style" id="flip-ch1">Add 2</button>
</div>

alternating button on clicking event?

Hey, it's all about Jquery. I am using two Div and a button, at a time only one div is shown. Suppose these are div:
<div id="first"></div>
<div id="second"></div>
And button is:
<input type="button" value="show first" onClick="called a javascript();"/>
Only single div is shown i.e. first
<script>
$(document).ready( function() {
$("#second").hide();
});
</script>
Now on clicking button, I want to hide first div, show second and the value of button is changed to show second and if clicked again it revert back to previous state.
Thanks in advance
Heres' the FIDDLE. Hope it helps.
html
<div id="first" style="display:none;">first</div>
<div id="second">second</div>
<input id="btn" type="button" value="show first" />
script
$('#btn').on('click', function () {
var $this = $(this);
if ($this.val() === 'show first') {
$('#first').show();
$('#second').hide();
$this.val('show second');
} else {
$('#first').hide();
$('#second').show();
$this.val('show first');
}
});
What you are looking for is the toggle function from jquery
Here's an example on fiddle
$(".toggleMe").click(function() {
$(".toggleMe").toggle();
});

Categories

Resources