We Keep Coding

Display none, block don't work on mobile. They work second click

I have a problem with select options with display: none, block. On PC it works, there is no problem. But on mobile, it also works, but at the second click and after 1-2 seconds. I don't know what is my mistake. I need when the user clicks yes, the place input must be display: block, price input display: none if the user clicks no the place input must be display: none, price input display: block,
My HTML
<div class="second-tab">
<div class="form-group">
<span class="work-span" id="workspan">Work?</span>
<select id="work" name="work" class="work">
<option value="no" selected>No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="form-group">
<span id="label-price" class="label-price work-span">Price</span>
<input type="text" id="price" class="price" />
</div>
<div class="form-group">
<span class="label-place work-span">Place</span>
<input type="text" id="place" name="place" class="place" />
</div>
<div class="form-group">
<button type="submit">Submit </button>
</div>
</div>
My JS
work.addEventListener("click", (e) => {
if (e.target.value == "no") {
priceInput.style.display = "block";
labelPrice.style.display = "block";
placeInput.style.display = "none";
labelPlace.style.display = "none";
} else if (e.target.value == "yes") {
priceInput.style.display = "none";
labelPrice.style.display = "none";
placeInput.style.display = "block";
labelPlace.style.display = "block";
}
});
My CSS
#label-price {
display: block;
}
#workspan {
display: block;
}
.place {
display: none;
}
.work-span {
display: none;
}

Using a change event on a select, you can toggle a class hidding whatever you want.
document.getElementById("select").addEventListener("change", () => {
document.getElementById("example").classList.toggle("d-none");
})
.d-none{
display:none;
}
<select id="select">
<option selected>Show</option>
<option>Hide</option>
</select>
<div id="example">example</div>

Display a div using a radio buttons

To reduce the number of lines of code I simplified my code to display three divs instead. What I want is to have a particular div displayed while hiding the other two divs depending on which radio button is checked.
I'm actually following these two links
Adding event listeners to multiple elements
How can I check whether a radio button is selected with JavaScript?
in the second link it was suggested to use
radios[i].type === 'radio' && radios[i].checked
for the test.
however I modified it to just
DisplayOption[i].checked
since its all I think i need. The error I'm receiving is
Uncaught TypeError: Cannot read property 'checked' of undefined
const column = document.querySelector('.column');
const table = document.querySelector('.table');
const details = document.querySelector('.details');
onload = function() {
const DisplayOption = document.getElementsByClassName("DisplayOption");
for (i = 0; i < DisplayOption.length; i++) {
DisplayOption[i].addEventListener('click', function() {
if (DisplayOption[i].checked) {
if (displyOption[i].value === "column") {
column.style.display = "grid";
table.style.display = "none";
table.details.style.display = "none";
} else if (displyOption[i].value === "table") {
column.style.display = "none";
table.style.display = "block";
table.details.style.display = "none";
} else {
column.style.display = "none";
table.style.display = "none";
table.details.style.display = "block";
}
}
}, false);
}
}
.column {
display: grid;
}
.table {
display: none;
}
.table.details {
display: none;
}
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">
<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="table details"> The third div is being displayed </div>

Inside the eventListener, to refer to the element being clicked use this instead of DisplayOption[i]. Another bug was using table.details - it should be only details. See corrected demo below:
const column = document.querySelector('.column');
const table = document.querySelector('.table');
const details = document.querySelector('.details');
onload = function() {
const DisplayOption = document.getElementsByClassName("DisplayOption");
for (i = 0; i < DisplayOption.length; i++) {
DisplayOption[i].addEventListener('click', function() {
if (this.checked) {
if (this.value === "column") {
column.style.display = "grid";
table.style.display = "none";
details.style.display = "none";
} else if (this.value === "table") {
column.style.display = "none";
table.style.display = "block";
details.style.display = "none";
} else {
column.style.display = "none";
table.style.display = "none";
details.style.display = "block";
}
}
}, false);
}
}
.column {
display: grid;
}
.table {
display: none;
}
.table.details {
display: none;
}
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">
<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="table details"> The third div is being displayed </div>

You could achieve the same using CSS ! No need of javascript !
You can make use of the sibling (~) selector in CSS and display the corresponding div
div {
display: none;
}
input[value="column"]:checked~.column,
input[value="table"]:checked~.table,
input[value="details"]:checked~.details {
display: block;
}
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">
<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="details"> The third div is being displayed </div>
JSFiddle link

form enable by input radio id (checked)

I have two forms. I want one of them to be enabled by the user choose through one of the radio buttons above.
What I want to do is to get the value of radio button and through this value make one of the forms enable.
So I try with JavaScript and input radio ID but I had no success:
<script>
window.addEventListener('load', init);
function init(){
var radio = document.getElementsByName ("questions");
for (var i=0; i<radios.length; i++) {
if(radio[i].getElementById.checked == "questions_1") {
radio[i].addEventListener(seleccionar);
}
}
function trigger() {
elementsForm = document.forms['question'].elements;
for (var y=0; y<elementsForm.length; y++) {
elementsForm[y].disabled=false;
}
}
</script>
Here's my code (HTML and CSS):
.category_1 {
height: 50px;
padding-top: 2%;
}
.question {
display: inline-flex;
margin-left: 5%;
}
.q-text {
font-weight: 600;
}
.q1 {
width: 44%;
}
.q2 {
width: 44%;
}
.form {
display: inline-flex;
margin-left: 5%;
}
.form.q1 {
width: 44%;
}
.form.q2 {
width: 44%;
}
.data {
margin-top: 5%;
}
.data label {
opacity: 0.5;
}
input[type=text] {
width: 100%;
}
select {
width: 100%;
}
textarea {
width: 98%;
}
input[type=submit] {
display: block;
margin: auto;
}
<body>
<div class="category_1">
<div class="question q1"><input type="radio" name="question" value="question_1" id="question_1">
<div class="q-text">QUESTION 1</div></div>
<div class="question q2"><input type="radio" name="question" value="question_2" id="question_2">
<div class="q-text">QUESTION 2</div></div>
</div>
<div class="form q1">
<form name="q1" method="post" action="">
<div class ="data">
<label for="others">Name:</label>
<input type="text" name="name" disabled>
</div>
<div class="data">
<label for="others">Select an item:</label>
<select name="items-q1" disabled>
<option value="it1">item 1</option>
<option value="it2">item 2</option>
<option value="it3">item 3</option>
<option value="it4">item 4</option>
</select>
</div>
<div class="data">
<label for="others">Anything else?</label>
<textarea name="more" disabled></textarea>
</div>
<div class="data">
<input type="submit" value="submit" disabled>
</div>
</form>
</div>
<div class="form q2">
<form name="q2" method="post" action="">
<div class ="data">
<label for="others">Name:</label>
<input type="text" name="name" disabled>
</div>
<div class ="data">
<label for="others">Choose an option:</label><br>
<input type="radio" name="option" value="o1" disabled><label for="others">1</label>
<input type="radio" name="option" value="o2" disabled><label for="others">2</label>
</div>
<div class="data">
<label for="others">Anything else?</label>
<textarea name="more" disabled></textarea>
</div>
<div class="data">
<input type="submit" value="submit" disabled>
</div>
</form>
</div>
</body>
I'd really appreciate any suggestions.

First of all i noticed your are getting the radios by the wrong name
its "question" not "questions"
<script>
var rad = document.getElementsByName('question');
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = function() {
if(this.value == "questions_1") {
//input logic to display form
//This is where you run isTrue() Function
isTrue(data);
}
else{
//This is where you run isFalse() function
isFalse(data);
}
};
}
//Function to run if its true
function isTrue(data){
//something equals something
}
//Function to run if its false
function isFalse(data){
//something equals something
}
</script>
Reference Link

<script>
var rad = document.getElementsByName('question');
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = function () {
if(this.value == "question_1") {
e1();
}else {
e2();
}
};
}
function e1() {
var eform1 = document.querySelectorAll('.q1 input[type=text], .q1 select, .q1 textarea, .q1 input[type=submit]');
for(var i = 0; i < eform1.length; i++) {
eform1[i].disabled = false;
}
}
function e2() {
var eform2 = document.querySelectorAll('.q2 input[type=text], .q2 input[type=radio], .q2 textarea, .q2 input[type=submit]');
for(var i = 0; i < eform2.length; i++) {
eform2[i].disabled = false;
}
}
</script>

Hide the drop down menu when clicking outside

I have a dropdown menu with checkboxes inside. I want to close the dropdown when the users click outside.
My code is:
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
</select>
</div>
<div class="checkboxes" id="checkboxes">
#{
if (ViewBag.DataActiveEmployee == null || ((IEnumerable<MvcApplication1.Models.ActiveUsersList>)ViewBag.DataActiveEmployee).Count() == 0)
{
//#:<h3>No records were processed.</h3>
}
else
{
foreach (var usr in ViewBag.DataActiveEmployee)
{
<label id="userName">#usr.EmployeeName</label>
<input class="checked" type="checkbox" name="search_emp" id="search_emp" value=#usr.EmployeeName>
#:
}
}
}
</div>
</div>
JS
<script>
var expanded = false;
checkboxes.style.display = "none";
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
$('multiselect').click(function () {
$("#checkboxes").hide();
});
The problem is inside the second function of JavaScript because when I press outside, nothing is happening.
Please help.

Try using the event.target to handle click events:
UPDATE
$(document).on('click', '.multiselect .selectBox', function(e) {
e.stopImmediatePropagation();
$('#checkboxes').show();
});
$('body').on('click', function(e) {
if (e.target.id != 'checkboxes' && $(e.target).closest('#checkboxes').length == 0) {
$('#checkboxes').hide();
}
});
#checkboxes,
.multiselect {
padding:15px;
border:1px solid #d8d8d8;
}
.selectBox { display: inline; }
#checkboxes { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="multiselect">
<div class="selectBox">
<select>
</select>
</div>
<div class="checkboxes" id="checkboxes">
<label id="userName">Employee 1</label>
<input class="checked" type="checkbox" name="search_emp" id="emp_1" value="val_1">
<label id="userName">Employee 1</label>
<input class="checked" type="checkbox" name="search_emp" id="emp_1" value="val_1">
</div>
</div>

Check if the target click on dom is the dropdown itself or not as
$(document).on("click", function(event){
var $trigger = $(".checkboxes");
if($trigger !== event.target && !$trigger.has(event.target).length){
$(".checkboxes").hide();
}
});
It should work.

How can I only select one radio button?

I am creating a review-control and using radiobutton for grade selection. I wrote some simple js to add a diffrent class when a radiobutton is checked.
The problem is that you can check every radio button, I want the user only to check one value. I writing this in javascript, but jQuery is welcome or a smartare solution.
Demo : http://jsfiddle.net/cbqt8/5/
HTML:
<div class="reviews">
<label class="input-check">
<input onchange="change_state(this)" type="radio" value="1" name="review[rating]" /> Bad
</label>
<label class="input-check">
<input onchange="change_state(this)" type="radio" value="2" name="review[rating]" /> Its okey
</label>
<label class="input-check">
<input onchange="change_state(this)" type="radio" value="3" name="review[rating]" /> Great
</label>
<label class="input-check">
<input onchange="change_state(this)" type="radio" value="4" name="review[rating]" /> Awesome
</label>
<label class="input-check">
<input onchange="change_state(this)" type="radio" value="5" name="review[rating]" />Super
</label>
</div>
JavaScript:
function change_state(obj) {
if (obj.checked) {
//if radiobutton is being checked, add a "checked" class
obj.parentNode.classList.add("checked");
}
else {
//else remove it
obj.parentNode.classList.remove("checked");
}
}
CSS:
/*reviews box*/
.reviews{
padding: 25px;
margin:0;
}
/*this is the style of an radio "button"*/
.input-check {
display: inline-block;
height:20px;
padding:5px 8px;
background:green;
width:90px;
color:white;
text-align: center;
}
/* This is the style for a radio "button" */
.input-check.checked{
background:red;
color:black;
font-weight:bold;
}
/*Hide the radiobutton*/
.input-check input {
display:none;
}

You got to remove the checked class for previously checked item.
jsFiddle: http://jsfiddle.net/P8jB8/
function change_state(obj) {
if (obj.checked) {
var checkedNodes = getElementsByClassName(document, "checked");
for (var i=0;i<checkedNodes.length;i++) {
checkedNodes[i].classList.remove("checked");
}
//if radiobutton is being checked, add a "checked" class
obj.parentNode.classList.add("checked");
}
else {
//else remove it
obj.parentNode.classList.remove("checked");
}
}
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) { // use native implementation if available
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
​