how to remove an element when textarea is empty? - javascript

I want to check if the textarea is empty and then remove the element prev() to it. How do I do so? My attempt was this:
if($(".inputs").val().length == 0){
$(this).prev().hide();
};
Do I have to check for "keypress"? The element I am trying to hide was show() after a "keypress" event. But I want to hide it immediately if the textarea is empty.
Edit: Question 2: I was using this code to show an element after first input:
$(".inputs").one("keypress", function(){
$(this).prev().show().addClass("animated slideInUp");
});
but now that I want to hide and show depending on the length of the textarea should I do something like this:
$(".inputs").on("input", function() {
if ($(".inputs").val().length == 0) {
$(this).prev().hide();
}
else if ($(".inputs").val().length == 1) {
$(this).prev().show().addClass("animated slideInUp");
}

If you want to hide the previous element when you delete content within the <textarea>, then .keyup is the way to go:
$(".inputs").on("input", function() {
if ($(".inputs").val().length == 0) {
$(this).prev().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">Hidden when all content is deleted, doesn't restore</div>
<textarea class="inputs"></textarea>
Keep in mind that this won't restore the previous element when you start typing again. If you'd like to do that, you'll need to extend the script a little to also .show() the previous element:
$(".inputs").on("input", function() {
if ($(".inputs").val().length == 0) {
$(this).prev().hide();
}
else {
$(this).prev().show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">Hidden when all content is deleted, restores</div>
<textarea class="inputs"></textarea>
Note that input is used over keyup in case the user edits the field without using the keyboard.
Hope this helps! :)

Related

add an alert if div is empty

I have this code and it works:
$(document).ready(function() {
$('#textDiv:empty').hide();
});
But I want to add a jquery function in case the div #textDiv is not empty. I want to add an alert if it is not empty. I tried this code without success.
$(document).ready(function(){
if ( $('#textDiv').text().length == 0 ){
alert ("please add players below");
}
});
What is the cleanest way to do this?
you need to use the text() text function to get the html/text inside the div
$(document).ready(function(){
if ($('#textDiv').text() == '') // Change the condition for emapty and not empty
{
alert ("please add players below");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textDiv"></div>
The result of the .text() method is a string containing the combined text of all matched elements. It is different from the .html() functions. Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.
You are better off with creating a function which checks if the div has any html or not and return true or false respectively.
(function($){
jQuery.fn.checkEmpty = function() {
return !$.trim(this.html()).length;
};
}(jQuery));
Use :
<div id="selector"></div>
On document ready, call this function with your div and it would alert according to the condition.
$(document).ready(function(){
if($("#selector").checkEmpty()){
alert("Empty");
}else{
alert("Not Empty");
}
});
You can use CSS Pseudo-Classes to access items in jQuery:
if ($('.textDiv:empty')) {
alert('First Empty');
}
if ($('.textDiv:not(:empty)')) {
alert ("Second not Empty\nplease add players below");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textDiv">Empty : No child elements</div>
<br>
<div class="textDiv">
<p>Not Empty : Has child elements</p>
</div>
Check length before hide else alert.
if ($('#textDiv:empty').length !== 0)
$('#textDiv:empty').hide();
else
alert ("please add players below");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textDiv">Test Contain For Alert</div>
Maybe like this:
$(document).ready(function(){
if (!$('#textDiv').text().length){
alert ("please add players below");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="textDiv"></div>

Replace class on clicking outside div

I have some javascript which essentially removes a class which has a background image on focus, i.e clicking in the input box (which has the background image).
The code is as follows:
$(function(){
$("#ets_gp_height").focus(function(){
if(!$(this).hasClass("minbox")) {
} else {
$(this).removeClass("minbox");
}
});
});
This works well, and removes .minbox when the user clicks within the input field, however what i want to do is if the user makes no changes to the input field, it should add the class back in as per at the beginning. At the moment, once the user clicks once, the class is gone for good, i would like it to come back if the user makes no changes to the input box, so for example clicks the input field but then clicks back out again without entering anything.
Any help? Possible?
I'm assuming you don't want the class .minBox to be added if the user has entered a value, but only if they decided not to enter anything, or chose to erase what they had entered.
To do this, you can use the blur event and check if there's anything entered:
$("#ets_gp_height").blur(function()=> {
if($(this).val().length < 1) $(this).addClass('minBox');
});
This will work for TABing out of the input and CLICKing out of it.
$(document).on("blur", "#ets_gp_height", function(){
if($(this).val() == '') {
$(this).addClass('minBox');
}
});
This code will add class 'minBox' when ever user goes out of input field without entering any value.
A working example, with and without jQuery:
Note: with onblur solution, method is called each time the field is blured, even when the value hasn't changed. with onchange solution, method is called only when the value has changed. That why onchange is a better solution.
WITHOUT JQUERY
function onChange(input){
input.value.length > 0 || setClassName(input, 'minbox') ;
}
function onFocus(input){
if(input.className == 'minbox')
{
input.className = '' ;
}
}
function setClassName(o, c){ o.className = c; }
input.minbox {background-color:red;}
<input type="text" id="ets_gp_height" class="minbox" onchange="onChange(this)" onfocus="onFocus(this)">
WITH JQUERY:
$(function(){
$("#ets_gp_height").change(function(){
$(this).val().length > 0 || $(this).addClass("minbox");
})
$("#ets_gp_height").focus(function(){
if(!$(this).hasClass("minbox")) {
} else {
$(this).removeClass("minbox");
}
});
});
input.minbox {background-color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ets_gp_height" class="minbox">

Perform one function at a time giving priority to one

I want to run a code.
function myfunc() {
$("div[id='zeus']")
.find('a')
.each(function() {
if ($(this)
.text() == "Hey Start") {
$(this)[0].click();
}
else if ($(this)
.text() == "Refresh") {
$(this)[0].click();
}
});
}
var fill= setInterval(myfunc, 2000)
I want the above code to run on a html page where it has 2 links,
1) Hey Start
2) Refresh
I want the code to press the "Refresh" link every 2 seconds(now "Hey Start" link is not present). Due to the clicking of Refresh link the "Hey Start" link appears. Now the problem is the above code is clicking both the links simultaneously from now on. I want to stop the "Refresh" clicking as soon as the "Hey Start" link appears.
Can it be done? Please show it.
If you have multiple elements to process, but need to execute only one based on option then you can
function myfunc() {
var array = ['Hey Start', 'Refresh'];
array.some(function(text) {
var $el = $("#zeus").find('a:contains("' + text + '")');
if ($el.length) {
$('#result').html('clicking on: ' + $el.text())
$el[0].click();
return true;
}
})
}
var fill = setInterval(myfunc, 2000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zeus">
<a>Refresh</a>
</div>
<button onclick="$('#zeus').append('<a>Hey Start</a>')">Start</button>
<button onclick="$('#zeus a:contains(\'Hey Start\')').remove()">Remove</button>
<div id="result"></div>
Since you want to process the anchor elements based on priority, you need to define one, since in your case it is based on the text content, here we are using an array which has an ordered list of texts based on its priority. So if there is an anchor with text which is in the array then that anchor will the processed before an anchor whose text comes after that.
The implementation here loops through the array and checks whether there is an anchor with the given text, if so then it triggers the click event of that element, and it returns true, so that none of the elements after the current item is processed(See Array.some())
It's because you're iterating about every a found in the #zeus...
So, if you clicked one link and you don't want to click another link you must jump outside the each-loop somehow.
Break it by returning false, like on the documentation page: http://api.jquery.com/jquery.each/ when some conditions are met. E.g. add data to one link or add a class.
Simple solution:
function myfunc() {
$("div[id='zeus']")
.find('a')
.each(function() {
if ($(this)
.text() == "Hey Start") {
$(this)[0].click();
return false;
}
else if ($(this)
.text() == "Refresh") {
$(this)[0].click();
return false;
}
});
}
var fill= setInterval(myfunc, 2000)

How to control check element from jquery dropdown button

I've used this jQuery dropdown button. This is my fiddle. This is the step of this:
So, the functionality:
At the time of selecting one option, a new box will appearing containing the title of that option. For example, if you click on the "Low" on the dropdown, a new box will come containing text, "Low" with a cross button.
I've written the script like this:
$('.low-option input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('#low-box').show();
} else {
$('#low-box').hide();
}
});
If you remove the boxes by clicking cross button, the box will be removed and adjacent checkbox will be unchecked.
So, I wrote this:
$('.option-box').on('click', '.cross', function() {
$(this).parent().remove();
});
if($('#low-box').is(":hidden")) {
$('.low-option input[type=checkbox]').prop('checked', false);
}
div.option-content is hidden at first. If any div.option-box will be visible, div.option-content will be visible too. If there is no div.option-box visible, div.option-content will be hidden always.
To do this, I wrote this:
var count = $('.option-content .option-box').is(":visible").length;
if (count > 0){
$('.option-content').show();
} else{
$('.option-content').hide();
}
But, my script is not working properly. As, I am not very good at jQuery, I can't find the reason and can't make it right way. Can you please help me removing the problem in the script?
Here I rewrite your code so it will become more scalable.. The important part that you missed is to relate/connect the checkbox with your option-box, so it will be easier for you to hide or show related element.. Check out this working Fiddle.
$('.dropdown-menu input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('.option-content').show();
$('.option-content #'+$(this).prop('id')).show();
} else {
$('.option-content #'+$(this).prop('id')).hide();
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
}
});
$('.option-box').on('click', '.cross', function() {
$('.dropdown-menu #'+$(this).parent().prop('id')).prop('checked', false);
$(this).parent().remove()
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
});
Cheers..

About jQuery append() and how to check if an element has been appended

I made a very simple button click event handler, I would like to have <p> element be appended when button clicked, you can check my code here:
<div id="wrapper">
<input id="search_btn" value="Search" type="button">
</div>
$("#search_btn").click(function(){
$("#wrapper").append("<p id='other'>I am here</p>");
});
I have two questions to ask:
1, why my .append() does not work as I expected (that's append the <p> element)
2. in jQuery, how to check if some element is already appended? For example how to check if <p id="other"> has already appended in my case?
-------------------- update -------------------------------------------
Please check my updated code here.
So, only the 2nd question remains...
You are using mootools and not jQuery.
To check if your element exists
if($('#other').length > 0)
So if you do not want to append the element twice:
$("#search_btn").click(function() {
if($('#other').length == 0) {
$("#wrapper").append("<p id='other'>I am here</p>");
}
});
Or, you can use the .one(function)[doc]:
$("#search_btn").one('click', function() {
$("#wrapper").append("<p id='other'>I am here</p>");
});
1) jsFiddle loads in MooTools by default, you need to include jQuery for this to work. There is not a reason in the world why that example wouldn't work. (Assuming that the $ is actually mapped to the jQuery object, that is.)
2) You can check the nextSibling of a DOMElement, or use the next() jQuery method, like so:
if(!$('#something').next().length) {
//no next sibling.
}
http://jsfiddle.net/j36ye/17/
$("#search_btn").click(function(){
if(($('#other').length) == 0) {
$("#wrapper").append("<p id='other'>I am here</p>");
}
return false
});
Or
var other_appended = false;
$("#search_btn").click(function(){
if(other_appended == false) {
$("#wrapper").append("<p id='other'>I am here</p>");
other_appended = true;
}
return false;
});
How to check if an element exists:
if($("p#other").length > 0) {
// a p element with id "other" exists
}
else {
// a p element with id "other" does not exist
}
check if element is already appended:
alert($(this).parent().length?'appended':'not appended');
Your fiddle is using the moo tools framework. Change it to use the jquery framework on the left and it works. See http://jsfiddle.net/KxGsj/

Categories