When "same as shipping address" is checked, the form below that section is supposed to disappear. I put {display:none} but it doesn't work. It worked when I got rid of {div class="checkboxalign} but then it is no longer aligned in the center. I was wondering how to get this function to work, but still keep it center aligned? Thank you.
.checkbox-custom, .radio-custom {
margin: 0 auto;
width: 40%;
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 1px solid #717171;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.checkbox-custom:checked ~.input-box {
display: none;
}
.checkboxalign {
margin: 0 auto;
width: auto;
text-align: left;
display: table;
margin-bottom: 10px;
}
.radioalign {
margin: 0 auto;
width: auto;
text-align: left;
display: table;
}
<form class="form2">
<div class="h6centeralign"><h6 class="h6style">Billing Address</h6></div>
<div class="checkboxalign">
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
<form class="form3">
<div class="h6centeralign"><h6 class="h6style">Shipping Method</h6></div>
<div class="radioalign">
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
<label for="radio-1" class="radio-custom-label">Free Delivery (3-5 Days)<strong> $0.00</strong></label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group" type="radio">
<label for="radio-2" class="radio-custom-label">Standard Delivery (2-3 Days)<strong> $5.99</strong></label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio">
<label for="radio-3" class="radio-custom-label">Next Day Delivery<strong> $12.99</strong></label>
</div>
</div>
</form>
Because .input-box Elements are not siblings of the checkbox. And your selector is
.checkbox-custom:checked ~.input-box {
display: none;
}
There must be wrapper div to form elements which you want to hide then your css will work.
Related
I have a form that has two checkboxes, now you can click the checkbox on both
The question is, is it possible to make it so that there is only one choice? For example, clicked on the first one, it turned on, clicked on the second one, the first turned off, the second turned on. It should also be possible to uncheck the box at any time. I know that I can use the radio type, but I need only checkboxes
.call-form-item {
padding-bottom: 12px;
margin-bottom: 24px;
margin-left: 50px;
margin-right: 50px;
}
input {
margin: 0;
box-sizing: border-box;
outline: none;
border: none;
background-color: #EEF0F7;
margin-right: 10px;
}
.input-wrapper {
display: flex;
align-items: flex-start;
}
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
margin-right: 10px;
}
input[type=checkbox]:focus {
outline: rgba(0, 0, 0, 0.2);
}
input[type=checkbox] {
background-color: #EEF0F7;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 17px;
height: 17px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked {
background-color: #808694;
background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-contacts-call') }}">
<div class="col-md-6">
<div class="call-form-item">
<label for="name">Name *</label>
<div class="input-wrapper">
<input class="js-form-call-name" id="name" type="text" name="name">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<label for="email">Email *</label>
<div class="input-wrapper">
<input class="js-form-call-email" id="email" type="email" name="email">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<div class="input-wrapper">
<input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
<input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
</div>
</div>
</div>
</form>
</div>
The script would loo something like this. I didn't test this so there might be misspellings causing errors and such.
// get first checkbox element
let box1 = document.getElementByID( "check1" );
// get second checkbox element
let box2 = document.getElementByID( "check2" );
// add events that fires when boxes are checked
box1.addEventListener( "change", function() {
// see if the other box is already checked
if ( box2.checked ) {
// if so, uncheck it
box2.checked = false;
}
});
box2.addEventListener( "change", function() {
if ( box1.checked ) {
box1.checked = false;
}
});
But you can also just use radio buttons and invoke a hidden reset button when you click a checked radio button I think.
Here is another version that will work with any number of checkboxes.
const inps=document.querySelectorAll(".input-wrapper input");
inps.forEach(e=>e.addEventListener("click",ev=>{
inps.forEach(c=>{if(c!==e) c.checked=false})
}))
.call-form-item {
padding-bottom: 12px;
margin-bottom: 24px;
margin-left: 50px;
margin-right: 50px;
}
input {
margin: 0;
box-sizing: border-box;
outline: none;
border: none;
background-color: #EEF0F7;
margin-right: 10px;
}
.input-wrapper {
display: flex;
align-items: flex-start;
}
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
margin-right: 10px;
}
input[type=checkbox]:focus {
outline: rgba(0, 0, 0, 0.2);
}
input[type=checkbox] {
background-color: #EEF0F7;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 17px;
height: 17px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked {
background-color: #808694;
background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-contacts-call') }}">
<div class="col-md-6">
<div class="call-form-item">
<label for="name">Name *</label>
<div class="input-wrapper">
<input class="js-form-call-name" id="name" type="text" name="name">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<label for="email">Email *</label>
<div class="input-wrapper">
<input class="js-form-call-email" id="email" type="email" name="email">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<div class="input-wrapper">
<input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
<input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
</div>
</div>
</div>
</form>
</div>
And here is an alternative, using radio buttons:
const inps=document.querySelectorAll(".input-wrapper input");
inps.forEach(e=>e.addEventListener("click",ev=>{
e.checked=e!==inps.last;
inps.last=e.checked?e:null
}))
<div class="input-wrapper">
<label><input name="radio" value="1" type="radio">Check 1</label>
<label><input name="radio" value="2" type="radio">Check 2</label>
<label><input name="radio" value="3" type="radio">Check 3</label>
</div>
Alternate solution:
HTML:
<section>
<label><input type="checkbox" value="CBox 1"> CBox 1</label>
<label><input type="checkbox" value="CBox 2"> CBox 2</label>
<label><input type="checkbox" value="CBox 3"> CBox 3</label>
<label><input type="checkbox" value="CBox 4"> CBox 4</label>
<label><input type="checkbox" value="CBox 5"> CBox 5</label>
</section>
<p> Checkbox acts like a radio button, but can be reset </p>
Javascript:
const sel = document.querySelectorAll('section input[type="checkbox"]');
for (el of sel) {
el.addEventListener('click',
function(e) { sel.forEach( (x) => { if (e.currentTarget != x) x.checked = false; } ); }
);
};
You can use JavaScript / jQuery for it. If check1 is active, just disable check2.
See change event and disabled
I have a problem. I created the following topbar:
#topBar {
height: 30px;
margin-top: 10px;
}
#comboBoxAgent {
width: 400px;
height: 100%;
}
#comboBoxCoin1 {
min-width: 60px;
height: 100%;
}
#comboBoxCoin2 {
min-width: 60px;
height: 100%;
}
#btnToggleAgent {
float: right;
height: 100%;
min-width: 60px;
width: 70px;
border-radius: 10px;
font-size: 18px;
color: white;
}
#toggleSwitch {
height: 100%;
display: inline-block;
}
#txtStartDateTime {
margin-left: 10px;
}
.simulator-progress {
font-weight: bold;
}
#media only screen and (max-width: 1100px) {
#comboBoxCoin2 {
display: none;
}
}
#maxOrders {
padding: 5px 0px;
}
.txtOrderRadioBtn {
padding: 0px;
margin: 0px;
display: inline-block;
}
#maxOrdersBtn {
padding: 0px;
margin: 0px;
display: inline-block;
}
<div id="topBar">
<select id="comboBoxAgent" onchange="changeAgent()"></select>
<select id="comboBoxCoin1" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<select id="comboBoxCoin2" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<div id="toggleSwitch">
<div class="radio-group">
<input type="radio" id="environmentReal" name="environment" checked="checked" value="Real"><label for="option-one">Real</label>
<input type="radio" id="environmentSim" name="environment" value="Simulator"><label for="option-two">Sim</label>
</div>
</div>
<div id="simulatorControls" style="display: none;">
<input type="text" id="txtStartDateTime" placeholder="Start (0000-00-00 00:00:00)">
<button id="btnToggleSimulator" onClick="toggleSimulator()"></button>
<label id="txtSimulatorProgress" class="simulator-progress"></label>
</div>
<button id="btnToggleAgent" onClick="toggleAgent()"></button>
</div>
<div id="maxOrders">
<label class="txtOrderRadioBtn">Max visible orders</label>
<form id="maxOrdersBtn">
<label class="radio-inline">
<input type="radio" value="50" name="maxOrderOption" checked>50
</label>
<label class="radio-inline">
<input type="radio" value="100" name="maxOrderOption">100
</label>
<label class="radio-inline">
<input type="radio" value="250" name="maxOrderOption">250
</label>
<label class="radio-inline">
<input type="radio" value="All" name="maxOrderOption">All
</label>
</form>
</div>
The snippet isn't working properly, but I think thats just because its a snippet. The point is, that when I click on the radio button "Sim" the input field with the datetime shows up. Now this works properly on desktop, but on my mobile device the input field goes trough the maxOrders div. Here is an image of the mobile result:
Now how can I fix this using media queries. There are a few things that are important for the solution. The <button id="btnToggleAgent" onClick="toggleAgent()"></button> has to stay in the top right corner and the maxOrders needs to be below the simulator datetime input field on mobile. Please let me know how I can fix this!
I would do two things: Eliminate as many hard-coded widths as you can. The modern web should be flexible. Eliminate floats. They're a pain, and there are better ways (such as flexbox).
Other tips:
Use styling classes instead of IDs. This makes them reusable and forces you to consider how to simplify.
Apply padding and spacing globally, rather than in one-offs. Use generic classes or a small library.
#topBar {
height: 30px;
margin-top: 10px;
display: flex;
align-items: stretch;
}
#comboBoxAgent {
flex: auto;
}
.comboBoxCoin1 {
min-width: 60px;
}
#btnToggleAgent {
min-width: 60px;
width: 70px;
border-radius: 10px;
font-size: 18px;
color: white;
}
.simulator-progress {
font-weight: bold;
}
#media only screen and (max-width: 1100px) {
#comboBoxCoin2 {
display: none;
}
}
#maxOrders {
padding: 5px 0px;
}
.txtOrderRadioBtn {
padding: 0px;
margin: 0px;
}
#maxOrdersBtn {
padding: 0px;
margin: 0px;
}
<div id="topBar">
<select id="comboBoxAgent" onchange="changeAgent()"></select>
<select id="comboBoxCoin1" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<select id="comboBoxCoin2" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<div id="toggleSwitch">
<div class="radio-group">
<input type="radio" id="environmentReal" name="environment" checked="checked" value="Real"><label for="option-one">Real</label>
<input type="radio" id="environmentSim" name="environment" value="Simulator"> <label for="option-two">Sim</label>
</div>
</div>
<div id="simulatorControls" style="display: none;">
<input type="text" id="txtStartDateTime" placeholder="Start (0000-00-00 00:00:00)">
<button id="btnToggleSimulator" onClick="toggleSimulator()"></button>
<label id="txtSimulatorProgress" class="simulator-progress"></label>
</div>
<button id="btnToggleAgent" onClick="toggleAgent()"></button>
</div>
<div id="maxOrders">
<label class="txtOrderRadioBtn">Max visible orders</label>
<form id="maxOrdersBtn">
<label class="radio-inline">
<input type="radio" value="50" name="maxOrderOption" checked>50
</label>
<label class="radio-inline">
<input type="radio" value="100" name="maxOrderOption">100
</label>
<label class="radio-inline">
<input type="radio" value="250" name="maxOrderOption">250
</label>
<label class="radio-inline">
<input type="radio" value="All" name="maxOrderOption">All
</label>
</form>
</div>
I have created a custom drop-down list and when I hover over the p tag(header) and the first label(option) I get expected behavior, but when I try to move my cursor to the next label the entire section closes; why is the hover not maintained? (If I move my mouse very slowly px by px I get the expected behavior)
Javascript, CSS & HTML
const ddlContainers = document.getElementsByClassName('ddlContainer');
for (let ddlContainer of ddlContainers) {
const ddlButton = ddlContainer.children[1];//ddlContainer.getElementsByTagName('button')[0];
//const ddlSelect = ddlContainer.children[2]; //ddlContainer.getElementsByTagName('div')[0];
const ddlOptions = ddlContainer.children[2].getElementsByTagName('label'); //ddlSelect.getElementsByTagName('label'); // document.querySelectorAll("#test > label");
const selectLabel = ddlButton.children[0];
ddlButton.addEventListener('click', function (e) {
e.preventDefault();
e.target.nextElementSibling.classList.toggle('ddlHidden');
})
function toggleHidden(e) {
e.target.parentNode.classList.toggle('ddlHidden');
}
for (let option of ddlOptions) {
option.addEventListener('click', function (e) {
setSelectTitle(e);
})
}
function setSelectTitle(e) {
selectLabel.innerText = e.target.innerText
toggleHidden(e);
}
}
.ddlContainer {
position: relative;
width: 100%;
font-size: 1em;
}
.ddlButton {
display: flex;
justify-content: space-between;
padding: 0.3em 0.6em 0.3em 0.8em;
width: 100%;
background: #fff;
}
.arrow {
border: solid black;
font-size: 0.9em;
border-width: 0 2px 2px 0;
padding: 0.2em;
margin: 0 0.2em;
height: 0;
width: 0;
align-self: center;
transform: rotate(45deg)
}
.ddl {
position: absolute;
z-index: 1;
display: flex;
width: 100%;
flex-direction: column;
border: 2px solid #00000088;
background: #eee;
}
.ddl input[type="radio"] {
display: none;
}
.ddl > * {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0.4em 1em;
z-index: 2;
}
.ddl > label{
font-size: 0.9em;
background: #fff;
cursor: pointer;
/*Hides the label*/
height: 0;
padding: 0;
visibility: hidden;
transition: color 0.1s ease, padding ease 0.1s;
color: #ffffffff;
}
.ddl > p:hover ~ label { /* Displays all labels */
height: auto;
padding: 0.5em 1.5em;
color: #000000;
visibility: visible;
}
.ddl > p:hover ~ p ~ label { /* Removes the display for all the following sets of labels */
height: 0;
padding: 0;
color: #ffffffff;
visibility: hidden;
}
.ddl > label:hover ~ label { /* Kepps display for all following labels */
height: auto;
padding: 0.5em 1.5em;
color: #000000;
visibility: visible;
}
.ddl > label:hover ~ p ~ label { /* Removes display for all the following sets of labels */
height: 0;
padding: 0;
color: #ffffffff;
visibility: hidden;
}
.ddl > label:hover { /* Keeps display of current label when leaving p-tag */
height: auto;
padding: 0.5em 1.5em;
color: #000000;
visibility: visible;
}
.ddl > label:hover{
background: #d3d9f0;
}
.ddlHidden {
display: none;
}
<div id="test1" class="ddlContainer form-group">
<label for="test1Btn">Option list 1:</label>
<button id="test1Btn" class="ddlButton">
<span>- Chose Option -</span>
<span class="arrow"></span>
</button>
<div class="ddl ddlHidden">
<p>Item type 1<span class="arrow"></span></p>
<label for="test1-0">Item 1.1</label>
<input id="test1-0" value="42" type="radio" name="testOvelse1opt" />
<label for="test1-1">Item 1.2</label>
<input id="test1-1" value="16" type="radio" name="testOvelse1opt" />
<label for="test1-2">Item 1.3</label>
<input id="test1-2" value="17" type="radio" name="testOvelse1opt" />
<label for="test1-3">Item 1.3</label>
<input id="test1-3" value="2" type="radio" name="testOvelse1opt" />
<p>Item type 2<span class="arrow"></span></p>
<label for="test1-4">Item 2.1</label>
<input id="test1-4" value="42" type="radio" name="testOvelse1opt" />
<label for="test1-5">Item 2.2</label>
<input id="test1-5" value="16" type="radio" name="testOvelse1opt" />
<p>Item type 3<span class="arrow"></span></p>
<label for="test1-6">Item 3.1</label>
<input id="test1-6" value="42" type="radio" name="testOvelse1opt" />
<label for="test1-7">Item 3.2</label>
<input id="test1-7" value="16" type="radio" name="testOvelse1opt" />
<label for="test1-8">Item 3.3</label>
<input id="test1-8" value="17" type="radio" name="testOvelse1opt" />
</div>
</div>
<br />
<div id="test2" class="ddlContainer form-group">
<label for="test2Btn2">Option list 2:</label>
<button id="test2Btn2" class="ddlButton">
<span>- Chose Option -</span>
<span class="arrow"></span>
</button>
<div class="ddl ddlHidden">
<p>Item type 1<span class="arrow"></span></p>
<label for="test2-0">Item 1.1</label>
<input id="test2-0" value="42" type="radio" name="testOvelse1opt" />
<label for="test2-1">Item 1.2</label>
<input id="test2-1" value="16" type="radio" name="testOvelse1opt" />
<label for="test2-2">Item 1.3</label>
<input id="test2-2" value="17" type="radio" name="testOvelse1opt" />
<label for="test2-3">Item 1.3</label>
<input id="test2-3" value="2" type="radio" name="testOvelse1opt" />
<p>Item type 2<span class="arrow"></span></p>
<label for="test2-4">Item 2.1</label>
<input id="test2-4" value="42" type="radio" name="testOvelse1opt" />
<label for="test2-5">Item 2.2</label>
<input id="test2-5" value="16" type="radio" name="testOvelse1opt" />
<p>Item type 3<span class="arrow"></span></p>
<label for="test2-6">Item 3.1</label>
<input id="test2-6" value="42" type="radio" name="testOvelse1opt" />
<label for="test2-7">Item 3.2</label>
<input id="test2-7" value="16" type="radio" name="testOvelse1opt" />
<label for="test2-8">Item 3.3</label>
<input id="test2-8" value="17" type="radio" name="testOvelse1opt" />
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
NOTE: As I am generating the HTML with RazorEngine changing the HTML layout would be difficult.
I am trying to position my dropdown-menu right under my menu header like in following image. At best I get it to position right next to it, but is it possible to achieve my objective?
Here my FIDDLE ... FIDDLE
Please see the example in my FIDDLE/BOOTPLY which shows the result of my code correctly. In SA its not right, sorry about that.
My code...
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$(".products .checkbox").on("click", function(e) {
var i = $("li").index( $(this).parent() );
console.log(i);
$('.products .btn_clear').css('background', 'blue');
$('.products .btn_apply').css('background', 'green');
});
$(".availability .checkbox").on("click", function(e) {
var i = $("li").index( $(this).parent() );
console.log(i);
$('.availability .btn_clear').css('background', 'blue');
$('.availability .btn_apply').css('background', 'green');
});
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color:grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color:yellow
}
.checkbox label, .radio label {
min-height: 20px;
padding-left: 30px;
padding-right:30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius:0;
margin-top:5px
}
.dropdown-menu {
border-radius:0;
border:5px solid blue;
position: relative;
background-color: red;
border-top-width: 0px;
}
.typeahead {
width:90%;
margin-left:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu products" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu availability" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> One</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Two
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Nine</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Eight</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Seven</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Warning buttons with dropdown menu-->
</div>
Here you go, I removed the JavaScript and removed the left margin and relative positioning from the dropdown menu: http://www.bootply.com/KaP7SiUYVw
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox:hover {
background-color: red;
cursor: pointer;
}
.div_form:hover {
background-color: green;
cursor: pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color: grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color: yellow
}
.checkbox label,
.radio label {
min-height: 20px;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius: 0;
margin-top: 5px
}
.dropdown-menu {
border-radius: 0;
border: 5px solid blue;
background-color: red;
border-top-width: 0px;
}
.typeahead {
width: 90%;
margin-left: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
</button>
<div class="dropdown-menu products">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" type="text">
<div class="checkbox">
<label>
<input value="" type="checkbox">Alpha</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Beta
</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Gamma</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Delta</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Omega</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div>
<!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
</button>
<div class="dropdown-menu availability">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label>
<input value="" type="checkbox">One</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Two
</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Nine</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Eight</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Seven</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div>
<!--Warning buttons with dropdown menu-->
</div>
I am having a hard time trying to figure out how to preview a form before the customer submits. I have one fieldset that shows form, then the user can preview there entries on another fieldset before they submit there form.
Thanks for all and any help.
I tried this:
var fname = $('input#fname').val();
$(field2.show_fname).html(fname).show();
But didnt work at all.
Code is below. Here is my Fiddle: http://jsfiddle.net/xdmp8zz4/3/
HTML:
<form id="helpdeskform" action="process.php" method="post">
<fieldset class="field1 current">
<h2>(Placeholder) Title of Form heading level 2</h2>
<p><label class="form-label first-name" for="fname">First Name:</label>
<input type="text" name="fname" id="fname" placeholder="First Name"/>
</p>
<p><label class="form-label last-name" for="lname">Last Name:</label>
<input type="text" name="lname" id="lname" placeholder="Last Name"/>
</p>
<p><label class="form-label" for="phone-field">Phone:</label>
<input type="text" name="phone" id="phone-field" placeholder="Phone Number"/>
</p>
<p><label class="form-label" for="email-field">E-mail:</label>
<input type="text" name="email" id="email-field" placeholder="E-mail"/>
</p>
<hr>
<p><label for="classify">Type of Request:</label>
<select name="classify" id="classify">
<option value="select">Please select an option..</option>
<option value="maintainence">Maintainence of Site</option>
<option value="troubleshoot">Troubleshoot/Error</option>
<option value="new">Create new content</option>
</select>
</p>
<p><label for="subject">Short Description: <span class="counter-field"><span id="counter"></span> characters left.</span></label>
<input type="text" name="subject" id="subject" placeholder="Subject"/>
</p>
<p><label for="desc">Additional Comments:</label>
<textarea style="font-family: Arial, Veranda, Sans serif" name="desc" id="desc" cols="30" rows="10" placeholder="Short Description"></textarea>
</p>
<p><label for="review">
<input type="button" name="review" class="review action-button" value="Review"/>
</label></p>
</fieldset>
<fieldset class="field2">
<!-- #TODO PREVIEW ALL FORM INPUTS -->
<p>First Name: <input type="hidden" class="show_fname" readonly="readonly" /></p>
<p>Last Name: <input type="hidden" class="show_lname" readonly="readonly" /></p>
<p>Phone: <input type="hidden" class="show_phone" readonly="readonly" /></p>
<p>E-mail: <input type="hidden" class="show_email" readonly="readonly" /></p>
<p>Type of Request: <input type="hidden" class="show_type_of_request" readonly="readonly" /></p>
<p>Short Description: <input type="hidden" class="show_subject" readonly="readonly" /></p>
<p>Additional Comments: <input type="hidden" class="show_comments" readonly="readonly" /></p>
<p style="float:left;"><label for="previous">
<input type="button" name="previous" class="previous action-button" value="Previous"/>
</label></p>
<p style="float:left; padding-left: 10px;"><label for="Submit">
<input type="submit" value="Submit" name="submit" class="action-button"/>
</label></p>
</fieldset>
</form>
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
$('.review').click(function () {
$('.current').removeClass('current').hide().next().show().addClass('current');
});
$('.previous').click(function () {
$('.current').removeClass('current').hide().prev().show().addClass('current');
});
$('#subject').simplyCountable({
counter: '#counter',
countType: 'characters',
maxCount: 80,
strictMax: true,
countDirection: 'down',
});
});
CSS:
/*Hide all except first fieldset*/
#helpdeskform .field2 {
display: none;
}
/*inputs*/
#helpdeskform input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 80%;
color: #2C3E50;
font-size: 13px;
}
#helpdeskform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#helpdeskform .action-button {
width: 100px;
font-weight: bold;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#helpdeskform .action-button:hover,
#helpdeskform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #900;
}
/*Form labels*/
label.form-label {
text-align: left;
}
/*Phone Label Align*/
input#phone-field {
margin-left: 26px;
}
/*E-mail Label Align*/
input#email-field {
margin-left: 24px;
}
.counter-field {
font-size: 10px;
}
/*Divider*/
hr {
margin-bottom: 20px;
padding: 0px;
border-width: 2px;
border-style: solid;
border-color: #ccc;
}
Setting the text inputs in the second fieldset to hidden won't allow you to set the value and also won't display. I've changed these to type="text"and set things up to loop through the form values in the first to set all the form values in the review section here, http://jsfiddle.net/xdmp8zz4/23/
This is what I did for the first name one to show up in the review.
$('.show_fname').after($('#fname').val());
You can't put the value in the hidden input because it is hidden, and you can't change the type of the input from hidden to text because jQuery forbids it. Either you can change the input from hidden to text/disabled or you can simply place it in html as I have done with the simple code above.