How to hide div class using JavaScript while textbox is filled?
I want to hide class loadData while textbox(t1) is filled.
Example code:
<input type="text" name="t1" placeholder="search">
<div class="loadData">
// some content here....
</div>
window.onload = function () {
elements = document.getElementsByName("t1");
var divs = document.getElementsByClassName("loadData");
elements.onblur = function() { divs.style.visibility="hidden"; };
};
Use jQuery. Check the value of text field on keyup event and perform operation accordingly.
$('input[type="text"]').on('keyup', function() {
($.trim($(this).val()) != '') ? $('.loadData').hide() : $('.loadData').show();
})
FIDDLE
User jQuery's blur function.
<script>
$(function(){
$("[name=t1]").blur(function(){
if ($(this).val() == '') {
$(".loadData").hide();
}
});
})
</script>
Explanation:
You are calling a function on blur event of textbox.
It means user has filled the textbox and want to leave textbox.
In this function body, hide the div with class loadData.
add onblur="showdiv()" to input box and add this function in your javascript
function showdiv()
{
var a=document.getElementsByClassName('loadData');
a[0].style.visibility='hidden';
}
Related
When I change my button toggle from ID-Name to Class-Name, the function is not working anymore. Does anyone know why?
I need a class since this button is multiple times on the page and loads in separately via css and sliders. The function and content is still the same.
$(document).ready(function(){
$('.infoBtn').on('click', function () {
var text=$('.infoBtn').text();
if(text === "info"){
$(this).html('close');
} else{
$(this).text('info');
}
});
});
The issue is your use of selector inside the click event:
$('.infoBtn').text();
Pointy:
Your code should use $(this), not $('.infoBtn') inside the handler.
What you have now will get the text only from the first one on the
page.
If you change that to $(this), it should work as required:
$(this).text();
$(document).ready(function(){
$('.infoBtn').on('click', function(){
//REM: Use $(this) and not $('.infoBtn')!
let text = $(this).text();
$(this).text((text === 'info') ? 'close' : 'info')
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class = 'infoBtn'>initial</button>
<button class = 'infoBtn'>initial</button>
I'm making ajax suggestion of search in which,
a suggestion box will be displayed
<div id="searchbox">
<input type="text" name="search" class="searchinput"/>
</div>
<div id="sugbox">
......
<a href="product.php?id=2" >Item 1</a>
.....
</div>
and Javascript
$('#searchbox .searchinput').focus(
function () {
$('#searchbox #sugbox').show();
});
$('#searchbox .searchinput').focusout(
function () {
$('#searchbox #sugbox').hide();
});
The suggestion box will open if the search textbox #searchbox .searchinput is focus and hide if focusout.
Problem : whenever i'm clicking the link on suggestion box, the suggestion box hides (because of input focusout event).
How can i check if the target div is the suggestion box so don't hide the box
ex ..
$('#searchbox .searchinput').focusout(
function () {
if(target div is not sugbox)
$('#searchbox #sugbox').hide();
});
try to assign a class to sugbox at hover class
$(".searchinput").focus(function(){
$("#sugbox").show();
});
$(".searchinput").focusout(function(){
if(!$("#sugbox").hasClass("hovered"))
$("#sugbox").hide();
});
$("#sugbox").hover(function(){
$(this).addClass("hovered");
},function(){
$(this).removeClass("hovered");
});
here is example at jsfiddle : http://jsfiddle.net/kyawlay/9wg49L2b/5
add a mousedown handler (triggerd before focusout/blur I think) on the box also, set a flag to true when clicked, then check this flag before hidding
var boxClicked = false;
$('#mainsearch .searchinput').mousedown(// listen click handler
function () { boxClicked = true;});
$(document).mousedown(// reset boxclicked
function () { boxClicked = false;});
$('#searchbox .searchinput').focus(
function () {
$('#searchbox #sugbox').show();
});
$('#mainsearch .searchinput').focusout(
function () {
if(!boxClicked) $('#mainsearch #sugbox').hide();// add condition
});
You are using wrong selector. Check this demo. http://jsfiddle.net/m711LLwr/
$('#searchbox #sugbox').show();
Should be
$('#mainsearch #sugbox').show();
Try this, What it does is when searchinput loses focus then if sugbox has no class 'NoHide', then hide it.
On body on click event, the NoHide class is assigned to sugbox if click target is not searchinput and not sugbox and not sugbox anchor.
If event target is not in above 3 mentioned selectors then remove class NoHide. I have a fiddle but I want you to try in your page as fiddle will confuse you( as it has iframe and body area of fiddle is limited).
$('#searchbox .searchinput').focus(
function () {
$('#sugbox').show();
});
$('#searchbox .searchinput').focusout(
function (event) {
if(!$('#sugbox').hasClass('NoHide'))
$('#sugbox').hide();
});
$('body').on('click',
function (event) {
if(!$(event.target).is(".searchinput") && !$(event.target).is("#sugbox a") && !$(event.target).is("#sugbox")){
$("#sugbox").hide().removeClass('NoHide');
}else
{
$("#sugbox").show().addClass('NoHide');
}
});
I want that if i click on the image, then the box display in the input field using $('.daterangepicker').show();.
On onclick:
onclick="OpenDatePicker('DateAge')
Markup:
<span class="DateLabelImage" style="cursor: pointer" onclick="OpenDatePicker('DateAge')"><img class="calendarImage" src="../../img/StatImg.png"></span>
<input type="text" id="DateAge" placeholder="Click to open Date Box" class="AgeChangeInput range"/>
Script:
<!-- Call datepicker through image button -->
<script>
function OpenDatePicker(DatePicker)
{
var classIt = '.' + DatePicker;
alert(classIt);
// Click on any Input Field.
$(classIt).on('click', function()
{
alert('Good');
// Show Box on click Date.
$('.daterangepicker').show();
});
}
</script>
I tried using:
.on('click', function()
but this is not working as i am not clicking on the input field instead i am clicking on the image.
http://jsfiddle.net/vikramjakkampudi/9NMgT/1/
function OpenDatePicker(DatPicke)
{
var classIt = '#' + DatPicke;
alert(classIt);
// Click on any Input Field.
$(classIt).on('click', function()
{
alert('Good');
// Show Box on click Date.
// $('.daterangepicker').show();
$('.ui-datepicker-div').show();
});
}
click event should bind in ready or document.ready function .
another thing is 'DateAge' is an id not a class so you should call by '#' not '.'.
I thing following will work.
$(document).ready(function () {
$("#DateAge").click(function () {
alert('Good');
$('.daterangepicker').show();
});
});
I think it should be # instead of a .. Secondly I can't find .daterangepicker in the markup. I did the change as I mentioned. Here is the link
http://jsbin.com/feyunagi/1/edit
I facing problem with my jquery, on showing input text based on input value.
Here is the JS fiddle demo :
http://jsfiddle.net/Ltapp/364/
When I try to input #hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.
JS code :
$(window).load(function(){
var myString = '#hotmail';
$('#hotm').hide();
$("input").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
});
It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here
$("input:first").keyup(function () {
var value = $(this).val();
if(value.match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
As many has said, you are binding the event on all the inputs I did a little change:
$(function(){
var myString = /#hotmail/ig;
$("#check").bind('keyup checkvalue', function() {
$('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
}).trigger('checkvalue');
});
using regex if you are using #HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.
demo: http://jsfiddle.net/voigtan/xjwvT/1/
You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.
See JSFiddle Here:
http://jsfiddle.net/Ltapp/366/
<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>
var myString = '#hotmail';
$('#secondinput').hide();
$("#firstinput").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#secondinput').show();
} else {
$('#secondinput').hide();
}
});
use this for your if part :
if($(this).val().match($(this).val().substr(0,strlen($(this).val())))
it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide
<input id="hotmail" type="text"/>
and then
$("#hotmail").keyup(function () {...});
I'm having trouble to convert all lower case to upper case in a text box:
<body>
<input type="text" id="input_1" class="allcaps"/>
<input type="text" id="input_2" class="allcaps"/>
</body>
$(document).ready(function () {
//trigger ng event
$('.alcaps').live("keyup", function () {
var fin = $('.alcaps').val();
$('.alcaps').val(fin.toUpperCase());
});
});
The first input box transforms its contents to capitals, but the text I put in the first box is also copied to the second input...
When using the class as selector you're selecting all input boxes with that class and setting the value to the same as the first one. Use the this keyword to target only the current textbox :
$(document).ready(function() {
$(document).on('keyup', '.alcaps', function() {
var fin = this.value;
this.value = fin.toUpperCase();
});
});
FIDDLE
You can use this which refers to your current input, also note than live is deprecated, you can use on instead:
$(document).on("keyup", ".alcaps", function () {
this.value = this.value.toUpperCase()
});
User this inside the handler:
$('.alcaps').live("keyup", function () {
var fin = $(this).val();
$(this).val(fin.toUpperCase());
});