How can I hide element using jQuery? [duplicate] - javascript

This question already has answers here:
change type of input field with jQuery
(29 answers)
Closed 6 years ago.
HTML
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="payment_options" value=1 autocomplete="off" checked>Cash on Delivery
</label>
<label class="btn btn-default" id="bkash-radio">
<input type="radio" name="payment_options" value=2 autocomplete="off">bKash
</label>
</div>
<input type="hidden" name="trx_id" id="trx_id" class="form-control" placeholder="Enter Transaction ID"/>
jQuery function:
$(document).on("click", "#bkash-radio", function() {
console.log('test');
$("#trx_id").attr("type", "text");
});
$(document).on("blur", "#bkash-radio", function() {
console.log('test');
$("#trx_id").attr("type", "hidden");
});
I am trying to show the the textbox id=trx_id when the second radio option is selected, but when it is deselected I want the text box to be hidden. How can I do this?

Target your [name='payment_options'] radios
On change event see if this.value==="2"
Than manipulate the prop type respectively
$(document).on("change", "[name='payment_options']", function() {
$("#trx_id").prop("type", this.value==="2" ? "text" : "hidden");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="payment_options" value=1 autocomplete="off" checked>Cash on Delivery
</label>
<label class="btn btn-default" id="bkash-radio">
<input type="radio" name="payment_options" value=2 autocomplete="off">bKash
</label>
</div>
<input type="hidden" name="trx_id" id="trx_id" class="form-control" placeholder="Enter Transaction ID"/>

Related

Add an on change listener to bootstrap 4 button group?

I have this (bootstrap 4) button group as follows:
<div id="timeselector" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active ">
<input type="radio" name="options" id="sec" autocomplete="off" checked>Second
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="min" autocomplete="off">Minute
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="hr" autocomplete="off">Hour
</label>
</div>
I want to add a JS onchange listener and find out which one was pressed (e.g. Second, Minute, or Hour). I don't want to add a listener to each button because there are a lot of buttons like these on my page.
I've tried adding something like this:
$('#timeselector').on("change", function() {
alert(this)
});
But that doesn't work. If I change "change" to "click", it does alert, but it doesn't give me which was selected.
Can someone help with this? Thank you!
You need to use click instead an to attach the event to the input's inside your div :
$('#timeselector input')
$('#timeselector input').on("click", function() {
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<div id="timeselector" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active ">
<input type="radio" name="options" id="sec" autocomplete="off" checked>Second
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="min" autocomplete="off">Minute
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="hr" autocomplete="off">Hour
</label>
</div>

Double clicking detected with jquery on click

I have a div like so
$('.btn-group label').unbind().click(function() {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
which has a bug, when I check the console result for a click I get two results false and true from this jquery function
how can I log only the valid one which is true?
On jsfiddle it's working however without double logging https://jsfiddle.net/8wtLc8b6/
Do with change event instead of click
$('.btn-group label').change(function(e) {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
Why?
Change event run after the changes append in input
$('.btn-group label').change(function(){
console.log('change') //its run only on completely changed
}).click(function(e) {
console.log('click'); //its run before and after changing
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>

Get attribute value with jQuery

I'm trying to get the attribute value in jQuery, but isn't working, My code reports undefined. Here is an example:
console.log($(".btn-causas input").find(".active input").attr('d'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert">Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike">Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow">I DON'T
</label>
</div>
The selector could be simply done like :
$(".btn-causas .active input").attr('d');
Hope this helps.
console.log( $(".btn-causas .active input").attr('d') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert"> Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike"> Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow"> I DON'T
</label>
</div>
The best way to do that is that you rename the attribute d for data-name and you can get very easy that value with this code:
Html:
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" data-name="dontknow">
Jquery:
var value = $('input[name="options"]:checked').data('name');
alert(value);
This is the best way to do that, this code retrieve the value of a checked input radio with the attribute data-name
Regards!
You don't have active class but as per my understanding you are trying to get selected radio buttons' attribute so try :checked on input
You're specifying wrong selector .btn-causas input, instead use this .btn-causas, See the code below:
Make jQuery find the inputs inside div - .btn-causas instead of finding it inside inputs, as you've done. Inputs doesn't contains a child elements, so you can't find elements inside it.
$(function() {
console.log($(".btn-causas").find(".active input").attr('d'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert"> Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike"> Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow"> I DON'T
</label>
</div>
Hope this helps!

Checkbox change innerHTML and call function

I have a group of checkboxes:
<form class="form">
<div class="btn-group btn-group-justified " data-toggle="buttons" name="chartSelect">
<label class="btn btn-info" id ="all">
<input name="all" type="checkbox" >Hide
</label>
<label class="btn btn-info">
<input name="total" id="total" type="checkbox">Total
</label>
<label class="btn btn-info">
<input name="max" id="max" type="checkbox">Max
</label>
<label class="btn btn-info">
<input name="mean" id="mean" type="checkbox">Mean
</label>
<label class="btn btn-info">
<input name="min" id="min" type="checkbox">Min
</label>
<label class="btn btn-info">
<input name="extrapo" id="extrapolation" type="radio">Extrapo
</label>
</div>
</form>
I'm trying to call two functions depending on whether the button is checked or not and also change the text on the label.
My JS attempt:
<script type="text/javascript">
$('[name=all]').change(function () {
if ($(this).is(':checked')) {
hideAll();
document.getElementById("all").innerHTML = "Show";
}
else {
showAll();
document.getElementById("all").innerHTML = "Hide";
}
});
</script>
I can call each function no problem on check and unchecked, but when I change the innerHTML the check button stops working.
You are changing the value of innerHTML and leaving only text there.
Solution:
Put the text inside a span element
<label class="btn btn-info" id="all">
<input type="checkbox" name="all">
<span>Hide</span>
</label>
Then in JS do:
$('input[name="all"]').on('change', function() {
if ($(this).is(':checked')) {
hideAll();
$('#all span').text('Show');
} else {
showAll();
$('#all span').text('Hide');
}
});
Currently, you are selecting the label which selects this HTML element:
<label class="btn btn-info" id ="all">
<input name="all" type="checkbox" >Hide
</label>
When you set the innerHTML, you get rid of the input. I'd split up the label and input like this:
<input name="all" type="checkbox">
<label class="btn btn-info" id="all">Hide</label>

get child element that gets selected inside div element [duplicate]

This question already has answers here:
In jQuery, how do I select an element by its name attribute?
(18 answers)
Closed 7 years ago.
How do I get the radio button that is checked from inside my div
Here is my jquery but c is returning undefined
$('#SpaceType').change(function () {
var kids = $(this).children();
$(kids).each(function() {
var c = $(this).data('id');
});
});
Here is my div
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label id="SpaceTypeLabelHouse" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="0"> House
</label>
<label id="SpaceTypeLabelApartment" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
</label>
<label id="SpaceTypeLabelStudio" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
</label>
<label id="SpaceTypeLabelOther" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
</label>
</div>
Use the :checked selector
$('#SpaceType').change(function () {
var c = $(this).find(':checked').attr('id');
alert(c)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label id="SpaceTypeLabelHouse" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="0"> House
</label>
<label id="SpaceTypeLabelApartment" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
</label>
<label id="SpaceTypeLabelStudio" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
</label>
<label id="SpaceTypeLabelOther" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
</label>
</div>
In your case you are iterating over the children of SpaceType which are the label elements and they don't have an id, also you are reading the data called id not the id attribute.

Categories

Resources