Develop Reference

How to click radio by clicking on div?

Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>

Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>

Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});

Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>

How to change input element's visibility through jquery?

For tag the below code is working fine, but for <input> isn't. Can you guide me how to solve it?
html:
<span id="toValue">AND</span>
<input id="toValue">
css:
#toValue {
visibility: hidden;
}
js:
$('#toValue').css("visibility", "visible");

Don't repeat the same id in the same page. Change it to a class:
.toValue {
visibility: hidden;
}
Html:
<span class="toValue">AND</span>
<input class="toValue">
Then:
$('.toValue').css("visibility", "visible");
Demo.
Or use different ids to each element:
<span class="toValue" id="mySpan">AND</span>
<input class="toValue" id="myInput">
Then:
$('#mySpan, #myInput').css("visibility", "visible");
Demo

ids must be unique for elements. the first element with that particular id will always be updated and the other discarded so either use the "class" attribute or change the ids

Id must be unique, Either you can also use class if you want to use common selector, here is demo of simple show and hide of your elements
function func1(){
$("#spanValue").hide();
$("#inputValue").hide();
}
function func2(){
$("#spanValue").show();
$("#inputValue").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spanValue">AND</span>
<input id="inputValue" type="text">
<input type="button" onClick="func1();" value="Hide">
<input type="button" onClick="func2();" value="Show">

Same ids to multiple elements in a single page makes an invalid markup and that is hard to work when you try using js with those elements.
For tag the below code is working fine, but for <input> isn't.
It is because:
Browser stops the lookup at first element found and don't go next to look for another one.
NOTE:- If you try check the length of your selector it would always return 1.
Solution to this is that you change the id to class attribute and the css as well:
.toValue {
visibility: hidden;
}
and
<span class="toValue">AND</span>
<input class="toValue">
in js:
$('.toValue').css("visibility", "visible");

Your markup is invalid: two elements with the same id. Use class instead:
HTML
<span class="toValue">AND</span>
<input class="toValue">
CSS:
.toValue {
visibility: hidden;
}

focusout on a input form and div

I'm trying to make a dropdown suggestion box.
In that case I wish to hide the box whenever the input field AND dropdown box is no longer in focus.
This is my HTML code:
<input type="text" id="user_address">
<div id="user_address_sg">SUGGESTION</div>
<div id="another element">Pressing another element on the page should hide the suggestion box</div>
I have tried the following:
$('[id=user_address][id=user_address_sg]').focusout(function (){
$('#user_address_sg').hide();
});
How come the user_address_sg doesn't hide whenever I select another input field or other elements on the page?
Images (1st: When I write a name, 2nd: When I select another form while suggestions appear)
First image: suggestion box should be displayed and clickable
Second image: When doing this the suggestion box should disappear

UPDATED: CSS alternative:
function suggest(key) {
document.getElementById('user_address').value = document.getElementById(key).innerHTML;
}
#user_address_sg {
vertical-align: top;
text-decoration: none;
display: none;
color:black;
}
#user_address_sg:focus, #user_address_sg:active {
display: inline-block;
color:black;
}
#user_address:focus ~ #user_address_sg {
display: inline-block;
}
<input type="text" id="user_address">
<a href=# id="user_address_sg">
<span id=a1 onClick="suggest('a1')">SUGGESTION 1</span><br>
<span id=a2 onClick="suggest('a2')">SUGGESTION 2</span><br>
<span id=a3 onClick="suggest('a3')">SUGGESTION 3</span><br>
<span id=a4 onClick="suggest('a4')">SUGGESTION 4</span>
</a>

You may need blur and separate the selectors with commas, because one single element with two different ids doesn't exist, but two different elements with different ids yes. So separate them:
$('[id=user_address],[id=user_address_sg]').blur(function (){
$('#user_address_sg').hide();
});
Better with on() method
$('[id=user_address],[id=user_address_sg]').on('blur', function (){
$('#user_address_sg').hide();
});
blur event will fire when a focused element loses the focus. So I think that's what you need.

When search input is :focus make the surrounding div black

On my site unbotttled.com
in the menu the surrounding div of the search form turns black when I hover over it. What I want is when the input field is clicked on or in focus I want the surrounding div to turn black even when I stop hovering. Any help would be appreciated greatly.

You can just use jQuery to find when it is in focus and set the background color to your liking:
HTML:
<div id="out"><form method="get" id="searchform" action="http://www.unbotttled.com/">
<input type="text" class="field" name="s" id="s" placeholder="">
</form>
</div>
jQuery:
$('.field').focus(function() {
$('#out').css('background-color','black');
});
fiddle: http://jsfiddle.net/yZhC3/

You will have to use javascript for this, as far as I know.
with jquery:
$search = $('.my-search-bar-input');
$search.on(':focus', function () {
$search.parent().addClass('.selected');
})
.on(':blur', function () {
$search.parent().removeClass('.selected);
});
and css:
.my-search-container.selected, .my-search-container:hover {
background-color: #333; // Your color
}
Something like that should work.

twitter bootstrap ".input-append" not work with popover

When I use input append and popover at the same time then popover not working, but when I remove the appended input (by removing the input-append class) then it works.
Here is my code:
<span class="input-append">
<button class="span2" id="filter" type="text" name="filter" placeholder="Type your filter">itest</button>
<button class="btn" id="filterSubmits">Go</button>
</span>
<script>
jQuery(function() {
$('#filter').attr('data-title', 'Search tips').
attr('data-content', 'Search format: -|+').
attr('data-placement', 'bottom').
attr('data-trigger', 'focus');
$('#filter').popover('show');
})
</script>
Is there something wrong here?

If you take a look at the css for input-append, you'd see that it sets font-size to 0. Adding the following style will fix your issue:
.popover {
font-size: 14px;
}