I have three input fields for collecting telephone numbers from users. I display one field and hide the other two. I have placed a link(Add home number) below it and when you user clicks on the link it shows the hidden input field. And I have placed one more link below it when clicked displays the last input field.
<input type="text" />
<a href="#" class="show" >Add Home Number</a>
<div style="display: none">
<input type="text" />
<a href="#" class="show" >Add Office Number</a>
</div>
<div style="display: none">
<input type="text" />
</div>
And the jquery looks like this..
<script>
$(function(){
$(".show").click(function () {
$(this).next("div").show("slow");
});
});
</script>
The first link works fine, But the second one does not work.
I appreciate all help.
Thanks.
you have to use the each function:
like this:
$(".show").each($(this).click(function () {
$(this).next("div").show("slow");
})
);
.next() only selects the next sibling element. You links have no subsequent siblings, because you close the parent element (the div) immediately after. You need to select the next sibling of the div:
<script>
$(function(){
$(".show").click(function () {
$(this).parent().next("div").show("slow");
});
});
</script>
Related
I want to show the div class of .unhideme on a button press. This class is dynamically generated so there are multiple divs with the same class name. Using JQuery how do I show this block correctly?
<div id="negativeButtons">
<div class="unhideme" name="unhideme" style="display:none">
<h3>Comments</h3>
<textarea name="unhappymanager" id="unhappymanager"></textarea>
</div>
<input type="submit" class="excused" name="negativexcused" value="Excused">
<input type="button" class="unexcused" name="unexcused" value="Unexcused">
<input type="submit" class="commentpushDB" name="commentpushDB" style="display:none" value="Submit">
</div>
Here I have jquery which works for the other buttons but I can't seem to find a function that will show the div.
$(document).ready(function() {
$(".unexcused").click(function() {
$(this).closest(".unhideme").show();
$(this).closest(".unexcused").hide();
$(this).prev(".excused").hide();
$(this).next(".commentpushDB").show();
});
});
Instead you have to use .siblings() method:
$(".unexcused").click(function() {
$(this).siblings(".unhideme").show();
$(this).siblings(".unexcused").hide(); // <---- ?? why hide the buttons.
$(this).prev(".excused").hide();
$(this).next(".commentpushDB").show();
});
It's because the buttons and the div are siblings not parents.
I want click on the check box and hide the respective content.
Now in my code all the content with same class gets hidden when I click any one of the checkbox.
Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.
Fiddle link for reference
$('input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
$('.div1').hide();
} else {
$('.div1').show();
}
});
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<form>
<input type="checkbox">Exam1
<div class="div1">I am content1!
</div>
<br>
<input type="checkbox">Exam2
<div class="div1">I am content2!
</div>
<br>
<input type="checkbox">Exam3
<div class="div1">I am content3!
</div>
<br>
<input type="checkbox">Exam4
<div class="div1">I am content4!
</div>
<br>
</form>
https://jsfiddle.net/6ybp2tL6/
Is this possible??
Thanks in advance
Try this instead DEMO
$('input[type="checkbox"]').click(function() {
($(this).is(":checked")) ? $(this).next().hide() : $(this).next().show();
});
Try to hide all the divs with class div1 initially,
$(".div1").hide();
$('input[type="checkbox"]').click(function() {
$(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
});
And toggle the visibility of the relevant div element with class div1 by using next() and toggle()
DEMO
i have a form with two fields such as phone, email like below image.
when i click on the plus button , i want to append one extra text field in form below the button. and i want to remove the text field when clicking the minus button.
dynamically add the fields and set name for unique for that. i need these data to insert into table.
my html code is showed in below..
<div class="RegSpLeft"><input type="text" value="Phone"></div>
<div class="RegSpRight"> <img src="images/plus.png"> <img src="images/minus.png"> </div>
This might help you.
<div class="RegSpLeft" id="phone">
<input type="text" value="Phone">
</div>
<div class="RegSpRight">
<a href="#" class="pl">+
</a>
<br/>
<a href="#" class="mi">-
</a>
</div>
<script type="text/javascript" src="dist/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('a.pl').click(function(e) {
e.preventDefault();
$('#phone').append('<input type="text" value="Phone">');
});
$('a.mi').click(function (e) {
e.preventDefault();
if ($('#phone input').length > 1) {
$('#phone').children().last().remove();
}
});
});
</script>
I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span> element further down the page.
When <button id="people"> hasClass('user_view_active') the HTML link should display "People" when <button id="jobs"> hasClass('user_view_active') the HTML link should display "Jobs".
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view">Jobs</button>
<button id="people" class="user_view_active user_view">People</button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> People</span>
To replace the text within a link you can use the jQuery .text() function. This function can also get the text value and also set the text value - as is shown in the example below -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.
Okeydokey ?
Are you sure those are the right tags ?
<span class="right_title">Connection Suggestions</title>
Are you sure an <a> element inside a <button> element is a good idea?
<button id="jobs" class="user_view">Jobs</button>
role="main" is'nt a valid attribute, but will probably work anyway.
This just seems easier:
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
FIDDLE
Try this way:
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');
I have a bunch of smilies in a page, which on click has to be selected. I tried implementing a jquery based solution but am stuck at this stage, where multiple smilies are getting selected :
<div class="smiles_feed">
<input type="text" id="rating" value="" name="rating" class="displaynone" />
<div style="float:left;width:auto;text-align:Center;">
<button type="button" class="awesomesmile" class="unselected" value="Awesome" style="margin-bottom:0px;"></button>
<div class="smiletitle" style="font-size:9pt;color:white;">Yummy!</div>
</div>
<div style="float:left;width:auto;text-align:Center;">
<button type="button" class="goodsmile" class="unselected" value="Good" style="margin-bottom:0px;"></button>
<div class="smiletitle" style="font-size:9pt;color:white;">Good!</div>
</div>
<div style="float:left;width:auto;text-align:Center;">
<button type="button" class="okaysmile" class="unselected" value="Okay" style="margin-bottom:0px;"></button>
<div class="smiletitle" style="font-size:9pt;color:white;">Okay!</div>
</div>
<div style="float:left;width:auto;text-align:Center;">
<button type="button" class="yucksmile" class="unselected" value="Yuck" style="margin-bottom:0px;"></button>
<div class="smiletitle" style="font-size:9pt;color:white;">Yuck!</div>
</div>
</div>
<script type='text/javascript'>
$(function(){
// Smile Click Function
$('div.smiles_feed :button').click(function(){
$(this).removeClass('unselected').addClass('selected');
$(this).siblings().removeClass('selected').addClass('unselected');
$('#rating').val($(this).val());
//alert($('#rating').val());
});
});
</script>
What am I doing wrong? How do I change the javascript function to make it select only one smiley?
$(this) inside your click() function refers to the button that was clicked, not the div that was clicked. You need to add the selected class to $(this).parent().
The elements returned by siblings() are not the divs that represent other smileys, but rather are other elements of this smiley (in this case, div.smiletitle).
To get a list of the other smileys, you should be looking at $(this).parent().siblings().
If your button is what represents the smiley, then you should be traversing other smileys like this:
$(this).parent().siblings().children('button')
and making them each get deselected:
$(this).parent().siblings().children('button').each(function(){
$(this).removeClass('selected')
.addClass('deselected');
});