Javascript: How to hide div if Label inside is empty - javascript

I would like to hide the div with the class= "form-group" if the label inside doesn't have anything to display
here is my html code:
echo'<div class="form-group">';
echo'<label for="exampleInputFile" class="tbh">'.$query2['req_1'].'</label>';
echo'<input type="file" name="my_image" accept="image/*" id="exampleInputFile"> ';
echo'</div>';
And my javascript is here:
<script type="text/javascript">
if($('label.tbh:empty')){
$('div.form-group').hide();
}
</script>
Is there any other way to do that? In my code it doesn't seem to work.
Thanks in advance for the help.

Using .text() is a safer option. If the label is empty, .text() will return an empty string and negating it will give true. Refer to the interactive snippet with example below. I placed the relevant code in a button click handler to prove that it works after you click on it.
$('button').click(function () {
if (!$('.tbh').text()){
$('.form-group').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="exampleInputFile" class="tbh"></label>
<input type="file" name="my_image" accept="image/*" id="exampleInputFile"></div>
<button>Click to hide</button>

If you are using jQuery, you may do it by that way:
$("div.form-group label.tbh:empty").parent().hide();
It's a right way to do in inside document.ready callback:
$(document).ready(function(){
$("div.form-group label.tbh:empty").parent().hide()
});
To include jQuery, add
echo '<script src="https://code.jquery.com/jquery-3.1.1.js"></script>';
to head of your script.
But it seems like you are using PHP or something like at your backend side?
If so, you may do it on server-side code like this:
if(strlen($query2['req_1']) == 0)
{
echo'<div class="form-group">';
echo'<label for="exampleInputFile" class="tbh">'.$query2["req_1"].'</label>';
echo'<input type="file" name="my_image" accept="image/*" id="exampleInputFile"> ';
echo'</div>';
}
in this case you would not transfer unneeded data to the client.

Try this:
if($('label.tbh').html() == ""){
$('div.form-group').hide();
}

You can do it like this:
/* Be sure that your dom is loaded */
$( document ).ready(function() {
/* Checking that the label is empty */
if($("label").html().length == 0) {
$('div.form-group').hide();
}
});
You can also use size() instead of length.

Related

Add element to document and then remove it using Jquery

I am adding text to an element in Jquery using
$('.alert-saved').append('<br />See more like this >>')
I then show this to the user and pause.
$('.alert-saved').delay(5000).fadeOut(2000);
I would now like to remove all the text I appended.
I have tried this but it didn't work
$('.alert-saved').remove('<br />See more like this >>')
Just pass an empty HTML string argument:
$('.alert-saved').html('');
EDIT 1
If you need to keep other elements, you can use this method:
var newLine = jQuery('<br />See more like this');
jQuery(".alert-saved").append(newLine);
setTimeout(function() {
jQuery(newLine).remove();
}, 2000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="alert-saved">
<span>I wanna stay!</span>
</p>
Change your code to :
$('.alert-saved').append('<div id="divId"><br />See more like this >></div>');
And while removing you can use :
$('.alert-saved').remove('#divId');
With the help of divId you can easily remove your appended element/string from '.alert-saved'.
Check the below code it will work as expected -
$('.alert-saved').append('<div class="testing" <br />See more like this >> </div>')
$('.alert-saved').delay(5000).fadeOut(2000);
$('.alert-saved').remove('.testing')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="alert-saved"></div>
You could try this also :
$('.alert-saved').next().remove();
You can wrap your element in an tagged element with a class, or a custom tag, and then delete it accordingly like:
var release_id = 'demo'
$('.alert-saved').append('<div class="added"><br />See more like this >></div>')
setTimeout(function() {
$('.alert-saved>.added').remove();
}, 5000);
Demo: https://jsfiddle.net/Lxy83r43/
Whatever you append append with a class like this and remove all at once using .remove()
Checkout the demo below
$('.yes').click(function(){
$('.alert-saved').append('<div class ="added" ><br />See more like this >>');
})
$('.me').click(function(){
$('.added').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert-saved">
asdasdasdas
</div>
<input type="button" class="me" value="remove"/>
<input type="button" class="yes" value="add"/>
An easy way to do this work is adding class or id to appended element.
But if you don't want to do this, you can store new elements in variable and append it using .appendTo() to html document like this:
var HTML = $("<br><a>New link</a>");
$(HTML).appendTo('.alert-saved');
When you want to remove elements, use bottom code.
HTML.remove();
var HTML = $("<br><a>New link</a>");
$(HTML).appendTo('.alert-saved');
setTimeout(function(){
HTML.remove();
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert-saved">
<a>Old link</a>
</div>

How to show and close form on click of a div?

When a div is clicked I want to show a form, as done on this page. This is what I have tried (fiddle):
$(document).on("click","#tawkchat-minified-container",function() {
var htmldynamic = ' <form id="test" action="test.php">\
<div>\
Test: <input name="blah" value="test" type="text">\
</div>\
</form>'
$("#maximizeChat").html(htmldynamic);
});
I don't know if this is the right way to do it. Is there a better approach?
Adding large chunks of HTML as JavaScript variables is not good practice. It is easy to make errors in the HTML as you have to read it awkwardly embedded in the JS.
A better approach is to include the HTML code with the rest of your markup, but use CSS to hide it. Then you can just show it using JavaScript when it is pressed.
HTML:
<div id="my-form-container">
<div id="my-form-header">My form</div>
<form id="my-form" action="test.php">
<div>
Test: <input name="blah" value="test" type="text">
</div>
</form>
</div>
CSS:
#my-form {
display: none; /* This will hide the form. */
}
JavaScript:
//When the container is clicked...
$("#my-form-container").click(function() {
//...show the form.
$("#my-form").show();
});
Use this approach will definitely solve your problem
$(document).ready(function(){
$("#tawkchat-minified-agent-container").click(function()
var hlink = $("#test").val();
$("#test").click(function(){
$(".form").show()
});
});
});

How to make checkbox visible when main checkbox checked?

good morning guys,
I have 3 checkboxes created in php. one that i want to use as a controller
<p>
<?php $creates = array('name'=> 'single_obs_value','class' => 'singleobsyes','value'=> '1','style'=>' float: left; margin-right: 2px;'); ?>
<?=form_label('Single Observation : ');?>
<?=form_checkbox($creates);?>
<br>
</p>
And the other two are brought in from a database array variable.
<p>
<?php foreach($obsnames as $cp){ ?>
<?php $create = array('name'=> 'cms_permissions[]','class' => 'singleobs','value'=> $cp->id,'style'=>' float: left; margin-right: 10px;'); ?>
<span style="width:200px; float:left">
<?=form_checkbox($create ).' '.form_label($cp->field_name);?>
</span>
<?php } ?>
</p>
How do i first make the two brought in by the database invisible when the page loads. Then when the controller checkbox is ticked make the two checkboxes visible again. If possible with a jquery function that uses the class of the controller checkbox as such.
$('#singleobsyes').change(function(){
Rather than
$('input[type="checkbox"']
As i use other checkboxes on the page and i believe that may cause some conflict.
try this
$(document).ready(function(){
$('input[type="checkbox"]').not('.singleobsyes').hide();// hide all checkboxes other than controller
$('.singleobsyes').change(function(){
if($(this).is(':checked')
$('input[type="checkbox"]').not('.singleobsyes').show();
else
$('input[type="checkbox"]').not('.singleobsyes').hide();
});
});
update: see this fiddle
you can also do this with css selectors as
html
<input type="checkbox" class="singleobsyes" name="a"/>check to show others
<input type="checkbox" class="singleobs" name="b"/>
<input type="checkbox" class="singleobs" name="c"/>
css
.singleobs{
display:none;
}
.singleobsyes:checked ~ .singleobs{
display:block !important;
}
fiddle
you can use wrapper too
fiddle v2
To make the checkboxes invisible you can style="display:none"
Now you can put on the "main" check box an onchange="showem();" attribute.
function showem()
{
$('#checkbox1id').toggle();
$('#checkbox2id').toggle();
}
EDIT: Changes show to toogle
You can make it simple this way,
$(document).ready(function(){
$('input[type="checkbox"]').not('.singleobsyes').hide();
$('.singleobsyes').on("change", function(){
$('input[type="checkbox"]').not('.singleobsyes').toggle();
});
});

Multiple Summer note divs on one page

I am trying to get the code of a specific summer note div with multiple ones on a single page.
My summer notes are created from a database with php as follows:
<div class="tab-content">
<?php $i=-1; foreach($contents as $content): ?>
<?php $i++; ?>
<div class="tab-pane" id="<?php echo $content->contentName; ?>">
<div class="summernote" data-id="<?php echo $i; ?>">
<?php echo $content->content; ?>
</div>
</div>
<?php endforeach; ?>
</div>
And then my javascript is:
<script>
$('.summernote').summernote({
onblur: function(e) {
var id = $('.summernote').data('id');
var sHTML = $('.summernote').eq(id).code();
alert(sHTML);
}
});
</script>
It always gets the first $('.summernote').eq(0).code(); summernote code never the second or third one.
What I'm trying to do is when each summernote gets a blur, have that code update in a hidden textarea to submit back to the database.
(btw) I am initilizing the summer notes like this:
<script>
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
});
});
</script>
After selecting all summernote's you need to access their attributes by specifying one element like:
<script>
$('.summernote').each(function(i, obj) { $(obj).summernote({
onblur: function(e) {
var id = $(obj).data('id');
var sHTML = $(obj).code();
alert(sHTML);
}
});
});
</script>
To display multiple editors on a page, you need to place more than two <div> elements in HTML.
Example:
<div class="summernote">summernote 1</div>
<div class="summernote">summernote 2</div>
Then run summernote with jQuery selector.
$(document).ready(function() {
$('.summernote').summernote();
});
For more information click
Note: Multiple Editor summernote not work with id
I Finally got the code working for multiple summernote editors and image uploading!
To fix
"undefined"
, try:
var id = $(obj).data('id');
to
var id= $(obj).attr('id'))
Source:
https://github.com/neblina-software/balerocms-enterprise/blob/master/src/main/resources/static/js/app.js
Regards!
For anyone looking to use summernote to output multiple content with foreach, loop/repetitive statement etc
Summernote works for the first output only but you can make it work for others by using the class twice:
<div class"summernote summernote"> </div>
Provided your script is like this:
<script>
$(document).ready(function() {
$('.summernote').summernote();
});
</script>
if you are using summernote inside a textarea in a form and you intend to apply it on multiple textarea(s) on the same form, replace id=summernote with class="summernote"
Dont forget to do the same on your initialisation script
<script>
$('.summernote').summernote({
height: 200 //just specifies the height of the summernote textarea
});
</script>
Example
<textarea class="summernote" name="valueToBeExtractedBackend" required></textarea>
<script>
$('.summernote').summernote({
height: 200
});
</script>

Show/Hide a form in JavaScript

I'm trying to hide and show "form1". But even simply hiding doesn't work.
Where is the mistake?
<body>
<script type="text/javascript">
document.getElementById("F1").style.visibility = "hidden";
</script>
<form id="F1" name="form1">
<p class="style14">blah-blah
<input type="text" size="1" name="rd"> blah
</p>
</form>
</body>
Firstly you need to make sure your script tag is at the bottom of the body or use the DOMContentLoaded event
like so
document.addEventListener('DOMContentLoaded', function(){
var form = document.getElementById('F1');
form.style.visibility="hidden";
// OR
form.style.display = 'none';
});
Your F1 needs to be a string, right now you're referring to a undefined variable.
And I also recommend using display instead of visibility
#update to comment.
The opposites of them are
visibility: visible;
AND
display: block; // Or whatever
This line is wrong
document.getElementById(thediv).style.visibility="hidden";
What is "thediv" you should use :
document.getElementById("F1").style.visibility="hidden";
Try document.getElementById("F1").style.visibility=hidden;
F1 should be wrapped in quotes. You also might need to encompass your code within the onload function
window.onload = function(){
document.getElementById("F1").style.visibility = "hidden";
}

Categories