Develop Reference

Hide certain inputs and show others using a switch button in jQuery

Hello Stackoverflow community, hope that you're doing well, what I'm trying to do is when I click the switch button I want it to hide certain inputs and show others, my code is a form to add students and teachers, since there are cummon inputs I tought about hide the uncummon one when I press the switch button and when I click it again do the opposite but all of that seem to be failed, I can only hide some and when I click it again it won't work, here what I did:
The Jquery code:
$(document).ready(function(){
$('.teacher').hide();
$('.switch').click(function(){
$('.student').hide();
$('.teacher').show();
});
});
The HTML code:
<label>Student </label>
<label class="switch">
<input type="checkbox" id="switchVal" value="0">
<span class="slider"></span>
</label>
<label> Teacher</label>

$('.teacher').hide();
$('.switch').click(function() {
$('.student').toggle();
$('.teacher').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='student'>Student</div>
<div class="switch">
<input type="checkbox" id="switchVal" value="0">
<span class="slider"></span>
</div>
<div class='teacher'>Teacher</div>

Use $(".teacher, .student").toggle();
Or, if needed, for more granular control you could always get the current checkbox state using
const isChecked = this.checked; // boolean`
Example:
jQuery($ => {
$(".teacher").hide();
$("#switchVal").on("input", function() {
$(".teacher, .student").toggle();
});
});
.toggler {
display: inline-flex;
gap: 0 5px;
cursor: pointer;
}
.toggler-checkbox {
display: inline-block;
width: 35px;
height: 15px;
background: #444;
border-radius: 1.2em;
}
.toggler-checkbox::before {
content: "";
position: relative;
display: inline-block;
width: 15px;
height: 15px;
background: #0bf;
border-radius: 1em;
transition: transform 0.3s;
}
.toggler input:checked ~ .toggler-checkbox::before {
transform: translateX(20px);
}
.toggler-label {
user-select: none;
}
.toggler-label:nth-of-type(1) {
order: -1;
color: #0bf;
}
.toggler input:checked ~ .toggler-label:nth-of-type(1) {
color: inherit;
}
.toggler input:checked ~ .toggler-label:nth-of-type(2) {
color: #0bf;
}
<label class="toggler">
<input type="checkbox" id="switchVal" value="0" hidden>
<span class="toggler-checkbox"></span>
<b class="toggler-label">Student</b>
<b class="toggler-label">Teacher</b>
</label>
<ul>
<li class="student">Student: Anna</li>
<li class="student">Student: John</li>
<li class="teacher">Teacher: Mark</li>
<li class="student">Student: Tara</li>
<li class="teacher">Teacher: Zack</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Remove the default checked value in radio button and replace it with the another radio button that is click

I just want to change the default check value in radio button to what is the user selected value.Because whenever i try it still display in console log the default checked and not the one who is check. i want to change default checked to what user selected in HTML. Can anyone help me? im just really a newbie. Any help would be appreciated. Thank you.Here is the code.
CSS:
html,
body {
font: 400 small-caps 16px/1.25 Arial;
}
fieldset {
width: fit-content;
padding: 0;
}
legend {
font-size: 1rem
}
details {
width: 150px;
cursor: pointer;
margin: 0 4px -5px 0;
padding: 0 0 0 10px;
}
summary {
position: relative;
width: 96%;
outline: 0.5px ridge grey;
}
/*
Hides <detail>'s default arrow
*/
details summary::-webkit-details-marker {
visibility: hidden;
position: absolute;
z-index: -1;
}
/*| Pseudo-<option>
All pseudo-<option> are initially hidden and
<label class='opt'> are the only tags that will show/hide,
the next comment explains how.
*/
.rad {
display: none
}
.opt {
display: none;
margin: 0 0 2px 0;
cursor: pointer;
font-size: 0.9rem;
box-shadow: -2px -2px 11px rgba(0, 0, 0, 0.3) inset;
}
/*| Two Conditions
1. If <details open='true'> all <label class='opt'> are visible.
=============================================
2. if <input class='rad' type='radio' checked> then the
<label class='opt'> that proceeds the radio button is visible.
*/
[open] .opt,
.rad:checked+.opt {
display: block;
}
/*| For Demonstration Purposes
This ruleset changes how the console is displayed.
*/
.as-console-wrapper {
width: 50%;
min-height: 100%;
margin-left: 50%;
font-variant: normal;
}
.as-console-row.as-console-row::after {
content: '';
padding: 0;
margin: 0;
border: 0;
width: 0;
}
</style>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom select box Jquery Plugin by VJ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<!--| Flag Icons
This stylesheet provides the flag icons.
For details, go to:
https://afeld.github.io/emoji-css/
-->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" />
</head>
<body>
<form id="container">
<fieldset>
<legend>Country</legend>
<!--| Pseudo-<select>
<details> provides the dropdown behavior and
<summary> contains the pseudo-<option>
-->
<details>
<summary>
<!--| 4 Pseudo-<option>
Each <label> and <input type='radio'> pair are
synced to each other by matching the values of
<label for="ID"> and <input id="ID">.
-->
<!--| Trigger and State
When <label> is clicked ... <input type='radio'>
is checked. This simple "cause and effect" can
be leveraged into a system of states (ie off/on).
For details, review the CSS.
-->
<input id='X' type='radio' class='rad' name='rad' value="" checked>
<label class='opt' for='X'>
<i class='em em-us'></i>
United States
</label>
<input id='US' type='radio' class='rad' name='rad' value="United States">
<label class='opt' for='US'>
<i class='em em-us'></i>
United States
</label>
<input id='GB' type='radio' class='rad' name='rad' value="Great Britain">
<label class='opt' for='GB'>
<i class='em em-gb'></i>
Great Britain
</label>
<input id='IN' type='radio' class='rad' name='rad' value="India">
<label class='opt' for='IN'>
<i class='em em-flag-in'></i>
India
</label>
<input id='NP' type='radio' class='rad' name='rad' value="Nepal">
<label class='opt' for='NP'>
<i class='em em-flag-np'></i>
Nepal
</label>
</summary>
</details>
</fieldset>
</form>
</body>
</html>
JAVASCRIPT
<script type="text/javascript">
var xC = document.forms.container;
var xE = xC.elements;
var vR = xE.rad;
xC.onchange = function() {
// console.log(vR.value);
// location.reload();
if(vR.value=="United States") {
alert("welcome us");
location.reload();
}
else if(vR.value=="United States") {
alert("welcome us");
location.reload();
}
}
</script>

localStorage
Use localStorage to save the selected value then retrieve the value when page is reloaded. Note: For details on how the rest of this demo works, see this post.
var xC = document.forms.container;
var xE = xC.elements;
var vR = xE.rad;
var cty = localStorage.getItem('country');
xC.addEventListener('change', saveCountry);
document.addEventListener('DOMContentLoaded', setCountry);
function saveCountry(e) {
localStorage.setItem('country', vR.value);
console.log("Welcome, " + vR.value);
};
function setCountry(e) {
for (let i = 0; i < vR.length; i++) {
if (vR[i].value === cty) {
vR[i].checked = true;
}
}
console.log("Welcome, " + vR.value);
};
Plunker
Demo
This demo does not fully function due to SO restricting localStorage. For a fully functional demo, review this Plunker. To test it, select a country, then refresh the page by clicking the refresh button in the preview panel or CTRL+ENTER for PC or ⌘+RETURN for Mac.
Details are commented in demo
var xC = document.forms.container;
var xE = xC.elements;
var vR = xE.rad;
/*
Get the string saved in localStorage named 'country'
*/
var cty = localStorage.getItem('country');
/*| When <form> is changed
Call saveCountry()
*/
xC.addEventListener('change', saveCountry);
/*| When Page is Reloaded
Call setCountry()
*/
document.addEventListener('DOMContentLoaded', setCountry);
/*
Save the value selected in pseudo-<select> in localStorage
*/
function saveCountry(e) {
localStorage.setItem('country', vR.value);
console.log("Welcome, " + vR.value);
};
/*
Loop through the pseudo-<option>s
When a pseudo<option> matches the value saved...
in localStorage under the name of 'country'...
check that pseudo-<option> by assigning it...
the attribute [checked] = true
*/
function setCountry(e) {
for (let i = 0; i < vR.length; i++) {
if (vR[i].value === cty) {
vR[i].checked = true;
}
}
console.log("Welcome, " + vR.value);
};
html,
body {
font: 400 small-caps 16px/1.25 Arial;
}
fieldset {
width: fit-content;
padding: 0;
}
legend {
font-size: 1rem
}
details {
width: 170px;
cursor: pointer;
margin: 0 4px -5px 0;
padding: 0 5px 10px 10px;
}
summary {
width: 100%;
position: relative;
}
/*
Shows <detail>'s default arrow
*/
/*
summary::-webkit-details-marker {
position: absolute;
padding: 0 0 0 5px;
z-index: 1;
top: 25%;
}
[open] summary::-webkit-details-marker {
top: 5%;
}
.em {
padding: 0 0 0 10px;
}
*/
/*
Hides <detail>'s default arrow
*/
summary::-webkit-details-marker {
visibility: hidden;
position: absolute;
z-index: -1;
}
.em {
padding: 0;
}
/*| Pseudo-<option>
All pseudo-<option> are initially hidden and
<label class='opt'> are the only tags that will show/hide,
the next comment explains how.
*/
.rad {
display: none
}
.opt {
display: none;
position: relative;
z-index: 2;
width: 100%;
margin: 0;
cursor: pointer;
font-size: 0.9rem;
box-shadow: -2px -2px 11px rgba(0, 0, 0, 0.3) inset;
}
/*| Two Conditions
1. If <details open='true'> all <label class='opt'> are visible.
=============================================
2. if <input class='rad' type='radio' checked> then the
<label class='opt'> that proceeds the radio button is visible.
*/
[open] .opt,
.rad:checked+.opt {
display: block;
}
/*| For Demonstration Purposes
This ruleset changes how the console is displayed.
*/
.as-console-wrapper {
max-height: 50%;
font-variant: normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom select box Jquery Plugin by VJ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<!--| Flag Icons
This stylesheet provides the flag icons.
For details, go to:
https://afeld.github.io/emoji-css/
-->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>
<body>
<form id="container">
<fieldset>
<legend>Country</legend>
<!--| Pseudo-<select>
<details> provides the dropdown behavior and
<summary> contains the pseudo-<option>
-->
<details>
<summary>
<!--| 4 Pseudo-<option>
Each <label> and <input type='radio'> pair are
synced to each other by matching the values of
<label for="ID"> and <input id="ID">.
-->
<!--| Trigger and State
When <label> is clicked ... <input type='radio'>
is checked. This simple "cause and effect" can
be leveraged into a system of states (ie off/on).
For details, review the CSS.
-->
<input id='X' type='radio' class='rad' name='rad' value="" checked>
<label class='opt' for='X'>
<i class='em em-us'></i> United States
</label>
<input id='US' type='radio' class='rad' name='rad' value="United States">
<label class='opt' for='US'>
<i class='em em-us'></i> United States
</label>
<input id='GB' type='radio' class='rad' name='rad' value="Great Britain">
<label class='opt' for='GB'>
<i class='em em-gb'></i> Great Britain
</label>
<input id='IN' type='radio' class='rad' name='rad' value="India">
<label class='opt' for='IN'>
<i class='em em-flag-in'></i> India
</label>
<input id='NP' type='radio' class='rad' name='rad' value="Nepal">
<label class='opt' for='NP'>
<i class='em em-flag-np'></i> Nepal
</label>
</summary>
</details>
</fieldset>
</form>
<!--|For Demonstration Purposes
Provides console
-->
</body>
</html>

Are you saying that when selecting the United States radio button it selects the default radio button in error? The
location.reload()
lines are reloading the page whenever the United States radio button is selected, and the new page defaults to the first radio button as selected. So you could just remove those lines and the correct radio button would stay as selected.
If the page reload is intentional and you want the new page to have the same radio button selected as the last page then you could pass a URL param to the new page and then use javascript on the new page to read any params and select the right radiobutton
e.g.
document.replace('yourpage.html?selectedCountry=US')

Radio buttons can't be checked after removing 'appearance' in CSS

I have 3 radio buttons that are tied to a function that supposed to change an image inside a div when each button is checked. It's working ok but when I adding CSS style to it so the actual checker won't be visible to only the icons I set will show, it'makes it uncheckable.
Note: when I remove the #sm-jum-btns input CSS and the checkers actually visible the code working. I need it to work also when those checkers are hidden and designed.
HTML:
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
</head>
<div class="jumbotron text-center" id="main-jum">
<img id="jum-img" src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
</div>
<div class="container-fluid text-center d-md-none" id="sm-jum-btns">
<input id="radio_left" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
<input id="radio_middle" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
<input id="radio_right" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
</div>
<script type="text/javascript">
function changeImg(){
var jumImg = document.getElementById("jum-img");
var radioLeft = document.getElementById("radio_left");
var radioRight = document.getElementById("radio_right");
var radioMiddle = document.getElementById("radio_middle");
if (radioLeft.checked){
jumImg.src = "https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg";
}
if (radioRight.checked){
jumImg.src = "https://images7.alphacoders.com/411/thumb-1920-411820.jpg";
}
if (radioMiddle.checked){
jumImg.src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg";
}
}
</script>
CSS:
#sm-jum-btns input {
margin:0;
padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
margin-top: 180px;
}
#sm-jum-btn {
position: relative;
}
.fa-circle-thin {
color: #ffb300;
width: 50px;
height: 50px;
font-size: 50px;
font-weight: bold;
}
.fa-circle-thin::before {
position: absolute;
padding: 3.5px;
margin-top:3.5px;
}
.fa-circle {
color: #ffb300;
width: 50px;
height: 50px;
line-height: 50px;
border-radius:50px;
font-size: 30px;
}
.fa-circle-thin:hover {
color: #37100B;
}
#main-jum {
padding: 0;
}
#main-jum img {
width: 100%;
min-height: 400px;
object-fit:cover;
}

Ok after two days of searching and asking I figure it out thanks to this answer.
Basically I should add a for attribute in each label to point it to it's parent input id so it can actually check the input and trigger the function.
more about for attribute you can find here

How to use FontAwesome icon as submit button in HTML form

I'm trying to get this FontAwesome search icon to act as a submit button:
Search form submit IMG
Link to search form (not evergreen):
https://themirrorman.co
I've looked through various other questions, including use of JS and using a button tag, and still couldn't get this to work.
Here is my code:
CSS:
#header-search-submit {
position: absolute;
z-index: 1;
right: 36px;
top: 6px;
font-size: 24px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
input[type="text"] {
border: 1px solid #881d98;
border-radius: 24px;
border-color: white;
}
/* header search desktop */
#media screen and (min-width: 800px) {
#header-search-desktop-div {
position: absolute;
left: 150px;
width: 450px;
margin-top: 0;
margin-bottom: 0;
}
}
HTML:
<div id="header-search-desktop-div">
<form id="header-search-form" class="search" action="https://themirrorman.co/" method="get">
<fieldset>
<span class="text">
<input name="product-search" id="header-search-desktop-span" type="text" value="" placeholder="Product Search…" /><i id="header-search-submit" class="fa fa-search"></i>
</span>
</fieldset>
<input type="hidden" name="post_type" value="product" />
</form>
</div>
The idea of using JS to create the submit function in the 'Space before /head' ? :
<script>$('#header-search-desktop-span').click(function() {
alert('Searching for '+$('#header-search-submit').val());
});
</script>
I'm clearly doing something very wrong, please help =D

You'll need to make the submit button have FontAwesome as the font-family, and use  as the value.
<input style="font-family: FontAwesome" value="" type="submit">
You can use additional CSS to change the styling of the button.

put it inside button tag
<button class="btn">
<i class="fa fa-search" aria-hidden="true"></i>
</button>

Switching class based on inputs value not working

This does not seem to be working when switching the values on load.
Also initially managed to get this working for 1 switch but have multiple on the page now so the toggle moves them all, how would i adjust so its done for each one?
$('.switch .inactive').hide();
var switchStatus = $('.switch').next('input').val();
// 1 = disable
// 0 = enabled
if (switchStatus == '1') {
$('.switch .active').hide();
} else {
$('.switch .active').show();
}
$('.switch').click(function() {
$('.inactive, .active').toggle();
var featureStatus = $(this).find('#ProductFeatures_TP_Status').val();
//console.log(featureStatus);
if (featureStatus == "1") {
$(this).find('#ProductFeatures_TP_Status').val('0');
} else {
$(this).find('#ProductFeatures_TP_Status').val('1');
}
});
.panel-heading {
cursor: pointer;
margin: 0;
}
.panel-heading .status {
float: right;
}
.panel-collapse {
display: none;
}
.panel-collapse.open {
display: block;
}
.panel-body .col-md-6.left {
padding-left: 0;
}
.panel-body .col-md-6.right {
padding-right: 0;
}
.panel-body .redactor-editor {
min-height: 100px !important;
}
.switch {
float: left;
font-size: 1.5em;
margin: -4px 10px 0 -5px;
}
.switch .active {
color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="switch ProductFeatures_TP_Status">
<i class="fa fa-toggle-on active"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive"></i>
<input type="hidden" id="ProductFeatures_TP_Status" name="ProductFeatures_TP_Status" value="0">
</div>
<div class="switch ProductFeatures_TP_Status">
<i class="fa fa-toggle-on active"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive"></i>
<input type="hidden" id="ProductFeatures_TP_Status1" name="ProductFeatures_TP_Status1" value="1">
</div>
<div class="switch ProductFeatures_TP_Status">
<i class="fa fa-toggle-on active"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive"></i>
<input type="hidden" id="ProductFeatures_TP_Status2" name="ProductFeatures_TP_Status2" value="1">
</div>

Like this? http://jsfiddle.net/gb13r1b3/
All i did was find '.inactive, .active' relative to the clicked .switch
$('.switch').click(function() {
$(this).find('.inactive, .active').toggle();
var featureStatus = $(this).find('[id^=ProductFeatures_TP_Status]').val();
console.log(featureStatus);
//console.log(featureStatus);
if (featureStatus == "1") {
$(this).find('[id^=ProductFeatures_TP_Status]').val('0');
} else {
$(this).find('[id^=ProductFeatures_TP_Status]').val('1');
}
EDIT: the syntax [id^=ProductFeatures_TP_Status] finds any id that starts with ProductFeatures_TP_Status. Once you have the clicked .switch, there is only one id that starts with ProductFeatures...
EDIT-2: http://jsfiddle.net/gb13r1b3/1/
EDIT-3: http://jsfiddle.net/gb13r1b3/5/

Given the opening sentence of your question, I assume you're open to alternative solutions so here's a pure CSS onefor you but it requires some changes to your HTML, if that's acceptable.
You'll need to change all your inputs to be checkboxes and then place labels immediately after them in your HTML, containing your FontAwesome icons.
Then, using CSS, you position the checkboxes off-screen and adjust the styling of the icons in the adjacent labels based on the checked status of each input.
*{box-sizing:border-box;color:#000;font-family:arial;margin:0;padding:0;}
input{
left:-9999px;
position:absolute;
}
label{
height:24px;
display:inline-block;
margin:5px;
overflow:hidden;
width:27px;
white-space:nowrap;
}
label>i::before{
display:inline-block;
font-size:24px;
transform:rotate(180deg);
}
input:checked+label>i::before{
color:#090;
transform:rotate(0deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<input id="ProductFeatures_TP_Status" type="checkbox" value="1">
<label for="ProductFeatures_TP_Status"><i class="fa fa-toggle-on"></i>Label 1</label>
<input checked id="ProductFeatures_TP_Status1" type="checkbox" value="1">
<label for="ProductFeatures_TP_Status1"><i class="fa fa-toggle-on"></i>Label 2</label>
<input checked id="ProductFeatures_TP_Status2" type="checkbox" value="1">
<label for="ProductFeatures_TP_Status2"><i class="fa fa-toggle-on"></i>Label 3</label>