Develop Reference

{display:none} not working with checkbox?

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.

why I have to disable javascript in my page to see my mailchimp form works?

I'm trying to add a mailchimp form hosted in another domaine to my new page and i can submit my subscription only if I turn off javascript ?
i don't know why and in which situation this problem happen ?
Because my form works perfectly here.
The code
(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[8]='MMERGE8';ftypes[8]='text';fnames[3]='MMERGE3';ftypes[3]='text';fnames[4]='MMERGE4';ftypes[4]='text';fnames[5]='MMERGE5';ftypes[5]='text';fnames[6]='MMERGE6';ftypes[6]='text';fnames[7]='MMERGE7';ftypes[7]='text';}(jQuery));var $mcj = jQuery.noConflict(true);
<link href="http://cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup { background:#fff; clear:left; }
#mc_embed_signup form { padding: 20px 0px 0px 0px }
#mc_embed_signup .button {
border-radius:0px!important;
background:#fff;
color:#282828;
padding: 15px 0px 0px 0px;
height: 50px;
font-size: 11px;
}
#mc_embed_signup .button:hover { background:#fff; color:#d2c6af; }
#mc_embed_signup .mc-field-group input {
border-radius:0px!important;
border-top:0px!important;
border-left:0px!important;
border-right:0!important;
border-bottom: 1px solid #ccc;
max-width:250px!important;
}
#mc_embed_signup .mc-field-group input:focus {
border-bottom: 1px solid #282828;
}
#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
font-size: 11px; margin: 0px 0 0em 0;padding: 5px 0px;
}
</style>
<div id="mc_embed_signup">
<form action="http://www.domaine.us2.list-manage.com/subscribe/post?u=67c8e1302463c1a5125704ad4&id=0e0ead4532" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="indicates-required"></div>
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email*">
</div>
<div class="mc-field-group">
<input type="text" value="" name="MMERGE8" class="" id="mce-MMERGE8" placeholder="Last Name">
</div>
<div class="mc-field-group">
<input type="text" value="" name="MMERGE3" class="" id="mce-MMERGE3" placeholder="Country">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_67c8e1302463c1a5773704ad4_0e0eaf4632" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe →" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</form>
</div>
<script type='text/javascript' src='http://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>

Instead of using Simulator try to run it in your browser(especially google chrome) and go
right click->inspect element->console tab
here you can see the errors and its line number

What is the best way to seperate elements in HTML to minimize one element affecting another?

i have written a password form in HTML and it has some good functionality however, i have just made a change and the css is effecting the elements. basically when i click on the different input boxes it effects the labels of my form by shifting them slightly up to down.
here is a jsfiddle so people can see the change visibly.
https://jsfiddle.net/b6hv8wLh/
here is some code:
<div class="container">
<div class="jumbotron" id="firstform">
<h1>Sign up page</h1>
<form id="myform">
<label>Username </label> <input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"><br>
<div class="pwordCheck">
<label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
<label>Confirm Password </label> <input type="password" class="f1input" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
<span id="themessage" class="themessage"></span><br>
</div>
<label>Email </label> <input type="email" class="f1input" id="e-mail"/><br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Java Developer</li>
<li>SQL Developer</li>
<li>Tester</li>
</ul>
</div>
<label>Job Role</label> <input type="text" class="f1input"/><br>
<label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/><br>
<label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/><br>
<input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
</form>
</div>
i have tried wrapping my form in various divs and trying to hit indivdual elements but it is still making changes. just to make clear, i am trying to get it to a stage where the user clicks the input and the labels do not change at all.
many thanks

This is caused by you assigning the border:4px solid red; styling to your input on focus. This causes the input's overall size to become larger which moves down the elements below it.
One way to prevent this is to give the input 4px border the same colour as the background. The border will then change to red on focus and become visible but the size will not have actually changed:
input {
background-color: #fff;
margin-left: 10px;
margin-bottom: 10px;
padding-right: 50px;
border-radius: 15px;
border:4px solid #D8D8D8;
}
It's the additional border:4px solid #D8D8D8; declaration which makes the difference.

It is because of border of input field when focus. Hence add border property for input field with same background color of the form.
input {
border:4px solid #D8D8D8;
}

Immediate solution
In your case, the fix is really simple. The border size of the input boxes should not change when they are in focus.
So, for example the inputs on focus have this style:
border: 4px solid red;
But when they are out of focus, they do not have a border. So you should set a 4px border with the same color as the background when it is not in focus.
Bootstrap-like solution
Alternatively, you should consider using a single pixel border, with a box shadow instead. Just like Bootstrap does it, which you use as I see. IMHO this does look great, especially in contrast with these huge borders.

Use box-shadow no need for any extra CSS with this.
/* CHANGE BORDER TO BOX SHADOW ON THE FOCUS */
.f1input:focus{
outline: none !important;
box-shadow: 0 0 0 4px red;
border-radius: 15px;
}
body {
background-color: #080808;
}
/*
.navbar-brand {
background-color: red;
}
*/
.container-fluid{
background-color: #006600;
border: 0;
}
#websiteName a{
color: black;
font-size: 20px;
}
#websiteName a:hover{
color: red;
}
#theLinks ul li a{
color: black;
font-size: 20px;
}
#theLinks ul li a:hover{
color: red;
}
#firstform{
background-color: #D8D8D8;
}
#firstform span{
position: absolute;
}
.glyphicon-search
{
position:relative !important;
}
#firstform .themessage{
position: absolute;
}
#firstform {
width: 60%;
margin: auto;
text-align: center;
}
#firstform h1{
text-align: center;
}
#firstform label{
text-align: left;
}
#myform {
width: 100%;
}
input {
background-color: #fff;
margin-left: 10px;
margin-bottom: 10px;
padding-right: 50px;
border-radius: 15px;
border: none;
}
<div class="container">
<div class="jumbotron" id="firstform">
<h1>Sign up page</h1>
<form id="myform">
<label>Username </label> <input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"><br>
<div class="pwordCheck">
<label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
<label>Confirm Password </label> <input type="password" class="f1input" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
<span id="themessage" class="themessage"></span><br>
</div>
<label>Email </label> <input type="email" class="f1input" id="e-mail"/><br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Java Developer</li>
<li>SQL Developer</li>
<li>Tester</li>
</ul>
</div>
<label>Job Role</label> <input type="text" class="f1input"/><br>
<label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/><br>
<label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/><br>
<input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
</form>
</div>

Try this:
#myform{
width: 450px;
margin: 0 auto;
}
.sep{
padding: 10px;
}
body {
background-color: #080808;
}
/*
.navbar-brand {
background-color: red;
}
*/
.container-fluid{
background-color: #006600;
border: 0;
}
#websiteName a{
color: black;
font-size: 20px;
}
#websiteName a:hover{
color: red;
}
#theLinks ul li a{
color: black;
font-size: 20px;
}
#theLinks ul li a:hover{
color: red;
}
#firstform{
background-color: #D8D8D8;
}
#firstform span{
position: absolute;
}
.glyphicon-search
{
position:relative !important;
}
#firstform .themessage{
position: absolute;
}
#firstform h1{
text-align: center;
}
.sep label{
padding: 10px;
}
input {
background-color: #fff;
margin-left: 10px;
padding-right: 50px;
border-radius: 15px;
border: none;
}
.f1input:focus{
outline: none !important;
border:4px solid red;
border-radius: 15px;
}
input#occupation{
background-color: #999;
}
.mytooltip + .tooltip > .tooltip-inner {
background-color: #f00;
}
label{
display:inline-block;
width:150px;
}
/*
#-webkit-keyframes example{
25% {color: black;}
50% {color: yellow;}
75% {color: green;}
100% {color: red;}
}
#firstform h1{
color: red;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}*/
.dropdown:hover .dropdown-menu {
display: block;
}#myCarousel {
width:50%;
margin: auto;
background-color: red;
text-align: center;
}
#myCarousel item {
text-align: center;
}
enter code here
<div class="container">
<div class="jumbotron" id="firstform">
<h1>Sign up page</h1>
<form id="myform">
<div class="sep">
<label>Username </label>
<input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip">
</div>
<div class="pwordCheck sep">
<label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
<label>Confirm Password </label> <input type="password" class="f1input" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
<span id="themessage" class="themessage"></span><br>
</div>
<div class="sep">
<label>Email </label> <input type="email" class="f1input" id="e-mail"/>
</div>
<div class="dropdown sep">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Java Developer</li>
<li>SQL Developer</li>
<li>Tester</li>
</ul>
</div>
<div class="sep">
<label>Job Role</label> <input type="text" class="f1input"/>
</div>
<div class="sep">
<label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/>
</div>
<div class="sep">
<label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/>
</div>
<input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
</form> `enter code here`
</div>

Only last Input works

I have this huge form I'm making and there's an also huge problem with it.
In some "areas". only the last input works.
For example here:
[...]
<div class="main_data">
<span class="info">main data</span><br>
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<input type="text" name="website" placeholder="Website" required>
<input type="text" name="telephone" placeholder="Telephone" required>
<input type="text" name="address" placeholder="Address" required>
<input type="text" name="city" placeholder="City" required>
<input type="text" name="country" placeholder="Country" required>
</div>
[...]
Every input appears to be disabled(?) and I can only write on Country.
This also happens on some other areas of the form, for example here:
[...]
<div class="detailed_info">
<span class="info">detailed info</span>
<input type="text" name="activity_areas" placeholder="Activity Areas" required>
<input type="text" name="company_valences" placeholder="Description of Company Valences" required>
<input type="text" name="where_operates" placeholder="Markets / Countries where it operates" required>
<input type="text" name="where_operates" placeholder="Annual Turnover (Value EUR)" required>
[...]
I can only write on Annual Turnover.
I tried switching z-index's to check out if it was something over it but I didn't find anything wrong.
I'll paste the css of only the first part, I belive if I find what's happening on the first one I'll be able to correct the second.
.main_data{
width: 100%;
padding: 30px 0;
background: rgba(238, 238, 238, 0.9);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
text-align: center;
}
.main_data .info{
display: block;
width: 100%;
margin: 0 0 10px 0;
font-size: 20px;
font-family: 'Futura-Light-Italic', sans-serif;
}
.main_data input{
border: 0;
padding: 5px 0;
margin: 0;
width: 80%;
background: #FFF;
color: #000;
text-align: center;
font-family: 'Futura', sans-serif;
}
.main_data input:focus{
border: 0;
}
I'm still afraid that it might not have nothing to do with the form so I'll leave you guys a link to the page so can try inspecting some elements if you want.
To bring up the form you click Join the City as One of Us: link
I'm really needing help as this form must be ready today.
Please ask questions if you don't understand something! I will obviously try to help you helping me.
EDIT: I'm using Google Chrome

Change the line-height on .oneofus.
.oneofus {
width: 88%;
position: absolute;
z-index: 12;
top: 0;
line-height: 1px; /* this is the problem remove it or make it bigger (74px or more) */
}

Set the position of the inputs to relative..
.main_data input {
position: relative;
}

JQuery Preview Form when Review Button is pressed

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.