I have been trying to create a form that having 4 elements. One is a dropdown box of checkboxes and the other are simple checkboxes. I am trying to place them one below the other. The difficulty is when the dropdown with the checkboxes are clicked the other dropdown slide down. On closing the dropdown with the checkboxes they slide up again. I am trying to place them one below the other, so that if the dropdown with checkboxes is clicked the other simply become invisible and not slide down. when the the dropdown of checkboxes is closed the remaining dropdown simply show up. Could someone please help me on this. I am trying to emulate something like the filters on luxuryretreats.com
Below is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.visibility;
if (showstatus == 'hidden') {
document.getElementById('ScrollCountry').style.visibility = "visible";
document.getElementById('Scrollguests').style.visibility = "hidden";
document.getElementById('Scrollminprice').style.visibility = "hidden";
document.getElementById('Scrollmaxprice').style.visibility = "hidden";
} else {
document.getElementById('ScrollCountry').style.visibility = 'hidden';
document.getElementById('Scrollguests').style.visibility = "visible";
document.getElementById('Scrollminprice').style.visibility = "visible";
document.getElementById('Scrollmaxprice').style.visibility = "visible";
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div id="ScrollCountry"
style="height: 120; width: 150px; overflow: auto; border: 2px solid orange; visibility:hidden;border-radius:10px;">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5" value="Turks & Caicos">Turks & Caicos<br>
</div>
<br />
<div id = "Scrollguests">
<select>
<option id="n1" value="4">2 - 4</option>
<option id="n2" value="6">4 - 6</option>
<option id="n3" value="8">6 - 8</option>
<option id = "n4" value="10">8 - 10</option>
<option id = "n5" value="30">10+</option>
</select>
</div>
<br />
<div id = "Scrollminprice">
<select>
<option id="mn1" value="200">200</option>
<option id="mn2" value="300">300</option>
<option id="mn3" value="400">400</option>
<option id = "mn4" value="500">500</option>
<option id = "mn5" value="600">600</option>
</select>
</div>
<br />
<div id = "Scrollmaxprice">
<select >
<option id = "mx1" value="600">600</option>
<option id = "mx2" value="700">700</option>
<option id = "mx3" value="800">800</option>
<option id = "mx4" value="900">900</option>
<option id = "mx5" value="1000">1000</option>
</select>
</div>
<input type="submit" />
</form>
</body>
</html>
I changed it to use display instead of visibility since it makes more sense and works better. And since the #ScrollCountry now is above the checkboxes there is no need to hide them anymore.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function ExposeList1() {
var showstatus=document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display="block";
} else {
document.getElementById('ScrollCountry').style.display='none';
}
}
</script>
<style>
fieldset{ border: 0; padding: 0; position: relative }
#ScrollCountry{
height: 120px;
width: 150px;
overflow: auto;
border: 2px solid orange;
display:none;
border-radius:10px;
position: absolute;
background: #fff;
}
</style>
</head>
<body>
<form action="trying.php" method="post">
<fieldset>
<img src="original1.png" onmouseover="this.src='onhover1.png'" onmouseout="this.src='original1.png'" onclick="ExposeList1();return false;">
<div id="ScrollCountry">
<input type="checkbox" id="scb1" name="c1" value="Mexico"><label for="scb1">Mexico</label><br>
<input type="checkbox" id="scb2" name="c2" value="Belize"><label for="scb2">Belize</label><br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica"><label for="scb3">Jamaica</label><br>
<input type="checkbox" id="scb4" name="c4" value="Thailand"><label for="scb4">Thailand</label><br>
<input type="checkbox" id="scb5" name="c5" value="Turks & Caicos"><label for="scb5">Turks & Caicos</label><br>
</div>
<div id="Scrollguests">
<select>
<option id="n1" value="4">2 - 4</option>
<option id="n2" value="6">4 - 6</option>
<option id="n3" value="8">6 - 8</option>
<option id="n4" value="10">8 - 10</option>
<option id="n5" value="30">10+</option>
</select>
</div>
<div id="Scrollminprice">
<select>
<option id="mn1" value="200">200</option>
<option id="mn2" value="300">300</option>
<option id="mn3" value="400">400</option>
<option id="mn4" value="500">500</option>
<option id="mn5" value="600">600</option>
</select>
</div>
<div id="Scrollmaxprice">
<select >
<option id="mx1" value="600">600</option>
<option id="mx2" value="700">700</option>
<option id="mx3" value="800">800</option>
<option id="mx4" value="900">900</option>
<option id="mx5" value="1000">1000</option>
</select>
</div>
<input type="submit">
</fieldset>
</form>
</body>
</html>
You have to position the ScrollCountry-block element outside the normal flow of elements by adding the css-code:
position: absolute;
to it.
Related
Currently, I have a dropdown list and 1-25 values in the dropdown.
The current one is I want to make a checkbox for those values instead of choosing multiple.
Is there any way to add a checkbox for those?
var mtf = document.getElementById('affectedwaferid').selectedOptions;
var affectedwf = Array.from(mtf).map(({ value }) => value);
//alert(affectedwf);
document.getElementById("selected-result").innerHTML = affectedwf;
<div id="afwid">
<label class="control-label col-sm-4" for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID : <span id="selected-result"></span></label>
<div class="col-sm-4">
<p class="form-control-static" style="margin-top: -6px;">
<select class="form-control" id="affectedwaferid" name="affectedwaferid" multiple>
<option value="" selected > Select Quantity</option>
<?php
//echo $cbo_oorigsite;
?>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
</p>
</div>
What you want is a MultiSelect. You can implement it on your own as shown here, or you can import a library:
https://www.cssscript.com/multi-select-dropdown-picker/
Firstly, your question is not very clear.
Anyway, I think you want something like below to select the quatity.
Try below and amend as you required:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<style>
h1 {
color: green;
}
.multipleSelection {
width: 300px;
background-color: #bcc2c1;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkBoxes {
display: none;
border: 1px #8df5e4 solid;
}
#checkBoxes label {
display: block;
}
#checkBoxes label:hover {
background-color: #4f615e;
}
</style>
<body>
<form>
<div class="multipleSelection">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select Quantity</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkBoxes">
<label for="first">
<input type="checkbox" id="first" class="chb" />
1
</label>
<label for="second">
<input type="checkbox" id="second" class="chb" />
2
</label>
<label for="third">
<input type="checkbox" id="third" class="chb" />
3
</label>
<label for="fourth">
<input type="checkbox" id="fourth" class="chb" />
4
</label>
</div>
</div>
</form>
<script>
let show = true
$('.chb').change(function () {
$('.chb').prop('checked', false)
$(this).prop('checked', true)
})
function showCheckboxes() {
if (show) {
$('#checkBoxes').hide()
show = false
} else {
$('#checkBoxes').show()
show = true
}
}
</script>
</body>
</html>
Looking for help with this please, tried to run with many articles on here but can't seem to get what I'm after.
What you will see in the following snippet works for showing and hiding the different options depending on whether the first option is Yes or No.
However I want all fields to be required but I need a way of them only being required, if they are shown.
Believe there will be something I could add or alter with the JavaScript to remove the required attributes?
function yesnoCheck(that) {
if (that.value == "Yes") {
document.getElementById("ifYes").style.display = "block";
} else {
document.getElementById("ifYes").style.display = "none";
}
if (that.value == "No") {
document.getElementById("ifNo").style.display = "block";
document.getElementById("ifNo2").style.display = "block";
} else {
document.getElementById("ifNo").style.display = "none";
document.getElementById("ifNo2").style.display = "none";
}
}
<form name="emailsend" class="form-check" method="post" action="send.php">
<label>Decision maker selection</label>
<br>
<select name='resolved' onchange="yesnoCheck(this);">
<option value='' selected disabled hidden></option>
<option value='No' > No </option>
<option value='Yes' > Yes </option>
</select>
<br>
<div id="ifYes" style="display: none;">
<br>
<label>Showifresolvedisyes</label>
<br>
<select name='ref2' required>
<option value='Test' > Test </option>
</select>
</div>
<div id="ifNo" style="display: none;">
<label>Showifresolvedisno</label>
<br>
<select name='colour' >
<option value='' selected disabled hidden></option>
<option value='red' class="redoption" > Red </option>
<option value='orange' class="amberoption" > Amber </option>
<option value='green' class="greenoption" > Green </option>
</select>
</div>
<br>
<div id="ifNo2" style="display: none;">
<label>Showifresolvedisno</label>
<br>
<select name='ref3' required>
<option value='Test'>Test</option>
</select>
<br>
<br>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-primary" name="btn-login">
Take me to the Preview!
</button>
</div>
</form>
Any help would be massively appreciated!
First you don't need to add selected and disabled attributes to your empty default options. When you select an empty option by default, that overrides the required attribute of the select tag because it is already selected with an empty value.
second I would choose class name instead of id for ifYes and ifNo containers.
this way it would be easier to add more Select tags and options without need to add more ids and styling them separately and you can control them simultaneously like this:
const ifYes = document.querySelectorAll(".ifYes");
const ifNo = document.querySelectorAll(".ifNo");
const theForm = document.forms["emailsend"];
theForm.resolved.onchange = () => {
const yes = theForm.resolved.value === "Yes";
ifYes.forEach((div) => {
div.classList.toggle("noDisplay", !yes);
div.querySelector("select").required = yes;
});
ifNo.forEach((div) => {
div.classList.toggle("noDisplay", yes);
div.querySelector("select").required = !yes;
});
};
.noDisplay {
display: none;
}
<form name="emailsend" class="form-check" method="post" action="send.php">
<label>Decision maker selection</label><br />
<select name="resolved" required>
<option value="" hidden></option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<br />
<div class="noDisplay ifYes">
<label>Show if resolved is yes</label><br />
<select name="ref2" required>
<option value="" hidden></option>
<option value="Test">Option 1</option>
<option value="Test">Option 2</option>
</select>
</div>
<div class="noDisplay ifNo">
<label>Show if resolved is no</label><br />
<select name="colour" required>
<option value="" hidden></option>
<option value="red">Red</option>
<option value="orange">Amber</option>
</select>
</div>
<br />
<div class="noDisplay ifNo">
<label>Show if resolved is no</label><br />
<select name="ref3" required>
<option value="" hidden></option>
<option value="Test">option 1</option>
<option value="Test">option 2</option>
</select>
<br />
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-primary" name="btn-login">
Take me to the Preview!
</button>
</div>
</form>
I will do that this way:
It is necessary to dispose of a css noDisplay class, instead of your style="display: none;" in the HTML
const div_ifYes = document.getElementById('ifYes')
, div_ifNo1 = document.getElementById('ifNo')
, div_ifNo2 = document.getElementById('ifNo2')
, theForm = document.forms['emailsend']
, AllRequired = theForm.querySelectorAll('[required]')
;
function setRequired()
{
AllRequired.forEach(el=>
{
el.required = !el.closest('div').classList.contains('noDisplay');
})
}
setRequired() // on start
;
theForm.resolved.onchange = () =>
{
div_ifYes.classList.toggle('noDisplay', !(theForm.resolved.value === 'Yes'))
div_ifNo1.classList.toggle('noDisplay', !(theForm.resolved.value === 'No'))
div_ifNo2.classList.toggle('noDisplay', !(theForm.resolved.value === 'No'))
setRequired()
}
theForm.onsubmit = e => // just for letting the testing here
{
e.preventDefault() // disable submit
}
.noDisplay {
display: none;
}
<form name="emailsend" class="form-check" method="post" action="send.php">
<label>Decision maker selection</label>
<br>
<select name='resolved'>
<option value='' selected disabled hidden></option>
<option value='No' > No </option>
<option value='Yes' > Yes </option>
</select>
<br>
<div id="ifYes" class="noDisplay">
<br>
<label>Showifresolvedisyes</label>
<br>
<select name='ref2' required>
<option value='Test' > Test </option>
</select>
</div>
<div id="ifNo" class="noDisplay">
<label>Showifresolvedisno</label>
<br>
<select name='colour' >
<option value='' selected disabled hidden></option>
<option value='red' class="redoption" > Red </option>
<option value='orange' class="amberoption" > Amber </option>
<option value='green' class="greenoption" > Green </option>
</select>
</div>
<br>
<div id="ifNo2" class="noDisplay">
<label>Showifresolvedisno</label>
<br>
<select name='ref3' required>
<option value='Test' > Test </option>
</select>
<br>
<br>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-primary" name="btn-login">
Take me to the Preview!
</button>
</div>
</form>
I found this JSFiddle which does what I want. However, I wanted the boxes to be inline and buttons as arrows.
So I modified above fiddle into this JSFiddle.
1) However, this is not working. Can someone please help with what am I doing wrong ? I am not able to move elements from left to right and vice versa.
2) I also want the width and height of my Select boxes as fixed with no scroll bar initially. For e.g. say 6 options. However, if the number of options increases (for e.g. it becomes 10), a scroll bar should automatically appear. Can someone point me to some tutorial which shows this ?
My code:
HTML:
<div class="bloc">
<select id="list1" multiple="multiple" rows=2>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
<option value=4>Option 4</option>
<option value=5>Option 5</option>
<option value=6>Option 6</option>
</select>
</div>
<div style="display:inline-block;">
<input id="button1" type="button" value=">>" />
<br/>
<input id="button2" type="button" value="<<" />
</div>
<div class="bloc">
<select id="list2" multiple="multiple" rows=2>
</select>
</div>
Javascript:
$(function(){
$("#button1").click(function(){
$("#list1 > option:selected").each(function(){
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
$(this).remove().appendTo("#list1");
});
});
});
CSS:
.bloc { display:inline-block; vertical-align:top; border:solid grey 1px; width:100px;}
You are missing jQuery in your fiddle. Below your working example with just one change i.e. added jquery import.
Edited
$(function() {
$("#button1").click(function() {
$("#list1 > option:selected").each(function() {
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function() {
$("#list2 > option:selected").each(function() {
$(this).remove().appendTo("#list1");
});
});
});
.bloc {
display: inline-block;
vertical-align: top;
/*border: solid grey 1px;*/
/*width: 100px;*/
height: 80px;
}
.bloc select {
width: 100px;
height: 100%;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="bloc">
<select id="list1" multiple="multiple">
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
<option value=4>Option 4</option>
<option value=5>Option 5</option>
<option value=6>Option 6</option>
</select>
</div>
<div class="bloc">
<input id="button1" type="button" value=">>" />
<br/>
<input id="button2" type="button" value="<<" />
</div>
<div class="bloc">
<select id="list2" multiple="multiple">
</select>
</div>
I am very new to code, but I was wondering what direction I should go with this code. I am going to have a drop down menu where you can pick a color and an image will be displayed in the preview box. I need each of the color1 color2 and color3 images be displayed all at the same time in the preview box. They also need to be able to change when other colors are picked. If anyone could give some sort of direction that would be awesome :) oh I also have my image set up in a sprite
Here is the code that I have so far :
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
#preview {
display: block;
width: 270px;
height: 270px;
border: 1px solid black;
}
</style>
<div id="preview">
<img id="image" src="image.png" />
</div>
<form action="" id="opts">
<label for="color1">Front Color</label>
<select name="color1" id="color1">
<option value="white" selected="">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
<br>
<label for="color2">Middle Color</label>
<select name="color2" id="color1">
<option value="white">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
<br>
<label for="color3">Back Color</label>
<select name="color3" id="color1">
<option value="white">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
</form>
<script>
function setcolor1() {
var img = document.getElementById("image");
img.src = this.value;
return false;
}
document.getElementById("color1").onchange = setcolor1;
}
</script>
I recommend that you write JS or jQuery(whichever you prefer) to change background color onhover or onclick, that way your image looks like different color a user clicks on color button. Buttons improve the UX (user-experience) and have feel much better than strolling through option list.
Also
#preview {
display: block;
width: 270px;
height: 270px;
border: 1px solid black;
}
is not good for responsive web design/development
instead you should put the following:
html
{
width:100%;
}
#preview
{
width:10.5% (this percentage may change depending on how big you want this to cover your page)
max-width:100%;
}
I think using jquery you can solve this .You have used same id for all select boxes need to change.I suggest to use the code like-
**html**
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<div id="preview">
<img id="image" src="image.png" />
</div>
<form action="" id="opts">
<label for="color1">Front Color</label>
<select name="color1" id="color1">
<option value="white" selected="">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
<br>
<label for="color3">Back Color</label>
<select name="color3" id="color3">
<option value="white">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
</form>
**css**
* { margin: 0; padding: 0; box-sizing: border-box; }
#preview {
display: block;
width: 270px;
height: 270px;
border: 1px solid black;
}
#image{
width:100px;
}
**jquery**
$(function(){
$('#color1').change(function()
{
var e = document.getElementById("color1");
var col = e.options[e.selectedIndex].value;
$('#preview').css('color', col);
src='a.png';
$('#preview img').attr("src", src);
});
$('#color3').change(function()
{
var e = document.getElementById("color3");
var col = e.options[e.selectedIndex].value;
$('#preview').css('background-color', col);
});
});
jsfiddle link
I am trying to create a list that appears when the radio buttons are clicked, I am having a problem with the way the list appears once the button is clicked.
Here is the example http://jsfiddle.net/c2webdev/4bpKE/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
.none {
display: none;
}
</style>
</head>
<body>
<input type="radio" name='thing' value='valuable' data-id="bank"/>Running Event
<input type="radio" name='thing' value='valuable' data-id="school"/>Other challenges
<input type="radio" name='thing' value='valuable' data-id="bakery"/>Baking
<div id="school" class="none">
<label for="name">What was the activity called?</label>
<select id="myList">
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
</select>
</div>
<div id="bank" class="none">
<label for="name">What was the activity called?</label>
<select id="myList">
<option value="1">Pancake Making</option>
<option value="2">Egg and spoon race</option>
<option value="3">Sack race</option>
<option value="4">Three leg race</option>
</select></div>
<div id="bakery" class="none">
<label for="name">What was the activity called?</label>
<select id="myList">
<option value="1">Pancake Making</option>
<option value="2">Egg and spoon race</option>
<option value="3">Sack race</option>
<option value="4">Three leg race</option>
</select></div>
<script>
$(':radio').change(function (event) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
});
</script>
</body>
</html>
Please help
I added a class name .select to your select containers. If you added another radio in the future, this way fill it. So:
CSS:
.select {
display: none;
}
JS:
$('input[type="radio"]').click(function (event) {
$(".select").hide();
var id = $(this).data('id');
$('#' + id).show();
});
HTML:
<input type="radio" name='thing' value='valuable' data-id="bank" />Running Event
<input type="radio" name='thing' value='valuable' data-id="school" />Other challenges
<div id="school" class="select">
<label for="myList1">What was the activity called?</label>
<select id="myList1">
<option value="1">Virgin London Marathon</option>
<option value="2">Round the Island cycle challenge</option>
<option value="3">Kilimanjaro trek</option>
<option value="4">Thames Path Challenge</option>
</select>
</div>
<div id="bank" class="select">
<label for="myList2">What was the activity called?</label>
<select id="myList2">
<option value="1">Pancake Making</option>
<option value="2">Egg and spoon race</option>
<option value="3">Sack race </option>
<option value="4">Three leg race</option>
</select>
</div>
See Demo by jquery enabled
You didn't set a library, e.g. jQuery on the left pane