Develop Reference

Showing and Hiding a div with a select in vanilla javascript

I am trying to show input elements in a form with HTML select options. There are three options (DVD, book, and furniture) and each option has its product description input field (such as weight, height, size (MB) and length).
These inputs should be hidden and only show when the select option is changed. I want to use a for loop and not if or else conditionals.
The hidden input fields do not hide and show as expected using the select button. I am still learning, any tips will be helpful.
var display = {
1: [],
2: ["book"],
3: ["dvd"],
4: ["Furniture"],
}
function selectChanged() {
var sel = document.getElementById("productType");
for (var i = 1; i < 4; i++) {
document.getElementById("product" + i).classList.add("hidden");
}
display[sel.value].forEach(function(i) {
document.getElementById("product" + i).classList.remove("hidden");
});
}
<style>
.product{
border: 1px solid #333;
padding: 5px;
width: 20%;
margin: 25px 20px;
}
.info{
text-align: center;
}
.bottom-line{
box-sizing: border-box;
border-top: 1px solid;
margin: 0 34px;
}
form{
padding: 30px;
display: flex;
flex-direction: column;
}
.input-form{
width: 100%;
}
.data-input input{
width: 20%;
padding: 12px 20px;
margin: 8px 0px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.switcher{
width: 25%;
margin: 25px;
display: inline-block;
display: flex;
justify-content: center;
}
.input-group{
margin: 20px;
display: flex;
justify-content: center;
}
.same-line{
margin: 0;
width: 25%;
}
.furniture{
width: 50%;
display: none;
}
.furniture input{
width: 20%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.describe{
margin-top: 25px;
}
.hidden{
display: none;
}
</style>
<section class="add_products">
<form class="input-form" action="" id="product_form">
<div class="data-input">
<label for="sku">SKU#:</label>
<input type="text" id="sku" name="sku">
</div>
<div class="data-input">
<label for="name">NAME:</label>
<input type="text" id="name" name="name">
</div>
<div class="data-input">
<label for="price">PRICE ($):</label>
<input type="number" id="price" name="price">
</div>
<div class="input-group switcher">
<label for="productType">Type Switcher:</label>
<select class="list_products" id="productType" name="TypeSwitcher" onchange="selectChanged()">
<option value="1">DVD</option>
<option value="2">Book</option>
<option value="3">furniture</option>
</select>
</div>
<div class="data-input product hidden">
<label for="size">Size (MB):</label>
<input type="number" class="hidden" id="size" name="price">
<p class="describe">Please provide size in (MB)</p>
</div>
<div class="furniture product hidden">
<label for="height">Height (CM):</label>
<input type="number" id="height" name="price">
</div>
<div class="furniture product hidden">
<label for="width">Width (CM):</label>
<input type="number" id="width" name="price">
</div>
<div class="furniture product hidden">
<label for="length">Length (CM):</label>
<input type="number" id="length" name="price">
<p class="describe">Please provide measurements in (CM)</p>
</div>
<div class="data-input product hidden">
<label for="weight">Weight (KG):</label>
<input type="number" id="weight" name="price">
<p class="describe">Please provide weight in KG</p>
</div>

My approach:
Put the input fields into their own divs
Give them ids that correspond to the selection options.
Use Javascript to check the selected value that you declared against the current display value of those ids and make the switch as necessary.
It's a bit different from what you were using but it works. Let me know what you think.
function selectChanged() {
var sel = document.getElementById("productType");
let dvd = document.getElementById("dvd");
let book = document.getElementById("book");
let furniture = document.getElementById("furniture");
for (var i = 1; i < 4; i++) {
dvd.style.display = sel.value == "1" ? "block" : "none";
book.style.display = sel.value == "2" ? "block" : "none";
furniture.style.display = sel.value == "3" ? "block" : "none";
}
}
.product {
border: 1px solid #333;
padding: 5px;
width: 20%;
margin: 25px 20px;
}
.info {
text-align: center;
}
.bottom-line {
box-sizing: border-box;
border-top: 1px solid;
margin: 0 34px;
}
form {
padding: 30px;
display: flex;
flex-direction: column;
}
.input-form {
width: 100%;
}
.data-input input {
width: 20%;
padding: 12px 20px;
margin: 8px 0px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.switcher {
width: 25%;
margin: 25px;
display: inline-block;
display: flex;
justify-content: center;
}
.input-group {
margin: 20px;
display: flex;
justify-content: center;
}
.same-line {
margin: 0;
width: 25%;
}
.furniture {
width: 50%;
display: block;
}
.furniture input {
width: 20%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.describe {
margin-top: 25px;
}
#dvd {
display: none;
}
#book {
display: none;
}
#furniture {
display: none;
}
<section class="add_products">
<form class="input-form" action="" id="product_form">
<div class="data-input">
<label for="sku">SKU#:</label>
<input type="text" id="sku" name="sku">
</div>
<div class="data-input">
<label for="name">NAME:</label>
<input type="text" id="name" name="name">
</div>
<div class="data-input">
<label for="price">PRICE ($):</label>
<input type="number" id="price" name="price">
</div>
<div class="input-group switcher">
<label for="productType">Type Switcher:</label>
<select class="list_products" id="productType" name="TypeSwitcher" onchange="selectChanged()">
<option value="">Please Select</option>
<option value="1">DVD</option>
<option value="2">Book</option>
<option value="3">Furniture</option>
</select>
</div>
<div id="dvd">
<div class="data-input product">
<label for="size">Size (MB):</label>
<input type="number" id="size" name="price">
<p class="describe">Please provide size in (MB)</p>
</div>
</div>
<div id="book">
<div class="furniture product">
<label for="height">Height (CM):</label>
<input type="number" id="height" name="price">
</div>
<div class="furniture product">
<label for="width">Width (CM):</label>
<input type="number" id="width" name="price">
</div>
</div>
<div id="furniture">
<div class="furniture product">
<label for="length">Length (CM):</label>
<input type="number" id="length" name="price">
<p class="describe">Please provide measurements in (CM)</p>
</div>
<div class="data-input product">
<label for="weight">Weight (KG):</label>
<input type="number" id="weight" name="price">
<p class="describe">Please provide weight in KG</p>
</div>
</div>
</form>
</section>

Problems with legend tag when I am unhiding and re-hiding it in a fieldset

So I am trying to do this thing where a legend tag shows when the input box is being clicked. The idea is there is that the input box is inside a fieldset and the legend as a hidden class first. If the input box is on focus or clicked, the hidden class will be removed and it will show like this
I also added a part wherein if was left blank the legend tag will disappear by re-adding the removed
hidden class. However, it also leaves awkward whitespace in a place where it is formerly was like this
Did I do something wrong? Is there something I must do first?
The code is here:
$(function() {
$(".next").click(function() {
var div = $(this).closest('.wrapper');
var next = $(this).closest('.wrapper').next();
div.addClass('hidden');
next.removeClass('hidden');
})
})
$(function() {
$('input').click(function() {
$('input').each(function(index) {
const legend = $(this).closest('fieldset').children('legend');
if (($(this).val() == "" || $(this).val() == " ") && $(this).is(":focus") == false) {
if (legend.hasClass('hidden') == false) {
legend.addClass('hidden');
$(this).css("margin-top", "10px");
}
} else {
legend.removeClass('hidden');
$(this).css("margin-top", "-150%");
}
})
})
})
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#700&display=swap');
html {
font-family: "Poppins", sans-serif;
margin: 0px;
padding: 0px;
background: #EDE9E8;
}
.cover {
width: 100%;
height: 100%;
position: absolute;
}
form {
/*border: 3px solid red;/**/
width: 57%;
height: 100%;
margin: 0 auto;
}
.child {
width: 50%;
}
.wrapper {
background: white;
width: 95%;
height: 65%;
padding: 3%;
margin-top: 8%;
border-radius: 50px;
display: flex;
}
.border_none {
border: none;
}
.border_black {
border: 2px solid black;
}
.with_image {
text-align: center;
margin-top: 15%;
}
.with_image img {
width: 40%;
}
.input_box {
height: 40px;
width: 70%;
}
.wrapper h1 {
margin-top: 10%;
}
.wrapper label {
font-size: 150%;
}
legend {
font-size: 12px;
/*border: 2px solid black;/**/
}
.wrapper fieldset input[type="text"],
.wrapper fieldset input[type="email"],
.wrapper input[type="password"],
input[type="number"] {
width: 100 %;
height: 100 %;
margin - top: 10 px;
border: none;
/**/
}
.wrapper fieldset input[type="text"]: focus,
.wrapper input[type="email"]: focus,
.wrapper input[type="password"]: focus,
input[type="number"]: focus {
outline: none;
}
.child fieldset {
overflow: hidden;
border - radius: 20 px;
}
.wrapper select {
margin - left: 14 %;
height: 40 px;
}
.wrapper.next {
background: #2c54db;
width: 15%;
height: 8%;
border: white;
color: white;
float: right;
border-radius: 40px;
font-weight: bold;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cover">
<form method="post" action="">
<fieldset class="wrapper border_none">
<div class="child">
<h1>Identity</h1>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">First Name</legend>
<input class="input_inner" type="text" name="fname" placeholder="First Name">
</fieldset><br>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Last Name</legend>
<input class="input_inner" type="text" name="lname" placeholder="Last Name">
</fieldset><br>
<label>Civil Status</label>
<select name="civil_status" id="cv_stat">
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
<option value="Annulled">Anulled</option>
</select><br><br>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Email</legend><input type="email" name="email" placeholder="Email">
</fieldset>
<button type="button" class="next">
Next
</button>
</div>
<div class="child with_image">
<img src="../images/registration/user_folder_125px.png">
</div>
</fieldset>
<fieldset class="wrapper hidden">
<div class="child">
<h1>Password</h1>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Password</legend>
<input type="password" name="password" placeholder="Password">
</fieldset>
<br>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Confirm Password</legend>
<input type="password" name="cpassword" placeholder="Confirm Password">
</fieldset>
<button type="button" class="next">
Next
</button>
</div>
</div>
<div class="child">
</fieldset>
</form>
</div>
Thank you in advance!

When checked multiple checkboxes form fields should appear accordingly with common fields

When the user checks multiple checkboxes, form fields should appear according to the checkboxes, example: if flight checkbox had full name last name, when user checked both hotel and flight the full name and last name should be there and other fields should be hidden.
I have tried a toggle method which hides when I check, but I can not select multiple fields and get the common fields together and hide others. also my checkboxes should be aligned horizontally. I should css but it's not working
function toggle(object) {
var input;
var value = object.getAttribute("value");
switch (value) {
case "flight":
input = "input1";
break;
case "hotel":
input = "input2";
break;
case "travel":
input = "input3";
break;
}
var elements = document.getElementsByClassName(input);
for (var i = 0; i < elements.length; i++) {
if (elements[i].style.display == "block") {
elements[i].style.display = "none";
} else {
elements[i].style.display = "block";
}
}
document.getElementsByTagName("button")[0].style.display = "block";
}
.form-style-1 {
max-width: 600px;
padding: 15px 25px;
background: #f4f7f8;
margin: 15px auto;
padding: 20px;
background: #f4f7f8;
border-radius: 18px;
font-family: Calibri, sans-serif;
}
.form-style-1 fieldset {
border-radius: none;
background-color: #f2f2f2;
padding: 20px;
border: 1px solid lightgray;
width: 550px;
margin: auto;
}
.form-style-1 lable {
width: 180px;
float: left;
padding-top: 50px;
}
.form-control {
width: 550px;
padding: 15px 30px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
display: inline;
}
output {
height: 30px;
display: block;
padding-top: 20px;
}
.btn {
width: 100%;
background-color: #4CAF50;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background-color: #45a049;
}
.form-style-1 input[type="text"],
.form-style-1 input[type="date"],
.form-style-1 input[type="datetime"],
.form-style-1 input[type="email"],
.form-style-1 input[type="number"],
.form-style-1 input[type="search"],
.form-style-1 input[type="time"],
.form-style-1 input[type="url"],
.form-style-1 input[type="tel"],
.form-style-1 textarea,
.form-style-1 select {
font-family: Calibri, sans-serif;
background: rgba(255, 0, 0, 0.2);
border: none;
border-radius: 3px;
font-size: 15px;
margin: 0;
outline: 0;
padding: 10px;
width: 50%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #000000;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 10px;
}
.form-style-1 input[type="text"]:focus,
.form-style-1 input[type="date"]:focus,
.form-style-1 input[type="datetime"]:focus,
.form-style-1 input[type="email"]:focus,
.form-style-1 input[type="number"]:focus,
.form-style-1 input[type="search"]:focus,
.form-style-1 input[type="time"]:focus,
.form-style-1 input[type="url"]:focus,
.form-style-1 input[type="tel"],
.form-style-1 textarea:focus,
.form-style-1 input {}
}
.form-style-1 select {
-webkit-appearance: menulist-button;
height: 15px;
color: #000000;
text-shadow: 0 1px 0 rgba(0, 0, 0);
background: #d2d9dd;
}
.form-style-1 number {
background: #1abc9c;
color: #000000;
height: 10px;
width: 10px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 10px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
border-radius: 15px 15px 15px 0px;
}
.form-style-1 input[type="submit"],
.form-style-1 input[type="button"] {
position: relative;
display: block;
padding: 15px 29px 15px 29px;
color: #FFF;
margin: 0 auto;
background: #1abc9c;
font-size: 15px;
text-align: center;
line-height: 10%;
font-style: normal;
width: 30%;
border: 1px solid #16a085;
border-width: 1px 1px 3px;
margin-top: 1px;
margin-bottom: 5px;
}
.form-style-1 input[type="submit"]:hover,
.form-style-1 input[type="button"]:hover {
background: #109177;
}
#travel-form label,
textarea {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 80%;
padding-bottom: 0.1rem;
}
#travel-form input,
select {
margin-left: 1rem;
}
textarea {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 250%;
padding-bottom: 0.1rem;
}
.common {
margin-bottom: 8px;
}
input[type="text"] {
display: none;
}
button {
display: none;
}
input[type="checkbox"] {
display: inline;
width: 12px;
height: 12px;
padding: 5px;
}
<body>
<div class="form-style-1">
<form action="mailto: ?subject=Travel Pre-approval Form " method="post" enctype="text/plain" id="travel-form" onsubmit="test1()">
<fieldset>
<input type="checkbox" onclick="toggle(this)" id="flight" value="flight"><label for="flight">Flight</label>
<input type="checkbox" onclick="toggle(this)" id="hotel" value="hotel"><label for="hotel">Hotel</label>
<input type="checkbox" onclick="toggle(this)" id="travel" value="travel"><label for="travel">Travel</label>
<label>Full Name: <input type="text" class="input1 common " id="name" placeholder="Full Name as per Passport"></label><br>
<label>Date of travel: <input type="date" class="input1 common " name="num1" id="date of travel"></label>
<label>Date of arrival: <input type="date" class="input1 common" name="num2"></label>
<label>Origin Location: <select name="opt2" id="cost" onchange="calculateTotal()">
<option value="select">select</option>
<option value="Dubai, United Arab Emirates (DXB-Dubai Intl.)">Dubai, United Arab Emirates (DXB-Dubai Intl.)</option>
</select></label>
<label>Destination Location: <select name="op1" id="locations" onchange="calculateTotal()">
<option value="none">none</option>
<option value="Aberdeen, Scotland, UK (ABZ)">Aberdeen, Scotland, UK (ABZ)</option>
</select></label>
<label>Mobile Number(Roaming) <input type="tel" id="phone"></label><br>
<br>
<label>Company Email Address <input type="email" id="email" placeholder="email address"></label><br>
<br>
<label>Passport Number <input type="text" id="passnum" size="5" name="passportnumber"></label>
<br>
<br>
<label>Passport Expiry Date <input type="date" id="passexdate" size="4" name="passportexdate"></label> <br>
<br>
<label>Visa Required <select type="checkbox" name="visarequired">
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Don't Know">Don't Know</option>
</select></label>
<br>
<br>
<label>Visa Expiry Date <input type="date" id="visaexdate" name="visa"> </label>
<br>
<br>
<label>Purpose of Travel <input type="text" rows="6" cols="50" name="purpose Of Travel" form="usrform" placeholder="Purpose Of Travel">
</label> <br>
<label>Address Of Place Of Visitrows <input type="text" rows="6" cols="50" name="address" form="usrform" placeholder="Address of the place of Vist">
</label> <br>
<br>
<label>Billable Cost Centre <input type="text" id="billablecostcentre"></label>
<br>
<br>
<label>Billable project code <br> (Select "N/A" otherwise) <input type="text"></label>
<br>
<br>
<textarea rows="4" cols="150" name="comment" form="usrform" placeholder="Comments">
</textarea>
<label>Do you need Ground Transfer <select type="checkbox" namegroundtransfer>
<option>Yes</option>
<option>No</option>
</select></label>
<br>
<div id="totalCost">Total Cost </div><br>
<br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
</div>

Check out the following code, it's a bit shortened and generalized CSS only approach of your form, that allows you to toggle form fields conditionally with checkboxes:
.form__field {
display: block;
}
[class*="--checkbox"] {
display: inline-block;
}
[data-conditional] {
display: none;
}
#flight:checked ~ [data-conditional*="flight"] {
display: block;
}
#hotel:checked ~ [data-conditional*="hotel"] {
display: block;
}
#travel:checked ~ [data-conditional*="travel"] {
display: block;
}
<form action="mailto:?subject=Travel Pre-approval Form " method="POST" enctype="text/plain" id="travel-form" onsubmit="test1()">
<input class="form__input form__input--checkbox" type="checkbox" id="flight" />
<label class="form__field form__field--checkbox" for="flight">
<span class="form__label">Flight</span>
</label>
<input class="form__input form__input--checkbox" type="checkbox" id="hotel" />
<label class="form__field form__field--checkbox" for="hotel">
<span class="form__label">Hotel</span>
</label>
<input class="form__input form__input--checkbox" type="checkbox" id="travel" />
<label class="form__field form__field--checkbox" for="travel">
<span class="form__label">Travel</span>
</label>
<label class="form__field form__field--text" data-conditional="flight hotel">
<span class="form__label">Full Name:</span>
<input class="form__input" type="text" placeholder="Full Name as per Passport" />
</label>
<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of travel:</span>
<input class="form__input" type="date" />
</label>
<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of arrival:</span>
<input class="form__input" type="date" />
</label>
<label class="form__field form__field--text" data-conditional="flight">
<span class="form__label">For Flight only:</span>
<input class="form__input form__input--text" type="text" />
</label>
<label class="form__field form__field--text" data-conditional="hotel">
<span class="form__label">For Hotel only:</span>
<input class="form__input form__input--text" type="text" />
</label>
<label class="form__field form__field--text" data-conditional="travel">
<span class="form__label">For Travel only:</span>
<input class="form__input form__input--text" type="text" />
</label>
<div class="form__field form__field--submit">
<button type="submit">Submit</button>
</div>
</form>
also my checkboxes should be aligned horizontally
this should be satisfied as well by the above snippet
We basically use checkboxes to toggle form fields based on the data-conditional attribute (you can call it whatever you like) that contains some value(s) we control to show/hide the form fields. The relatively simple secret-sauce part here is the general next sibling selector combined with HTML markup that allows us to use it properly.
I added some more fields that only show up for a single checkbox at the end of the form, to illustrate how the conditional filter works.

Javascript not running when image clicked

In this I want to make appear a window when I click an image. The image is the address book one and it is supposed to appear an address book in the div id="janela2". I want it to be draggable and resizable but what is the most important here is to make it work because I believe the js code is correct but when I click on the image the address book doesn't appear.
The js code that is not running are the two first functions of the js and I don't know why. I only put the address book code so that you can see if it still works with the problem fixed. What is going on? How to solve it?
Check the codepen since the snippet is not working
The first part of it is solved. Now the windows shows up uppon clicking but now the address book doesn't work. https://codepen.io/Fropis/pen/mYydYd There's the new code but now the address book won't work. Why?
https://codepen.io/Fropis/pen/XwJWjg
/**************************************** Contactos **********************************************************/
function openAB(){
document.getElementById("janela2").innerHTML = document.getElementById("mydiv").innerHTML;
}
function fechar(){
document.getElementById("janela2").innerHTML = "";
}
/*****************************THE ONE THAT MATTERS IS ABOVE****************/
html, body {
width: 3779.527559055px;
height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
background-image: url("https://images4.alphacoders.com/111/111298.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: 350% 100%;
font-family: Arial, Helvetica, sans-serif;
}
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: none;
left: 30%;
position: absolute;
bottom: 0;
height: 500px;
width: 1500px;
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
overflow: hidden;
}
#NetImg, #Home, #contact{
width: 400px;
height: 400px;
padding:20px;
background: none;
}
.panel {
background: #fafafa;
padding: 1em;
width: 92.5%;
margin: auto;
max-width: 30em;
}
input {
width: 100%;
box-sizing: border-box;
font-size: 1em;
margin-top: 0.5em;
padding: 0.5em;
}
input:focus {
outline: none;
}
input::after {
width: 100%;
height: 10px;
background: red;
}
.nav-list {
width: 92.5%;
max-width: 30em;
text-align: center;
margin: auto;
}
.nav-list li {
list-style: none;
display: inline-block;
background: white;
padding: 0.7em;
margin: 0 0.1em;
}
.nav-list .active {
background-color: black;
}
#janela2{
position: absolute;
width:1900px;
height:1500px;
left:1500px;
top:550px;
border-radius:20px black solid;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cale.css">
</head>
<body>
<div id="janela2">OLA</div>
<div id="mydiv" style="display:none;">
<div id="navigation">
<ul class="nav-list">
<li id="js-show-all">Mostrar Todos</li>
<li id="js-search">Procurar</li>
<li id="js-add-new">Adicionar Contacto</li>
</ul>
</div>
<div id="search-panel" class="panel">
<h1>Procurar Contacto</h1>
<form id="search" action="#">
<div id="results"></div>
<div>
<label>
<input type="text" name="search" id="search" placeholder="Insira nome do contacto" />
</label>
</div>
<input type="submit" value="Procurar"/>
</form>
</div>
<div id="contact-panel" class="panel">
<form id="contact" action="#">
<h1>Adicionar Novo Contacto</h1>
<div>
<label>
<input type="text" name="person" id="name" placeholder="Jos&eacute Bigodes" required/>
</label>
<label>
<input type="text" name="phone" id="name" placeholder="912942923" maxlength="9" pattern=".{9,}" required title="Insira 9 caracteres"/>
</label>
<label>
<input type="email" name="email" id="name" placeholder="nome#desk.com" pattern="+#desk.com" required/>
</label>
</div>
<div>
<input type="submit" value="Adicionar" />
</div>
</form>
</div>
<div id = "show-panel" class="panel">
</div>
</div>
<div class="navbar">
<a><img onclick="openAb()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact"></a>
</div>
</body>
<script src=cale.js></script>
</html>

openAb has a typo in html vs openAB function in js . Replace with
<img onclick="openAB()" ....

Your function name is openAB but you are calling openAb
<img onclick="openAB()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact">

Fix div position in a form

I am using the same form on two different pages. On the first one every div is tidy in the desired position. On the second page, there is a select that only appears after a change (jquery trigger), which causes the div below it to appear first on the right but after the trigger it moves on the left. I'd like the div which contains radio buttons to be on the left side at all times, just like it is on the first page. The part that I'd like to fix is #center-add-new-event-form .container-field input[type=radio].
This is the css.
#center-add-new-event-form,
#center-add-new-event-form * {
box-sizing: border-box;
}
#center-add-new-event-form {
padding: 20px 10px 0px;
}
#center-add-new-event-form .container-field {
width: 50%;
float: left;
padding: 0 10px;
margin-bottom: 20px;
vertical-align: top;
}
#center-add-new-event-form .container-field label {
display: block;
font-weight: 600;
margin-bottom: 5px;
}
#center-add-new-event-form .container-field input[type=text],
#center-add-new-event-form .container-field select {
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
}
#center-add-new-event-form .container-field input[type=radio]
{
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
}
#center-add-new-event-form .center-error-message {
font-size: 0.9em;
color: darkred;
display: block;
margin-left: 1px;
}
.center-event-actions {
border-top: 1px solid #ddd;
padding: 20px 20px 15px;
text-align: right;
}
.clearfix:before,.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
#media screen and (max-width: 767px) {
#center-add-new-event-form .container-field {
float: none;
width: 100%;
}
}
<form id="center-add-new-event-form" class="clearfix">
<div class="container-field" style="width: 100%">
<label></label>
<div id="center-request-details">
</div>
</div>
<div class="container-field">
<label for="teaching-requests"></label>
<select id="input-teaching-requests" name="teaching-requests" class="create-request-event ui-widget-content ui-corner-all">
<option value=""></option>
<option value=""></option>
</select>
<span class="center-error-message"></span>
</div>
<div class="container-field">
<label for="request-date"></label>
<input type="text" name='request-date' class="create-request-event event-datepicker ui-widget-content ui-corner-all">
<span class="center-error-message"></span>
</div>
</div>
<div class="container-field">
<label for="teaching-start-time"></label>
<input type="text" name="teaching-start-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all">
<span class="center-error-message"></span>
</div>
<span class="clearfix"></span>
<div class="container-field">
<label for="teaching-end-time"></label>
<input type="text" name="teaching-end-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all">
<span class="center-error-message"></span>
</div>
<div class="container-field">
<label for="teaching-teacher"></label>
<div id='contanier-teacher-selection'>
</div>
<span class="center-error-message"></span>
</div>
<div class="container-field pull-left" align="left">
<label for="recursive-events" align="left">
<input type="radio" align="left" name="recursive" value="daily"/>Daily
<input type="radio" align="left" name="recursive" value="weekly"/>Weekly
<input type="radio" align="left" name="recursive" value="monthly"/>Monthly
</label>
</div>
<span class="center-error-message"></span>
</form>
<div class="center-event-actions">
<button id="cancel-add-new-event" class='button' data-izimodal-close="" data-izimodal-transitionout="bounceOutDown"></button>
<button id="add-new-event" class='button button-primary'></button>
</div>
Before
After

It looks like it is caused by container-field <= width: 50% and float
so when this div appears it appears next to last one
the solution add
<span class="clearfix"></span>
before the the element with radio buttons

This might work:
#center-add-new-event-form .container-field input[type=radio]:before
{
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
}
#center-add-new-event-form .container-field input[type=radio]:after
{
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
float: right;
}