div show after input click event.i'm added toggle function when i'll click input field div will show but i stuck in when i click more time input field div will not toggle and more div will append
$(document).ready(function(){
$("#date_id").on("click", function(){
this.insertAdjacentHTML("afterEnd", "<div id='lbl_date'>test</div>");
});
$("#lbl_date").toggle();
});
#lbl_date{
position: relative;
background-color:#FFAA41;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="text" id="date_id" class="date"/>
<label for="lbl_date">date</label>
after i'm using $('').off() and $().one() this but again toggle div not working it's possible please help me
Expect when i'll click input field div will toggle
You do like following trick what you want.
$(document).ready(function(){
$("#date_id").one("click", function(){
this.insertAdjacentHTML("afterEnd", "<div id='div_date'>test</div>");
});
$("#date_id").on("click", function(){
$("#div_date").toggle();
});
});
#div_date{
position: relative;
background-color:#FFAA41;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="text" id="date_id" class="date"/>
<label for="lbl_date">date</label>
Note: id must be unique.
Related
I want to show a hidden div once a user click on a text input and remove the div that was displayed, but if the user click again on the text input I don't want the div that just got deleted to show up again.
I have tried this so far:
<div id="div1"> Have to be remove on click</div>
<div id="div2">Hidden on page load and show on click</div>
<input type="text" id="input" placeholder="click here" />
.
$(function(){
$("#div2").hide();
$("#div1").show();
$("#input").on("click", function(){
$(" #div2").toggle();
});
});
I think this below snippet solves your problem, please let me know if this helps you!
$(function(){
$("#div2").hide();
$("#div1").show();
$("#input").on("click", function(){
$("#div1").hide();
$(" #div2").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"> Have to be remove on click</div>
<div id="div2">Hidden on page load and show on click</div>
<input type="text" id="input" placeholder="click here" />
I want to show a hidden div once a user click on a text input and
remove the div that was displayed
Add a focus event to the input
$("#input").on("focus", function() {
$("#div1").remove(); //div1 is removed
$(" #div2").show(); //hidden div is shown
});
$("#input").on("blur", function() {
$(" #div2").hide(); //div2 is hidden again
});
Demo
$("#input").on("focus", function() {
$("#div1").remove(); //div1 is removed
$(" #div2").show(); //hidden div is shown
});
$("#input").on("blur", function() {
$(" #div2").hide(); //div2 is hidden again
});
#div2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"> Have to be remove on click</div>
<div id="div2">Hidden on page load and show on click</div>
<input type="text" id="input" placeholder="click here" />
$(document).ready(function(){
$("#input").click(function(){
$("#div1").toggle();
});
});
Don't make two buttons, one for hide and other one for show.
Make one button and use toggle().
Now that's all you need ... This will definitely work.
Read this it will help you
https://www.javatpoint.com/jquery-toggle
:)
I've got a button and text box, when you hover over the button the search box will appear using this piece of JavaScript/jquery:
$('#search-button').hover(function () {
$('#search-text').show();
}, function () {
$('#search-text').hide();
});
However at the moment once you hover over the button it will display the text box but as soon as you try to hover over the text box it will disappear. Is there a way to have the text box remain on the page when you hover over it too.
Here is a Fiddle to describe the problem
you don't need Jquery for this. A Css styling will do this for you!
By wrapping your content within an element, you can show/hide any (/all) elements within the wrapper. I've made a basic demo below:
please note the padding/background on the .search class are purely for demonstration, and can be edited/removed and still keep its functionality.
button {
display: none;
}
.search:hover button {
display: inline-block;
}
.search {
background: gray;
display: inline-block;
padding: 10px;
}
<div class="search">
<input type="text" placeholder="type here" />
<button>SEARCH</button>
</div>
If, however, you are forced to use Javascript/jquery, then I won't duplicate it here, but refer to chipChocolate.py's answer
A javascript solution to your problem. Check this jsfiddle link:
http://jsfiddle.net/ea45h80n/
$('.search').hover(function() {
$('#search-text').show();
}, function() {
$('#search-text').hide();
});
$('#search-text').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<button>SEARCH</button>
<input type="text" placeholder="type here" id='search-text' />
</div>
Attach the hover event to #search-button and #search-text.
$('#search-text').hide();
$('#search-button, #search-text').hover(function() {
$('#search-text').show();
}, function() {
$('#search-text').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search-text" type="text" /
><input id="search-button" type="button" value="Search" />
remove second function. which is onhoverout. use following:
$('#search-button').hover(function () {
$('#search-text').show();
});
This might Work
$('#search-text').hide(); //on DOM Load hide the element
$('#search-button').mouseover(function()
{
$('#search-text').show(); //When mouse enters the element, then show the textbox input
});
$('#search-button').hover(function () {
$('#search-text').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="search-button" value="search"/>
<input type="text" id="search-text" style="display:none;"/>
How can I add a "Clear field" button to multiple Bootstrap 3 input fields just using jQuery and a CSS class?
I've found solutions that can add a 'clear field' button to a field with a particular ID, but nothing so far that can do it by class. I've got a form with a lot of fields and I'd rather not have to repeat my code over again for each field.
I've tried this so far (Bootply), but I can't figure out how to get jQuery to clear just the one field and toggle the one icon, not all of them.
//JS
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(".searchclear").toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(".searchinput").val('').focus();
$(this).hide();
});
});
//HTML
<div class="btn-group">
<input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
<span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"> </span>
</div>
<div class="btn-group">
<input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
<span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>
</div>
//CSS
.searchinput {
width: 200px;
}
.searchclear {
position:absolute;
right:5px;
top:0;
bottom:0;
height:14px;
margin:auto;
font-size:14px;
cursor:pointer;
color:#ccc;
}
1) You can use $(this) to get a reference to the current targeted element
2) Use .next() to toggle the visibility for only the icon which is the next immediate sibling of input that you're currenlty key in
3) Use .prev() to clear only the input which is the immediate previous sibling of clear icon that is clicked:
Final code should look like:
$(document).ready(function () {
$(".searchinput").keyup(function () {
$(this).next().toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function () {
$(this).prev().val('').focus();
$(this).hide();
});
});
Bootply Demo
Try changing your javascript code to this:
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(this).parent().find('.searchclear').toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(this).parent().find('.searchinput').val('').focus();
$(this).hide();
});
});
Essentially what it does is add scope to the clear buttons so that it is limited to the sibling. There are other jQuery functions that might be more specific, but this should work.
http://www.bootply.com/130368
Another option would be to use .siblings() to make sure you are targeting just the siblings with the searchclear class.
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(this).siblings(".searchclear").toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(".searchinput").val('').focus();
$(this).hide();
});
});
http://www.bootply.com/130369
I am trying to hide div when user clicks on checkbox, and show it when user unchecks that checkbox.
HTML:
<div id="autoUpdate" class="autoUpdate">
content
</div>
jQuery:
<script>
$('#checkbox1').change(function(){
if (this.checked) {
$('#autoUpdate').fadeIn('slow');
}
else {
$('#autoUpdate').fadeOut('slow');
}
});
</script>
I am having a hard time to get this working.
Make sure to use the ready event.
Code:
$(document).ready(function(){
$('#checkbox1').change(function(){
if(this.checked)
$('#autoUpdate').fadeIn('slow');
else
$('#autoUpdate').fadeOut('slow');
});
});
HTML
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<div id="block">Some text here</div>
css
#block{display:none;background:#eef;padding:10px;text-align:center;}
javascript / jquery
$('#cbxShowHide').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000); //time for show
});
Here's my problem, I want an entire div to be click able, when clicked I need the radio button contained in the div to be checked, so the div acts as a radio itself. Here's what I thought I could use;
$('#content').click(function(e) {
$('input:radio[name="id_"]').prop('checked', true);
});
But this is not selecting the relative radio inside the div. I think I can use a this selector, am I right?
You don't give any code, so I guess:
DEMO
See my demo on CodePen
HTML
<div class="content">
<input type="radio" name="foo">
</div>
<div class="content">
<input type="radio" name="foo">
</div>
<div class="content">
<input type="radio" name="foo">
</div>
CSS (for example)
.content {
float: left;
width: 100px;
padding-top: 100px;
background-color: #eee;
margin-left: 10px;
}
JS (JQUERY)
$('.content').click(function(){
$(this).find('input[type=radio]').prop('checked', true);
})
Yes you can use the this selector. I have made a quick jsfiddle to show you an example.
This should do it.
$('input:radio[name*="id_"]'), assuming the name starts with id_
And yes you can use this. Use it to filter down its children like:
$(this).children('input:radio[name*=id_]').prop("checked", true)
The key is using name*=id_
This means select element whose name starts with id_. Isn't that what you wanted ?
$('#content').click(function(){
$(this).children('radio').attr('checked','checked')
})
building on Deif's solution this will toggle the checked status when clicking on the div
fiddle
<div id="content">
Some content
<input type="radio" id="radio1" value="test" />
</div>
<script type="text/javascript">
$('#content').click(function () {
var val = $(this).find('input:radio').prop('checked')?false:true;
$(this).find('input:radio').prop('checked', val);
});
</script>
Try with this:
$('div').click(function(){
if( $('div').find('input:checkbox').prop("checked") == true){
$('div').find('input:checkbox').prop("checked", false);
}
else{
$('div').find('input:checkbox').prop("checked", true);
}
});
LIVE DEMO