Develop Reference

jquery form field write issue

I am updating hidden field in form with jquery. it works just fine for first three clicks after that it shows only first element value.
Here is working js fiddle jsfiddle link:
when users is clicking on tab the value of fileorurl changes to 1,2 or 3. it works for first 3-5 click but after that the value stocks to only 1. here is html
<div class="container" id="upload">
<div class="row">
<form id="upload-form2"
action="http://way2enjoy.com/modules/compress-png/converturl16.php"
name="arjun"
method="post"
enctype="multipart/form-data">
<div id="tab" class="btn-group" data-toggle="buttons">
<a href="#fileuu" class="btn btn-default active" data-toggle="tab">
<input type="radio" class="changev" value="1">File Upload
</a>
<a href="#urluu" class="btn btn-default" data-toggle="tab">
<input type="radio" class="changev" value="2">URL upload
</a>
<a href="#linkuu" class="btn btn-default" data-toggle="tab">
<input type="radio" class="changev" value="3">Website Link
</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="fileuu">
<label for="comment">Click below to choose files:</label>
<input type="file" name="file[]" multiple id="input" class="file_input">
</div>
<div class="tab-pane" id="urluu">
<label for="comment">Image Urls to Compress:</label>
<textarea class="form-control" rows="2" name="urls" id="urls"></textarea>
</div>
<div class="tab-pane" id="linkuu">
<label for="comment">Website URL to Analyze:</label>
<textarea class="form-control" rows="2" name="file[]" id="urls"></textarea>
</div>
</div>
<div class="alert alert-warning" role="alert" id="loading_progress"></div>
<br>
<input type="submit"
value="Compress »"
class="btn btn-primary btn-lg pull-right"
id="upload_btn"
name="upload_btn">
<input type="hidden" name="fileorurl" id="myField" value="">
</form>
</div>
</div>
Here is javascript:
<script>
$('.changev').change(function () {
var valueuu = $(this).val();
$("#myField").val(valueuu);
});
</script>
Any help will be useful thanks!

Your checkboxes not updating for some strange reason after a few clicks. You can use the click event on their parents instead:
$('#tab a').on('click', function(){
var valueuu = $(this).find('input').val();
$("#myField").val(valueuu);
});
Fiddle

I would personally use a custom attribute for that and listen to Bootstrap events. The default value of the input is 1, because that will be the first active tab.
$(document).on('shown.bs.tab', '#tab > a', function(e) {
var dataType = $(e.target).attr('data-type');
$("#myField").val(dataType);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="upload">
<div class="row">
<form id="upload-form2" action="http://way2enjoy.com/modules/compress-png/converturl16.php" name="arjun" method="post" enctype="multipart/form-data">
<div id="tab" class="btn-group" data-toggle="buttons">
File Upload
URL upload
Website Link
</div>
<div class="tab-content">
<div class="tab-pane active" id="fileuu">
<label for="comment">Click below to choose files:</label>
<input type="file" name="file[]" multiple id="input" class="file_input">
</div>
<div class="tab-pane" id="urluu">
<label for="comment">Image Urls to Compress:</label>
<textarea class="form-control" rows="2" name="urls" id="urls"></textarea>
</div>
<div class="tab-pane" id="linkuu">
<label for="comment">Website URL to Analyze:</label>
<textarea class="form-control" rows="2" name="file[]" id="urls"></textarea>
</div>
</div>
<div class="alert alert-warning" role="alert" id="loading_progress"></div>
<br>
<input type="submit" value="Compress »" class="btn btn-primary btn-lg pull-right" id="upload_btn" name="upload_btn">
<input type="text" name="fileorurl" id="myField" value="1">
</form>
</div>
</div>
Fiddle here: https://jsfiddle.net/zyynnzm9/3/

Found it ^^ your radio buttons are getting checked but they aren't getting unchecked so they aren't canceling each other .. because they aren't in the same radio group
You have to put them in a radio group by adding the name attribute with equal value to each

How can I filter out which hidden form input types are posted?

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.

How to apply JavaScript to bootstrap btn-group-justified to select/unselect the children button elements

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>

5 user inputs for a survey, all hidden and then revealed after that last input is answered

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>

Toggle Yes / NO with multiple questions

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));
});