Hide button if text is empty on particular page structure - javascript

I have a page with such structure
<div id=0>
...
<textarea id=sometext></textarea>
...
<button class="coolbutton"></button>
...
...
</div>
<div id=1>
...
<textarea id=sometext></textarea>
...
<button class="coolbutton"></button>
...
...
</div>
<div id=2>
...
<textarea id=sometext></textarea>
...
<button class="coolbutton"></button>
...
...
</div>
I need to hide button only in the first div (id=0) when textarea in this div is empty. Please notice that only div ids differs. Ids of textareas are same. Buttons in other divs don't need to be hidden.
Please provide solution using js or asp.net mvc tools. Ask me if anything is unclear.

See my solution below. Since all of your buttons have the same id you can use childNodes to target the empty text area in the first div.
If the first textarea in div1 is empty then hide its second child which is the button.
The code snippet has comments for explanation.
//Declare div one using childNodes
var div1 = document.getElementById("0").childNodes;
//Target second child of div using index [1]
//The second child of the first div is the empty text area
if (div1[1].innerHTML === "") {
//If the text area is empty then hide the button
div1[3].style.display = "none";
}
<div id="0">
<textarea id="sometext"></textarea>
<button class="coolbutton">Click</button>
</div>
<div id="1">
<textarea id="sometext">some text</textarea>
<button class="coolbutton">Click</button>
</div>
<div id="2">
<textarea id="sometext">some text</textarea>
<button class="coolbutton">Click</button>
</div>

Related

Button Onclick only working on first element

When clicking button on elements, overlay box only works with first one, not the rest
I tried already to add 2 classes but not working as I read that that might be the issue, but I am not able to make it work properly.
<div class="container">
<input type="button" value="Contactar ahora" id="Overly" class="overly"
/>
</div>
<div id="ogrooModel" class="modalbox ogroobox" >
<div class="dialog">
<button title="Close" onClick="overlay()" class="closebutton" id="close">close</button>
<div style="min-height: 150px;">
</div>
</div>
</div>
<script>
//only javascript
document.getElementById("Overly").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display = 'block';
}) ;
document.getElementById("close").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display= 'none';
});
</script>
What exactly to change in that code so the rest of elements display the box after clicking on button?
You don't need onClick="overlay()" for your close button, as you are already binding it with a click event listener in your script.

jQuery select another element with certain class in same parent

let say i have this div
<div id='parent'>
<button id='button'></button>
<div id='child'>
<div id='grandchild' class='lookAtMe'>
Some JSON text
</div>
</div>
</div>
I wanted to give the #button an on click event that returned the text at #lookAtMe div, specific to the div whom it shares parent/grandparent (in this case, the #parent div)
I tried using:
$("#button").on("click",function(){
var ReturnedText = $(this).parent(".lookAtMe").text();
console.log(RetrunedText);
});
But the console log would retruned (empty string).
Where did i do wrong? please help. Thankyou very much.
Because there is n o parent with that class. You need find().
Actually you need to write
var ReturnedText = $(this).parent().find(".lookAtMe").text();
$("#button").on("click",function(){
var ReturnedText = $(this).parent().find(".lookAtMe").text();
console.log(ReturnedText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<button id='button'></button>
<div id='child'>
<div id='grandchild' class='lookAtMe'>
Some JSON text
</div>
</div>
</div>

How to dynamically append text to a modal?

I have this html
<div class="col-md-6">
<div class="jumbotron">
read more...
<div class="read-more hidden">
<p>1 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
read more...
<div class="read-more hidden">
<p>2 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
</div>
</div>
This is the section of the modal where I need to append the text within the element with the class read-more
<div class="modal-body">
<!-- TEXT FROM THE READ MORE CLASS ELEMENT NEEDS TO BE APPENDED HERE -->
</div>
And this the jQuery function I have so far where I am adding a data-attr for every element with the class read-more:
jQuery(document).ready(function($) {
var $readmore = $('.read-more');
var $readmoreParagraph = $('.read-more p');
$readmore.each(function(i, el) {
var $dataAttr = $(el).attr('data-attr', i);
});
});
To get this output:
<div class="read-more" data-attr="0">
<p>THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
TL;DR:
I need to append to the modal-body the text on the <p> under the div with the class read-more.
Any suggestions?
UPDATE
I did this:
$('#myModal .modal-body').append($("[data-attr="+i+"] > p"));
But as a result I am getting this in the modal-body:
1 - THE TEXT I NEED TO APPEND TO THE MODAL
2 - THE TEXT I NEED TO APPEND TO THE MODAL
Use the show.bs.modal event to change the contents of the body each time it is shown.
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget), // Button that triggered the modal
content = button.siblings('.read-more').html(),
modal = $(this);
modal.find('.modal-body').html(content);
});
See http://getbootstrap.com/javascript/#modals-related-target
From what I understood after the comments, I suggest the following:
After triggering the modal, get the content of the read-more you would like, and just use that text and place it at the modal (not appending, an append adds to the object).
Like this (example for the id 1):
$('#myModal .modal-body').html($("[data-attr=1] > p").text());

Show nonunique div class on button click jquery

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.

On Checkbox click show hide div having same class dynamically

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

Categories