I have 5 questions in a form, and a few of them have a YES / NO response. I wanted to just be able to toggle the yes and no buttons once the user selected one of them. The issue I am running into is if one of the question is answered, and I answer the next question, it removes the answer from all other questions. I'm sure there is something simple I am missing.
* Update *
I got everything working the way I wanted to, thank you all for the help. One thing I have noticed now, the questions with the sub question, when I select the yes or no, the sub question display, but if I click anywhere on the screen, it removes the active class from the question.
HTML:
<div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-2">
<p><strong>2.</strong> HAVE YOU HAD SHINGLES?</p>
<input name="radio" type='hidden' value="Yes"/>
<div class="btn-group btn-toggle">
<button type="button" class="btn btn-default yes-no btn-1" data-radio-name="radio">Yes</button>
<button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-3">
<p><strong>3.</strong> HAVE YOU HAD PAIN IN THE AREA OF THE SHINGLES RASH FOR AT LEAST THE LAST 3 MONTHS?</p>
<input name="radio" type='hidden' value="Yes"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="yes">Yes</button>
<button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="no">No</button>
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-2 study-question sub-question">
<p><strong>3A.</strong> IF IT HAS NOT YET BEEN 3 MONTHS, HOW LONG WOULD YOU ESTIMATE THIS PAIN HAS BEEN ONGOING?</p>
<input name="radio" type='hidden' value="Yes"/>
<input type="email" class="form-control study-form-control" id="how-many-year" placeholder="How long?">
</div>
</div>
</div>
</div>
JS
$('.yes-no').click(function(){
$(this).closest('div').find('.yes-no').each(function(){
$(this).removeClass('active');
});
$(this).addClass('active');
$(this).val()=='yes'?$(this).closest('div').find('.sub-question').show():$(this).closest('div').find('.sub-question').hide();
});
HTML
<div class="col-xs-12 col-md-6 col-md-offset-2 study-question">
<p><strong>4.</strong> DO YOU HAVE ANY OTHER CHRONIC PAIN THAT IS NOT ASSOCIATED WITH YOUR SHINGLES PAIN?</p>
<input name="radio" type='hidden' value="Yes"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default yes-no" data-radio-name="radio">Yes</button>
<button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-2">
<p><strong>5.</strong> ARE YOU (CURRENTLY) TAKING MEDICINE TO MANAGE THE PAIN FROM SHINGLES?</p>
<input name="radio" type='hidden' value="Yes"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default yes-no" data-radio-name="radio">Yes</button>
<button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
</div>
</div>
JS
$('.btn-toggle').click(function() {
$(this).toggleClass('active');
console.log($(this));
});
I just want it to target the current question that the user is trying to answer, not all of them at once.
You can use .closest('div') to target the closest div of the element that triggered the .change() event and use .find() to target the class.
One function to to deal with all change events for elements with the class of MyToggle
This will allow you to run the same function for all questions as shown in the demo below.
Update: Yes/No toggle
Demo
$(".MyToggle").click(function() {
$(this).val()=='yes'?$(this).closest('div').find('.Questions').show():$(this).closest('div').find('.Questions').hide();
});
.Questions{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Yes<button class="MyToggle" value="yes">Yes</button> <button class="MyToggle" value="no">No</button>
<div class="Questions">Questions?</div>
</div>
<div>
Yes<input type="radio" name="Q2" class="MyToggle" value="yes"/> No<input type="radio" name="Q2" class="MyToggle" value="no"/>
<div class="Questions">Questions?</div>
</div><div>
Yes<input type="radio" name="Q3" class="MyToggle" value="yes"/> No<input type="radio" name="Q3" class="MyToggle" value="no"/>
<div class="Questions">Questions?</div>
</div>
I hope this helps. Happy coding!
Looks like NewToJS beat me to the punch with the closest DIV, but instead we use a .each() to remove the active class from all buttons in the DIV before adding the active class only to the clicked button.
This example uses buttons instead of radio controls.
$('.yes-no').click(function(){
$(this).closest('div').find('.yes-no').each(function(){
$(this).removeClass('active');
});
$(this).addClass('active');
});
jsFiddle Demo
And when it comes time to sum up all the answers, you would do it this way:
$('#mybutt').click(function(){
var cnt = 0;
var obj = {};
$('.btn-group').each(function(){
cnt++;
obj[cnt] = $(this).find('.active').text();
});
alert( JSON.stringify(obj) );
});
jsFiddle Demo
You need to add a unique id or class for each button and link a click function for each button like this:
$('.btn-toggle').click(function() {
$(this).toggleClass('active');
console.log($(this));
});
$('.btn-toggle2').click(function() {
$(this).toggleClass('active');
console.log($(this));
});
$('.btn-toggle3').click(function() {
$(this).toggleClass('active');
console.log($(this));
});
$('.btn-toggle4').click(function() {
$(this).toggleClass('active');
console.log($(this));
});
Or you can group them together like this if they have a common function:
$('.btn-toggle', '.btn-toggle2', '.btn-toggle3', '.btn-toggle4') .click(function() {
$(this).toggleClass('active');
console.log($(this));
});
Related
I'm doing a custom checkbox variant, which uses hidden input elements. My problem is that normal checkboxes only post their value to the server, if the checkbox is checked. These custom checkboxes post values no matter what, so I have no way of knowing if the checkbox is actually checked or not, when reading the data server side.
Here is the fiddle I have used as an example
HTML:
<div class="row" id="checkboxes">
<div class="col-xs-12">
<div class="form-group">
<div class="col-md-6">
<input name="checkbox1" type="hidden" value="0"/>
<input name="checkbox2" type="hidden" value="0"/>
<input name="checkbox3" type="hidden" value="0"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$('.btn[data-checkbox-name]').click(function() {
$('input[name="'+$(this).data('checkboxName')+'"]').val(
$(this).hasClass('active') ? 0 : 1
);
});
Now, in this matter, it actually uses the value of the checkbox to signal if it is checked or not. I however, need an arbitrary number of checkboxes, and I need all of the checkboxes to be able to send a specific value, instead of a name and a 0/1. Yes it is possible for me to programmatically give the checkboxes names where my needed value is a part of the name, and then substring-interpret it server side, but I'd rather return them seperately, for overview and simplicity.
So here is my version of the code:
HTML:
<div class="row" id="checkboxes">
<div class="col-xs-12">
<div class="form-group">
<div class="col-md-6">
<input name="checkbox1" type="hidden" value="A" data-value="0"/>
<input name="checkbox2" type="hidden" value="B" data-value="0"/>
<input name="checkbox3" type="hidden" value="C" data-value="0"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$('.btn[data-checkbox-name]').click(function() {
$('input[name="'+$(this).data('checkboxName')+'"]').data("value",
$(this).hasClass('active') ? 0 : 1
);
});
I've pretty much just changed so that it uses data-value instead of value, to keep track of it's 0/1 state, which leaves value unchanged. But now I have no way of knowing if it is checked or not. Is there a way I can filter the results client side, before sending them, using the data-value as a filter value?
I'm already using JQuery, if that helps.
Let's assume we don't use AJAX, no need to overcomplicate things. As Paul stated, the general approach is to use standard checkboxes.
<div class="row" id="checkboxes">
<div class="col-xs-12">
<div class="form-group">
<div class="col-md-6">
<input name="checkbox1" type="checkbox" value="A" class="hide"/>
<input name="checkbox2" type="checkbox" value="B" class="hide"/>
<input name="checkbox3" type="checkbox" value="C" class="hide"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
</div>
</div>
</div>
</div>
</div>
And
$('.btn[data-checkbox-name]').click(function() {
$('input[name="'+$(this).data('checkboxName')+'"]').prop('checked',
!$(this).hasClass('active')
);
});
When the form is submitted the default behavior of the checkboxes is preserved: only the checked checkboxes will be sent.
Okay I understand that the JavaScript is not being applied to the entire group because each button is part of a different group, but the documentation says this is the proper way to use justified with the button tag. This would not be an issue except I need them to be justified.
So my question is: how am I supposed to use JavaScript on all three buttons as a whole? It should operate as a simple radio button group.
Click one and the others are unselected. Any advice would be great!
HTML:
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group">
<button type="button" class="btn btn-default">Low Cost/Effeciency</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default active">Average</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">High Cost/Effeciency</button>
</div>
</div>
JavaScript:
$(function() {
$('body').on('click', '.btn-group button', function (e) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
//other things I need to do
})
});
The button elements are not sibling elements.
You need to select the parent element's sibling elements.
Working Example Here
$(document).on('click', '.btn-group button', function (e) {
$(this).addClass('active').parent().siblings().find('button').removeClass('active');
});
However, the proper way to do this is to use the attribute data-toggle="buttons".
In doing so, you don't need to write any custom JS. For more information, see this old answer of mine explaining how it works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="btn-group btn-group-justified" data-toggle="buttons" role="group" aria-label="...">
<label class="btn btn-default">
<input type="radio" name="options" />Low Cost/Effeciency
</label>
<label class="btn btn-default">
<input type="radio" name="options" />Average
</label>
<label class="btn btn-default">
<input type="radio" name="options" />High Cost/Effeciency
</label>
</div>
I have a list of 5 questions with most having a yes or no response. I have them all hidden except for the first one. I am trying to figure out a way that once the question is answered it will then show the next one in order.I was hoping to use a switch statement to check the id of the parent div of the button that was clicked. I'm not sure how to check a parents ID from a jquery point of view, of if that's even the proper way to achieve my goal.
HTML
<div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-1">
<p><strong>1.</strong> ARE YOU OVER THE AGE OF 18?</p>
<input name="radio" type='hidden' value="Yes"/>
<div class="btn-group btn-toggle">
<button type="button" class="btn btn-default yes-no" data-radio-name="radio">Yes</button>
<button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-2">
<p><strong>2.</strong> HAVE YOU HAD SHINGLES?</p>
<input name="radio" type='hidden' value="Yes"/>
<div class="btn-group btn-toggle">
<button type="button" class="btn btn-default yes-no btn-1" data-radio-name="radio">Yes</button>
<button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
</div>
</div>
JS
$('.yes-no').click(function(){
$(this).closest('div').find('.yes-no').each(function(){
$(this).removeClass('active');
});
$(this).addClass('active');
$(this).val()=='yes'?$(this).closest('div').find('.sub-question').show():$(this).closest('div').find('.sub-question').hide();
// this is where I was trying to turn the next question visible.
console.log(this);
if(this == $("#q-1"))
{
questionArray[1].show();
}
});
You could simply use :
$("button").click(function() {
$(this).closest('.study-question').next().show();
});
See this Pen in action.
$(document).ready(function(){
var divs= $("div.study-question");
divs.hide();
$(divs[0]).show();
$('button.btn').click(function(){
var myParent=$(this).parents("div.study-question:first");
myParent.hide();
var nextSibling=myParent.next('div.study-question');
if(nextSibling.length>0){
nextSibling.show();
}else{
alert("End of Questions");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-1">
<p><strong>1.</strong> ARE YOU OVER THE AGE OF 18?</p>
<input name="radio" type='hidden' value="Yes"/>
<div class="btn-group btn-toggle">
<button type="button" class="btn btn-default yes-no" data-radio-name="radio">Yes</button>
<button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-2">
<p><strong>2.</strong> HAVE YOU HAD SHINGLES?</p>
<input name="radio" type='hidden' value="Yes"/>
<div class="btn-group btn-toggle">
<button type="button" class="btn btn-default yes-no btn-1" data-radio-name="radio">Yes</button>
<button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
</div>
</div>
</div>
I have a form of questions, most just YES or NO type responses. I have all the questions working and the YES NO toggle working on them as well. For some reason though when I get to question 3 and pick a choice it will add the active class to that button, but if I click anywhere else on the screen, it removed that active class. Not sure why it's doing this. Question 3 is also the first question with a sub question that appears if the user selects YES.
HTML:
<div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-2">
<p><strong>2.</strong> HAVE YOU HAD SHINGLES?</p>
<input name="radio" type='hidden' value="Yes"/>
<div class="btn-group btn-toggle">
<button type="button" class="btn btn-default yes-no btn-1" data-radio-name="radio">Yes</button>
<button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-3">
<p><strong>3.</strong> HAVE YOU HAD PAIN IN THE AREA OF THE SHINGLES RASH FOR AT LEAST THE LAST 3 MONTHS?</p>
<input name="radio" type='hidden' value="Yes"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="yes">Yes</button>
<button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="no">No</button>
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-2 study-question sub-question">
<p><strong>3A.</strong> IF IT HAS NOT YET BEEN 3 MONTHS, HOW LONG WOULD YOU ESTIMATE THIS PAIN HAS BEEN ONGOING?</p>
<input name="radio" type='hidden' value="Yes"/>
<input type="email" class="form-control study-form-control" id="how-many-year" placeholder="How long?">
</div>
</div>
</div>
</div>
JS:
$('.yes-no').click(function(){
$(this).closest('div').find('.yes-no').each(function(){
$(this).removeClass('active');
});
$(this).addClass('active');
$(this).val()=='yes'?$(this).closest('div').find('.sub-question').show():$(this).closest('div').find('.sub-question').hide();
});
In HTML - you forgot to add the class btn-toggle to the DIV parent of the second buttons group:
jsBin demo
jQuery:
$('.yes-no').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$(this).closest('div').find('.sub-question').toggle(this.value==='yes');
});
What I am trying to accomplish:
I am trying to make a form where when a user selects yes a div slides down, and when the user selects no the div slides up (thus making what is in that div invisible). and I want this to have a nice display (to look almost like a button in a group that can toggle and only one is able to toggle at a time such as a radio button) it should look more or less like this:
http://getbootstrap.com/components/#btn-groups
What my problem is:
When I toggle this button it will not fire a function.
Where it gets weird
I notice that when I don't set the data-toggle="buttons" I get radio buttons that have the little circle and fire the function, but when I set data-toggle="buttons" it will not fire the function.
Here is my form:
<form id="questionnaire">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="yes" name="vomit" />yes
</label>
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="no" name="vomit" />no
</label>
</div>
<div class="expand">
<h4>How many times?</h4>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
and the function I am trying to fire:
$('#questionnaire input[name=vomit]').on('change', function () {
var $p = $('.expand');
if ($('input[name=vomit]:checked').val() == "yes") {
//alert("hello");
$p.slideDown();
}
else {
//alert("nope");
$p.slideUp();
}
});
Can anyone please help me get the radio button to look like the bootstrap (and once selected they stay the color) one but that functions?
Thanks
I ended up using this switch here :
http://proto.io/freebies/onoff/
here is the html:
<h4>Did you Vomit?</h4>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="vomit" />
<label class="onoffswitch-label" for="vomit">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="expand">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
here is the jquery
$("#vomit").change(function () {
var $p = $('.expand');
if ($(this).is(':checked')) {//this is true if the switch is on
$(this).val("Yes");
$p.slideDown();
}
else {
$(this).val("No");
$("#numVomit").val(0);
$p.slideUp();
}
});
It seems like there was truly a conflict with jquery, bootstrap and jquery-ui. I will have to end up doing some code cleanup to see exactly where it is conflicting.