I'm using this button group structure. Now I need to add class active to each button when I click on it. And remove from it when I click on another button. This is my HTML structure, is something like that:
<div id="donation-pricecontainer" class="section donation">
<h3>Select a contribution amount.</h3>
<div class="field button 18294784 required btn-float"><label for="18294784"><button id="18294784" name="donation-level" class="required" type="button" value="50.000000" maxlength="255">$50<span class="label btn-value">$50.00 - test</span></button></label></div>
<div class="field button 18294785 required btn-float"><label for="18294785"><button id="18294785" name="donation-level" class="required" type="button" value="100.000000" maxlength="255">$100<span class="label btn-value">$100.00 - test</span></button></label></div>
<div class="field button 18294786 required btn-float"><label for="18294786"><button id="18294786" name="donation-level" class="required" type="button" value="500.000000" maxlength="255">$500<span class="label btn-value">$500.00 - test</span></button></label></div>
<div class="field button 18294787 required btn-float"><label for="18294787"><button id="18294787" name="donation-level" class="required" type="button" value="1000.000000" maxlength="255">$1,000<span class="label btn-value">$1,000.00 - test</span></button></label></div>
<div class="field button 18294788 required btn-float"><label for="18294788"><button id="18294788" name="donation-level" class="required" type="button" value="2000.000000" maxlength="255">$2,000<span class="label btn-value">$2,000.00 - test</span></button></label></div>
<div class="field radio other-option required other-btn"><label for="other-option"><input id="other-option" name="donation-level" class="required" type="button" maxlength="255"><span class="label">Or choose your own amount.</span></label></div>
<div class="field text other-amount"><input id="other-amount" name="other-amount" class="otherAmount" type="text" placeholder="$0.00"></div>
</div>
Try this way:
$("button[class=required]").click(function (e) {
$("#" + e.currentTarget.id).addClass("selected");
$("button[id!=" + e.currentTarget.id+"]").removeClass("selected")
})
On click I select a button and I set a new class on it, if I click the second time the same button, the button become default without new class
You can follow this simple code pattern , initially on click removing the active class from all button and then add active to the clicked one
$(document).ready(function(){
$(".btn").click(function(){
$(".btn").removeClass("active");
$(this).addClass("active")
})
})
.active{
background:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">btn</button>
<button class="btn">btn</button>
<button class="btn">btn</button>
This is not fairly a good question but I still want to try to help. Firstly you have to learn is how to add/remove/toggle class of a specify dom. In your case, it is a button. Please check this doc.https://developer.mozilla.org/en-US/docs/Web/API/Element/classList.
Next, you have to learn how to programing to resolve nature problems. In your case, every time a button is clicked, it's required to know the activated button previously and remove the class. And then add the class to the current button.
That's all you need to know about it. Go translate them to real code, you must do it by your self.
Related
The following is the chose I am using to let the user manually choose working/starting time.
<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>
<div class="input-group date" id="id_1">
<input type="text" name="day11" value="09:00 AM" class="form-control"
placeholder="End time" title="" required/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="glyphicon glyphicon-time fa fa-clock-o"></i>
</div>
</div>
</div>
<script>
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#id_1,#id_2').show();
} else {
$('#id_1,#id_2').hide();
}
});
</script>
By default the field should be hidden, but it is not. Instead even in the checkbox is not checked, the field is visible and to make it hidden I had to check the box and uncheck it again. Then the input field goes hidden. How can i fix this ?
Here is the jsfiddle link, it shows the same problem.
https://jsfiddle.net/shijilt/bs02m98w/
The code is only changing the visibility after clicking the #beastmode element. There's no explicit default otherwise.
You can hide it when the page loads:
$(function () {
$('#id_1,#id_2').hide();
});
Or, even better, style it to be hidden by default in your CSS:
#id_1,#id_2 {
display: none;
}
That way it's hidden by default from the styling itself, regardless of whether or not any JavaScript code successfully executes.
Example
Almost you code is fine. Try this it will work definitely.
<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>
<div class="input-group date" id="id_1" style="display:none;">
<input type="text" name="day11" value="09:00 AM" class="form-control"
placeholder="End time" title="" required/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="glyphicon glyphicon-time fa fa-clock-o"></i>
</div>
</div>
</div>
<script>
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#id_1').show();
} else {
$('#id_1').hide();
}
});
</script>
First you have to hide div where id=#id_1 there are many ways to hide but i use simple method to hide it by display: none; in the style.
Second when you click on checkbox if its true its show the div where id=#id_1 else it will hide the div. If you pass two ids which is wrong because its not found #id_2 in the page that's the reason which not show/hide your content.
I am trying to set the value of a text box when file upload is selected , how ever it does not happen but I see correct value in alert box.
<div class="row">
<div class="col-xs-2">
<div class="file-label"><i></i>#Resources.FolderPath</div>
</div>
<div class="col-xs-4">
<input class=".form-control" name="fileText" type="text" />
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
<div class="col-xs-4">
<label id="fileSizeError" style="color: red"></label>
</div>
</div>
$(document).ready(function () {
$(document)
.on("change","#fileUpload",
function (e) {
alert($("#fileUpload").val());
$("#fileText").val($("#fileUpload").val());
alert("hi");
});
});
Please help me here.I am using Asp.net MVC as platform.
Your input has a name, but #fileText is an ID selector. Either add an id to it, or use an attribute selector to find it.
So either:
<input class=".form-control" id="fileText" name="fileText" type="text" />
<!-- add id------------------^^^^^^^^^^^^^ -->
or
$("[name=fileText]").val($("#fileUpload").val());
// ^^^^^^^^^^^^^^^---- use attribute selector
Try native js:
document.getElementById("fileText").defaultValue = $("#fileUpload").val();
OR
$("#fileText").attr("value", "some value");
Also;
Check to see if your original code works with replacing .val() with .text
I have a check box and a text box in same row. Initially the type of the text box will be hidden, When I click the check box the type of the text box should change from hidden to text. if I unchecked it should change from type text to hidden. How can I do this? here is my code:
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="checkbox" name="Customer_Web" value="yes" style="float:left;"> <h4 align="left" style="font-size:16px; margin-left:20px !important;">Web Designing</h4>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="hidden" name="Web_Designing_Details" placeholder="Web Designing Details" class="form-control input-md" >
</div>
</div>
</div>
Instead of changing the type of input you are probably looking for visibility of input type text, you can set display to none or block or use jQuery method show and hide.
Live Demo
$('.row :checkbox').change(function(){
$('.form-control.input-md')[0].style.display = this.checked ? 'block' : 'none';
});
Change the type of text box from hidden to text.
HTML
<input type="text" name="Web_Designing_Details" placeholder="Web Designing Details" class="form-control input-md hidden" >
JQUERY/JAVASCRIPT
$(document).ready(function(){
$('input[name=Web_Designing_Details]').hide();
$('input[name=Customer_Web]').change(function(){
if( $(this).is(":checked"))
{
$('input[name=Web_Designing_Details]').hide();
}
else
{
$('input[name=Web_Designing_Details]').show();
}
});
});
If you want to hidden the input (don't care about the type), you can use toggleClass as below:
$('YOUR_INPUT').toggleClass('hidden', $('YOUR_CHECKBOX').is(':checked'));
Use jQuery to show and hide it depending on state of checkbox
$('#nameOfElement').show();
$('#nameOfElement').hide();
My problem is that I have 2 blocks in modal and when I click on .emailInbound checkbox it toggle .in-serv-container open, but when I click on .accordion-heading to open comment part it makes .in-serv-container collapse.
What can be a reason?
HTML:
<label class="checkbox">
<input class="emailInbound" type="checkbox" onclick="toggleInServ(this)">Использовать Email для регистрации обращений
</label>
<div id='in-serv-container'>
<div><strong>Настройка входящей почты</strong></div>
<div>
<input class="emailOutserver" type="text" placeholder="Сервер входящей почты">
<input class="emailOutserverPort" type="text" placeholder="Порт">
</div>
<div>
<select class="emailOutProtocol half" style="width: 49%!important;">
<option value='usual'>Обычный</option>
<option value='ssl'>SSL</option>
</select>
<input class="emailInFolder half" type="text" placeholder="Папка входящей почты">
</div>
<div class="modal-body-container">
<input type="text" placeholder="Опции">
</div>
<button class="btn btn-link">Проверить подключение</button>
<hr>
</div>
<div class="accordion" id="comment-wrapper">
<div class="accordion-heading" data-toggle='collapse' data-target='#emailComment' onclick='toggleChevron(this)'>
<strong>Комментарий</strong> <i class='icon-chevron-right'></i>
</div>
<div id="emailComment" class="collapse" data-parent="#comment-wrapper">
<textarea class="emailComment"></textarea>
</div>
</div>
JS:
function toggleInServ(box){
var checked = $(box).prop('checked');
if(checked){
$('#in-serv-container').css('height', '170px');
}else{
$('#in-serv-container').css('height', '0px');
}
}
function toggleChevron(o){
var icon = $(o).children('[class*=icon]');
if(icon.hasClass('icon-chevron-right')){
icon.removeClass('icon-chevron-right');
icon.addClass('icon-chevron-down');
}else{
icon.removeClass('icon-chevron-down');
icon.addClass('icon-chevron-right');
}
}
If I'm in the right track at this, you want each dropdown to stay on opened if the checkbox is ticked? What ever is the case here, please provide us with your CSS-styling as well. Would be best if you'd give us JSFiddle of your case.
Changing just the
height
attribute of your CSS seems like a bad idea. Instead of that, you could try using
display: block;
and
display: none;
So it would really be a hidden field before it gets selected. Not the answer to the question itself, but just something to note.
It was because of 'bubbling'. I added e.stopPropoganation() and it help.
I have a button group and am willing to update some other field on change according to the active buttons.
See the jsfiddle here
This is the HTML, copied from the documentation:
<div class="btn-group arrActiviteit arrUpdate" data-toggle="buttons">
<label class="btn btn-primary active" data-wat='foo'>
<input type="checkbox"> Item 1
</label>
<label class="btn btn-primary" data-wat='bar'>
<input type="checkbox"> Item 2
</label>
<label class="btn btn-primary" data-wat='something'>
<input type="checkbox"> item 3
</label>
<label class="btn btn-primary" data-wat='orElse'>
<input type="checkbox"> item 4
</label>
</div>
The Button row acts like it should do.
Then I watch for a click event on the .arrUpdate div for change. I've got multiple button groups which all have the .arrUpdate class. That's the reason for the second class: .arrActiviteit
$('.arrUpdate').click(function(e){
val = ''; // for holding the temporary values
$('.arrActiviteit label').each(function(key, value){
if(value.className.indexOf('active') >=0){
val += value.dataset.wat
}
})
// just for debug reasons.
$('#hierHier').html(val);
})
But it appears that the 'active' class gets added after the click event is fired. So the value in #hierHier is always behind one click, so to say.
How can I resolve this?
Or is there a better way to retrieve all the active buttons in this checkbox-array?
SOLVED
update: better solution Twitter Bootstrap onclick event on buttons-radio
http://jsfiddle.net/hA423/7/
I solved it using a timeout to make your function run after bootstrap events...
There must be some other ways to do it...
$('.btn').on('click',function(e){
setTimeout(count);
})