Develop Reference

How to alert the value using $this in jquery?

I have this code and i want to alert the value of "first div" when i click the button on the first object and "second div" when i click the button on the 2nd object. .
How will i do it ? thanks :)
$(document).ready(function(e) {
$('.clickme').click(function() {
var selected = $(this).closest('.rel-wrap').find('.my-div').text;
alert(selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="main-wrapper">
<div class="rel-wrap">
<input type="button" class="clickme" value="click me">
<div class="my-div">
first div
</div>
</div>
<div class="rel-wrap">
<input type="button" class="clickme" value="click me">
<div class="my-div">
second div
</div>
</div>

To get innerText of an element you need to use text() method, not the property
You can use next(), no need of traversing to the parent to get the interested element
Demo
$(document).ready(function(e) {
$('.clickme').click(function() {
var selected = $(this).next('.my-div').text();
alert(selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="main-wrapper">
<div class="rel-wrap">
<input type="button" class="clickme" value="click me">
<div class="my-div">
first div
</div>
</div>
<div class="rel-wrap">
<input type="button" class="clickme" value="click me">
<div class="my-div">
second div
</div>
</div>
</div>

JQuery change html content dynamically

I have a right sidebar that slides out and shows content. The sidebar can be opened from multiple buttons (button1, button2, button3, etc.) The content needs to be different in the sidebar when certain buttons are clicked? What is the most efficient way to do this? I tried using .html() but it overrides the styles. For example, if the content triggered by button1 is "Test" and button2 shows "Test2", if I click button1 again, it'll show "Test2". Is there a way to efficiently maintain consistency of data across each click event?

Try this code:
$("input").click(function() {
var value = this.getAttribute('data-dynamicContent');
document.getElementById('dynamicContent').innerHTML = value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" data-dynamicContent="This is your content" value="button one">
<input type="button" data-dynamicContent="This is your content 2" value="button two">
<input type="button" data-dynamicContent="This is your content 3" value="button three">
<div id="dynamicContent"></div>
Here is one that isn't as clean but offers better browser support:
$('input').click(function() {
document.getElementById('dynamicContent').innerHTML = this.name;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" name="your content one" value="button one">
<input type="button" name="your content two" value="button two">
<input type="button" name="your content three" value="button three">
<div id="dynamicContent"></div>
Here is one that has more code but has the best browser support:
$('input').click(function() {
document.getElementById('dynamicContent').innerHTML = this.nextElementSibling.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="button" value="button one">
<input type="hidden" value="your content one">
</div>
<div>
<input type="button" value="button two">
<input type="hidden" value="your content two">
</div>
<div>
<input type="button" value="button two">
<input type="hidden" value="your content three">
</div>
<div id="dynamicContent"></div>

see this example: http://jsfiddle.net/kevalbhatt18/2mmvjf9c/
$('button').click(function(){
console.log($(this)[0].innerText)
if($(this)[0].innerText === "button 1"){
$('span').html('test 1')
} else if($(this)[0].innerText === "button 2"){
$('span').html('test 2')
}else{
$('span').html('test 3')
}
})

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

issue with Collapsible Set on icon in JQuery mobile?

How can I do collapsible set on icon? This is my icon code.
<div id="custom-border-radius">
No text
</div>
On click of '+' icon i need to show and hidd list ( Send SMS and Send Mail), code is as follows,
<input type="submit" id="sms" data-inline="true" value="Send SMS">
<input type="submit" id="mail" data-inline="true" value="Send Mail">
How can i do that with collapsible concept. Is there other way, Any suggestions please

<div data-role="collapsible" id='collapsible1'>
<h4>Heading</h4>
<form>
<input type="button" data-inline="true" id='btn1' value="Input">
<div class="ui-input-btn ui-btn ui-btn-inline">
Enhanced
<input type="button" data-enhanced="true" id='btn2' value="Enhanced">
</div>
</form>
</div>
<script>
$('#btn1').click(function(){
alert("Btn 1 clicked");
document.getElementById('collapsible1').style.display = 'none';
});
$('#btn2').click(function(){
alert("Btn 2 clicked");
document.getElementById('collapsible1').style.display = 'none';
});
</script>
Edited to add disappearing behavior to the collapsible set
JFiddle is here (Demo)

Controlling jQuery tabs with a previous/next button

I am having quite a battle controlling tabs through a button click function. I want the user to go through tabs in order. Each tab has a different html form. So the buttons provide also a validation. But the main problem is the next & previous buttons are not functioning at all. How come the button is not changing tabs at all?
jQuery
<script type="text/javascript">
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
$(".backtab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected - 1);
});
</script>
HTML
<div id="convertThis">
<div id="tabs">
<div href="#a" rel="a" title="./images/icons/category1.png">Category 1</div>
<div href="#b" rel="b" title="./images/icons/category2.png">Category 2</div>
</div>
<div id="divs">
<div id="a">
<form action="" method="post">
CATEGORY 1 FORM CONTENT
<div class="tabController">
<div class="tabNext">
<input type="button" class="nexttab" value="Next >>" name="submit" id="submit" style="background: #EFEFEF; float:right;"/>
</div>
</div>
</form>
</div>
<div id="b">
<form action="" method="post" id="post2">
CATEGORY 2 FORM CONTENT
<div class="tabController">
<div class="tabBack">
<input type="button" class="backtab" value="<< Previous" name="submit2" id="submit2" style="background: #EFEFEF;"/>
</div>
<div class="tabNext">
<input type="button" class="nexttab" value="Next >>" name="submit" id="submit" style="background: #EFEFEF; float:right;"/>
</div>
</div>
</form>
</div>
</div>
</div>

Maybe because your buttons are of type "submit" and they force a refresh of the page? Try to change them to <input type="button" ... />
Also, get rid of the <a> tags around the buttons.
Use either a button <input type='button'> OR a link <a href='...'>text</a>, there's no point in having a link wrapping a button.