Develop Reference

Toggle CSS class depending on the radio button status

I'm working on a better user interface and I tried to achieve a way to visualize radio buttons. I got the following code to the point where the radio button input will be checked and the class highlightedBox added on color click.
How can I manage to toggle the class highlightedBox depending on the radio button status? Now toggle get triggered on click but this solution wont work if the user decides to deselect the color button by selecting another color.
I know the current status of the code only works for a single change per color. If you want to select the same color again the checked value wont be set. But this is another problem and I'll try to fix this later on.
$('#wireColorSelect #wireBox').click(function(){
var checkbox = $(this).parent().find(".cbox");
var wireDOM = $(this).parent().find("#wireBox");
checkbox.attr('checked', !checkbox.attr('checked'));
wireDOM.toggleClass('highlightedBox');
});
.wireBox{
border: 1px solid;
height:50px;
width:50px;
opacity: 0.5;
}
.white{
background-color: White;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.yellow{
background-color: yellow;
}
.highlightedBox {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wireColorSelect">
<div class="flex-row flex-xs-3">
<div class="flex-xs-3 no-padding">
<div id="wireBox" class=" white wireBox"></div>
<input class="cbox" type="radio" id="whiteWireBox" name="wireBox" value="whiteWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div id="wireBox" class="red wireBox"></div>
<input class="cbox" type="radio" id="redWireBox" name="wireBox" value="redWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div id="wireBox" class="yellow wireBox"></div>
<input class="cbox" type="radio" id="yellowWireBox" name="wireBox" value="yellowWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div id="wireBox" class="blue wireBox"></div>
<input class="cbox" type="radio" id="blueWireBox" name="wireBox" value="blueWireBox" />
</div>
</div>
</div>

You can use .not() to exclude element i.e : div which is not currently clicked by user and removeClass from them .
Demo Code :
$('#wireColorSelect .wireBox').click(function() {
var checkbox = $(this).parent().find(".cbox");
var wireDOM = $(this)
checkbox.prop('checked', checkbox.is(":checked") ? false : true);
wireDOM.toggleClass('highlightedBox');
//remove checked from other checkboxes
$(".cbox").not(checkbox).prop('checked', false);
//remove highlight class from other
$(".wireBox").not(wireDOM).removeClass("highlightedBox")
});
.wireBox {
border: 1px solid;
height: 50px;
width: 50px;
opacity: 0.5;
}
.white {
background-color: White;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.highlightedBox {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wireColorSelect">
<div class="flex-row flex-xs-3">
<div class="flex-xs-3 no-padding">
<div class=" white wireBox"></div>
<input class="cbox" type="radio" id="whiteWireBox" name="wireBox" value="whiteWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div class="red wireBox"></div>
<input class="cbox" type="radio" id="redWireBox" name="wireBox" value="redWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div class="yellow wireBox"></div>
<input class="cbox" type="radio" id="yellowWireBox" name="wireBox" value="yellowWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div class="blue wireBox"></div>
<input class="cbox" type="radio" id="blueWireBox" name="wireBox" value="blueWireBox" />
</div>
</div>
</div>

JQuery: Set focus on select when parent div is clicked

Struggling with a problem that seems like it must have an incredibly simple solution, but I can't figure out what I am doing wrong.
Scenario:
I have three div's of class .subblock. One has an input(text) inside, the other two have a select.
Goal:
When clicked on .subblock (div), focus on the input or select in it.
Code (that doesn't work for the selects):
HTML
<div id="homeinputs">
<form action="/listings/" method="GET">
<div class="subblock" style="border-radius: 4px 0px 0px 4px;">
<span>Where</span>
<input id="autocomplete" name="location" type="text" placeholder="Location">
</div>
<div class="subblock" style="margin-left: -4px; margin-right: -4px;">
<span>M<sup>2</sup></span>
<select name="squarems">
<option>All</option>
<option>+10m<sup>2</sup></option>
<option>+15m<sup>2</sup></option>
<option>+20m<sup>2</sup></option>
<option>+25m<sup>2</sup></option>
<option>+30m<sup>2</sup></option>
</select>
</div>
<div class="subblock" style="border-radius: 0px 4px 4px 0px; box-shadow: 0px 1px 2px lightgrey;">
<span>Price (€)</span>
<select name="pricings">
<option>All</option>
<option>450max.</option>
<option>500max.</option>
<option>550max.</option>
<option>600max.</option>
</select>
</div>
</div>
JS
$(document).ready( function() {
$('.subblock').click( function() {
$(this).find('input').focus();
});
$('.subblock').click( function() {
$(this).find('select').focus();
});
});

Please try this and tell me if it is what you want:
(When your select has focus, just press Space on your keyboard to open it or use your arrow keys to navigate in the available options...)
$(document).ready(function() {
$('.subblock').click(function() {
$(this).children().eq(1).focus();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus</title>
</head>
<body>
<div id="homeinputs">
<form action="/listings/" method="GET">
<div class="subblock" style="border-radius: 4px 0px 0px 4px;">
<span>Where</span>
<input id="autocomplete" name="location" type="text" placeholder="Location">
</div>
<div class="subblock" style="margin-left: -4px; margin-right: -4px;">
<span>M<sup>2</sup></span>
<select name="squarems">
<option>All</option>
<option>+10m<sup>2</sup></option>
<option>+15m<sup>2</sup></option>
<option>+20m<sup>2</sup></option>
<option>+25m<sup>2</sup></option>
<option>+30m<sup>2</sup></option>
</select>
</div>
<div class="subblock" style="border-radius: 0px 4px 4px 0px; box-shadow: 0px 1px 2px lightgrey;">
<span>Price (€)</span>
<select name="pricings">
<option>All</option>
<option>450max.</option>
<option>500max.</option>
<option>550max.</option>
<option>600max.</option>
</select>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>

jQuery and HTML - clicking on current div box id to display sub dvi box content

This is a my jQuery and HTML code.
my goal is when I click on the current box1, box2 or box3 , I want to display current sub box.
For example : when I click on current box1 should be open current sub_box_1, and so. I did some jQuery code but I can't get result.
Thanks!
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).$('#sub_box_1').show();
});
});
.box {
width: 150px;
height: 150px;
float: left;
margin-left: 20px;
border: 1px solid #333;
margin-top: 10px;
}
.sub_box {
width: 150px;
height: 150px;
border: 1px solid #09c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="wrapp">
<div id="1" class="box">
<b>Box 1</b>
<div id="sub_box_1" class="sub_box">
<input type="text" name="user_name" placeholder='User Name' />
<button>ADD</button>
</div>
<!--sub_box_1-->
</div>
<!--1-->
<div id="2" class="box">
<b>Box 2</b>
<div id="sub_box_2" class="sub_box">
<input type="text" name="user_email" placeholder='User Email' />
<button>ADD</button>
</div>
<!--sub_box_2-->
</div>
<!--2-->
<div id="3" class="box">
<b>Box 3</b>
<div id="sub_box_3" class="sub_box">
<input type="text" name="user_phone" placeholder='User Phone' />
<button>ADD</button>
</div>
<!--sub_box_3-->
</div>
<!--3-->
</div>
<!--wrapp-->
</body>
</html>

Try using this:
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).children('.sub_box').show();
});
});
jsfiddle example: https://jsfiddle.net/d6zf0n1b/

When you are using $(this).$('#sub_box_1'). you are trying to execute the $ function of the return of $(this). There is no $ function of $(this). Hence you are getting an error.
The other problem is that you are trying to access by the "#" accessor which matches the id not the class.
So this is why Andre's answer works. He is starting from the box that was clicked and looking for immediate children that have the class "sub_box".
One thing to keep in mind is that the children method will only search one level down from the parent. If the box could be deeper down, you should use the 'find' method.

You can use the jQuery find method (https://api.jquery.com/find/), which will find elements inside the the element matching the selector you use, try this:
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).find('.sub_box').show();
});
});
.box {
width: 150px;
height: 150px;
float: left;
margin-left: 20px;
border: 1px solid #333;
margin-top: 10px;
}
.sub_box {
width: 150px;
height: 150px;
border: 1px solid #09c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="wrapp">
<div id="1" class="box">
<b>Box 1</b>
<div id="sub_box_1" class="sub_box">
<input type="text" name="user_name" placeholder='User Name' />
<button>ADD</button>
</div>
<!--sub_box_1-->
</div>
<!--1-->
<div id="2" class="box">
<b>Box 2</b>
<div id="sub_box_2" class="sub_box">
<input type="text" name="user_email" placeholder='User Email' />
<button>ADD</button>
</div>
<!--sub_box_2-->
</div>
<!--2-->
<div id="3" class="box">
<b>Box 3</b>
<div id="sub_box_3" class="sub_box">
<input type="text" name="user_phone" placeholder='User Phone' />
<button>ADD</button>
</div>
<!--sub_box_3-->
</div>
<!--3-->
</div>
<!--wrapp-->
</body>
</html>

jquery run away submit button

I see a lot of code for run away buttons (like this one: Make a run away button in jQuery
but they only work with the <button> tag.
Below is a part of the form code I'm using. I want to have a run away submit button that works with <input type="submit">. Is that possible? And how to do this?
<div id="FSContact3" style="max-width:600px;margin:0 auto;background-color:none;padding: 5px 0 10px 5px;">
<form action="http://www.example.com/form" id="fscf_form3" onkeypress="return event.keyCode != 13;" method="post">
<div id="fscf_div_clear3_0" style="clear:both;">
<div id="fscf_div_field3_0" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_name3">Name:<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_name3" name="full_name" value="" />
</div>
</div>
</div>
<div id="fscf_submit_div3" style="text-align:left; padding-top:2px;">
<input type="submit" id="fscf_submit3" style="cursor:pointer; margin:0;" value="Submit" onclick="this.disabled=true; this.value='Submitting...'; this.form.submit();" />
</div>
</form>
</div>

$( "#fscf_submit_div3" ).mouseover(function() {
var numRand = Math.floor(Math.random()*501);
$( "#fscf_submit3" ).css({'top': numRand, 'left': numRand, 'position':'fixed'});
});
You meant something like that probably? You can make it change it position a bit more by changing number next to Math random.
https://jsfiddle.net/n3z1h647/1/

Events availability from the container to the child element

In the following code, I have a DIV parent container which has a SPAN container and the SPAN container containing the INPUT child elements.
When I click the gray area which is for the DIV, I see the 'I'm clicked!' message. I also see the same message when I click the white area of the SPAN or the input elements.
Shouldn't the SPAN container prevent the DIV container onclick event?
<div onclick="clicked()" style="padding: 20px; background-color: gray">
<span style="padding: 10px; background-color: white">
<label for="us">US</label>
<input type="radio" name="us" />
<label for="canada">Canada</label>
<input type="radio" name="canada" />
<label for="europe">Europe</label>
<input type="radio" name="europe" />
</span>
</div>
<script>
function clicked() {
alert("I'm clicked!");
}
</script>

Try this -
<div id="clickableDiv" style="padding: 20px; background-color: gray">
<span id='spanEle' style="padding: 10px; background-color: white">
<label class="input-area" for="us">US</label>
<input class="input-area" type="radio" name="us" />
<label class="input-area" for="canada">Canada</label>
<input class="input-area" type="radio" name="canada" />
<label class="input-area" for="europe">Europe</label>
<input class="input-area"`enter code here` type="radio" name="europe" />
</span>
</div>
<script>
$(document),ready(function(){
$("#clickableDiv").bind('click', function(e){
if(e.target.id != 'spanEle' && !$('#'+e.target.id).hasClass('input-area')){
alert("I am clicked!");
}
});
});
</script>