jQuery Form validation color change? - javascript

2 questions. i am learning form validation in javascript/jQuery
1) as you can see when there is not input , background color is pink, but when i start typing the background color is not going away. i tried with else if 'remove class' still no good. i want to achieve this using jQuery only
2)(html)when i click sign-up , I want document page to go to a different html page. how do i achieve this?
$(document).ready(function(){
if($("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").val(null)){
$("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").addClass("bordercoloron");
}
});
#wraper {
margin: 0 auto;
height: 4000px;
width: 1000px;
border: 2px solid black;
}
#wholeform {
margin: 0 auto;
height: 600px;
width: 400px;
border: 2px solid grey;
}
#fnameid, #Lnameid {
height: 50px;
width: 172px;
border: none;
position: relative;
left: 0.5%;
margin-top: 3%;
padding-left: 5%;
font-size: 20px;
}
#emailid, #phoneid {
height: 50px;
width: 372px;
border: none;
position: relative;
left: 0.5%;
font-size: 20px;
padding-left: 5%;
letter-spacing: 9px;
margin-top: 5%;
}
#dob-day, #dob-month, #dob-year {
height: 50px;
width: 120px;
position: relative;
left: 4%;
border: none;
font-size: 20px;
margin-top: 5%;
color: darkgray
}
#mf {
height: 55px;
width: 350px;
position: relative;
left: 4%;
border: none;
font-size: 50px;
margin-top: -2%;
padding-left: 5%;
letter-spacing: 10px;
color: darkgray
}
.bordercoloron {
background-color: coral;
}
.bordercoloroff {
border: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/jexercise.css">
</head>
<body>
<div id="wrap">
<div id="mainbox">
<form id="wholeform">
<input type="text" placeholder="FirstName" name="fname" id="fnameid">
<input type="text" placeholder="LastName" name="Lname" id="Lnameid">
<input type="text" placeholder="Email#example.com" name="email" id="emailid">
<input type="text" placeholder="Mobile Phone Number" name="fname" id="phoneid">
<select name="dob-day" id="dob-day">
<option value="">Day</option>
<option value="">---</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</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>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="dob-month" id="dob-month">
<option value="">Month</option>
<option value="">-----</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dob-year" id="dob-year">
<option value="">Year</option>
<option value="">----</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
</select>
<h3 style="font-size:20px; position: relative; left:5%; width:70px;color:darkgray;">Gender:</h3>
<select id="mf">
<option>Male</option>
<option>Female</option>
</select>
<input type="button" id="submit" style="background-color:#2196F3;border-radius:5px;border:2px #2196F3;position:relative; margin-top:25%;left:25%;width:200px;height:80px;font-size:50px;color:darkgray; padding-left:5%;" value="SignUp">
</form>
</div>
</div>
<script src="../js/jexercise.js"></script>
</body>
</html>


Answer 1 : If removeClass is not working properly, use removeAttr i.e.,
$("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").removeAttr("class");
Answer 2 : Add function on button click as below :
<input type="button" id="submit" onClick="myFunc()" value="SignUp">
Now declare function in your javascript i.e., :
var myFunc = function(){
window.location.href = 'Redirection Link';
}

Related

How do i add all the circled inputs when i click "add more" button and remove unnecessary inputs altogether circled when i click "remove" button

Current Image of what it looks and needs.
Please help me out in this. I have been trying to add two buttons where it can give the input box again same in the form where the inputs that start in the fieldset called Type of Land and remove it when i click remove button. All the inputs in the fieldset called type of land should be appeared again when i click add more button. As you can in the image of the screen where the circle i drew and the arrow that indicates the buttons there where all the input circled should again appear when i click the button, & the button should let any infinite number of times of input including within inside the fieldset. This is a form where a person is trying to get details and trying to add "n" number of lands where he/she is either interested in buying or for suggesting it to someone.
This is html down below
```<!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" />
<title>Survey-Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper container">
<form id="survey-form" autocapitalize="off" method="POST" name="google-sheet" action="dynaform.php" onSubmit="alert('Thank you for submitting your details. We will be Contacting you very soon. ');" class="" >
<h1 id="title">Chevella Customer Lead Form</h1>
<hr>
<hr>
<p id="description"><b>Note:</b> Please enter the following details to receive leads and inquires about the
Land in Chevella Mandal.</p>
<!-- ------------------Language Selection------------------------ -->
<hr class="space">
<hr class="space">
<fieldset>
<legend id="head">Select Language</legend>
<div id="google_translate_element"></div>
</fieldset>
<!-- ------------------Personal Details------------------------ -->
<hr>
<fieldset>
<legend id="head">Personal Details</legend>
<div>
<label id="name-label" for="name">Name:</label>
<input type="text" required id="Name" name="Name" placeholder="Enter your name" class="form-control">
</div>
<div>
<label for="address-label">Address:</label>
<input type="Address" id="Address" name="Address" placeholder="Enter your address" class="form-control" required>
</div>
<div>
<label id="number-label" for="phone">Phone Number/Whatsapp:</label>
<input type="number" id="Phone Number" name="PhoneNumber" placeholder="Enter 10 digit number"
min="0000000000" max="9999999999999" class="form-control" required>
</div>
<!-- ------------------Radio Buttons-------------------------------- -->
<div>
<label for="Gender">Gender</label>
<p>
<input type="radio" name="Gender" value="Male" class="input-radio" > Male<br>
<input type="radio" name="Gender" value="Female" class="input-radio"> Female<br>
<input type="radio" name="Gender" value="Other" class="input-radio"> Other
</p>
</div>
<label for="date-label">Date of Birth:</label>
<input type="Date" name="DateOfBirth" id="Date of Birth" class="form-control" required>
</fieldset>
<hr class="space">
<!-- ------------------Checkboxes-------------------------------- -->
<fieldset>
<legend id="head">Type of Land</legend>
<label for="Gender"></label>
<div class="village">
<label id="Village" for="vilage"><h4>Village:</label>
<select id="dropdown0" name="Village" required>
<option value="none">
'Select'</option>
<option value="Allawada">
Allawada</otion>
<option value="AloorI">
Aloor I</option>
<option value="AloorII">
Aloor II</option>
<option value="AloorIII">
Aloor III</option>
<option value="Anantawaram">
Anantawaram</option>
<option value="Bastepur">
Bastepur</option>
<option value="Chanvelli">
Chanvelli</option>
<option value="Chevella">
Chevella</option>
<option value="Damerigidda">
Damerigidda</option>
<option value="Dearlapalle">
Dearlapalle</option>
<option value="Devarampalle">
Devarampalle</option>
<option value="Devuni Erravelly">
Devuni Erravelly</option>
<option value="Gollapalle">
Gollapalle</option>
<option value="Gundal">
Gundal</option>
<option value="Hasthepur">
Hasthepur</option>
<option value="Ibrahimpalle">
Ibrahimpalle</option>
<option value="Kammeta">
Kammeta</option>
<option value="Kanduwada">
Kanduwada</option>
<option value="Kesavaram">
Kesavaram</option>
<option value="Khanapur">
Khanapur</option>
<option value="Kistapur">
Kistapur</option>
<option value="Kowkuntla">
Kowkuntla</option>
<option value="Kummera">
Kummera</option>
<option value="Malkapur">
Malkapur</option>
<option value="Mudimyal">
Mudimyal</option>
<option value="Naincheru">
Naincheru</option>
<option value="Nowlaipalle">
Nowlaipalle</option>
<option value="Nyalata">
Nyalata</option>
<option value="Orella">
Orella</option>
<option value="Pamena">
Pamena</option>
<option value="Ravulapalle(Khurd)">
Ravulapalle (Khurd)</option>
<option value="Regadghanapur">
Regadghanapur</option>
<option value="Tallaram">
Tallaram</option>
<option value="Tangedapalle">
Tangedapalle</option>
<option value="Yenkepalle">
Yenkepalle</option>
</select>
<ol>
<li><h4>Main Highway or Main Road</h4></li>
<label id="Village" for="village">(per acre):</label>
<select id="dropdown1" name="Row" required>
<option value="none">
'Select'</option>
<option value="Row1">
Row 1</option>
<option value="Row2">
Row 2</option>
<option value="Row3">
Row 3</option>
<option value="Row4">
Row 4</option>
<option value="Row5">
Row 5</option>
<option value="Row6">
Row 6</option>
</select>
<select id="dropdown3" name="Column">
<option value="None">
'Select'</option>
<option value="Column1">
Column 1</otion>
<option value="Column2">
Column 2</option>
<option value="Column3">
Column 3</option>
<option value="Column4">
Column 4</option>
<option value="Column5">
Column 5</option>
<option value="Column6">
Column 6</option>
</select>
<li><h4>Sub Road</h4></li>
<ul><li>1 km:</li>
<label id="Village" for="village">(per acre):</label>
<select id="dropdown1" name="Row" required>
<option value="none">
'Select'</option>
<option value="Row1">
Row 1</option>
<option value="Row2">
Row 2</option>
<option value="Row3">
Row 3</option>
<option value="Row4">
Row 4</option>
<option value="Row5">
Row 5</option>
<option value="Row6">
Row 6</option>
</select>
<select id="dropdown3" name="Column">
<option value="None">
'Select'</option>
<option value="Column1">
Column 1</otion>
<option value="Column2">
Column 2</option>
<option value="Column3">
Column 3</option>
<option value="Column4">
Column 4</option>
<option value="Column5">
Column 5</option>
<option value="Column6">
Column 6</option>
</select>
<li>Above 2km:</li>
<label id="Village" for="village">(per acre):</label>
<select id="dropdown1" name="Row" required>
<option value="none">
'Select'</option>
<option value="Row1">
Row 1</option>
<option value="Row2">
Row 2</option>
<option value="Row3">
Row 3</option>
<option value="Row4">
Row 4</option>
<option value="Row5">
Row 5</option>
<option value="Row6">
Row 6</option>
</select>
<select id="dropdown3" name="Column">
<option value="None">
'Select'</option>
<option value="Column1">
Column 1</otion>
<option value="Column2">
Column 2</option>
<option value="Column3">
Column 3</option>
<option value="Column4">
Column 4</option>
<option value="Column5">
Column 5</option>
<option value="Column6">
Column 6</option>
</select>
<li>upto 4km:</li>
<label id="Village" for="village">(per acre):</label>
<select id="dropdown1" name="Row" required>
<option value="none">
'Select'</option>
<option value="Row1">
Row 1</option>
<option value="Row2">
Row 2</option>
<option value="Row3">
Row 3</option>
<option value="Row4">
Row 4</option>
<option value="Row5">
Row 5</option>
<option value="Row6">
Row 6</option>
</select>
<select id="dropdown3" name="Column">
<option value="None">
'Select'</option>
<option value="Column1">
Column 1</otion>
<option value="Column2">
Column 2</option>
<option value="Column3">
Column 3</option>
<option value="Column4">
Column 4</option>
<option value="Column5">
Column 5</option>
<option value="Column6">
Column 6</option>
</select>
</ul>
<li><h4>Bandi Rasta or Kart Rasta</h4></li>
<label id="Village" for="village">(per acre):</label>
<select id="dropdown1" name="Row" required>
<option value="none">
'Select'</option>
<option value="Row1">
Row 1</option>
<option value="Row2">
Row 2</option>
<option value="Row3">
Row 3</option>
<option value="Row4">
Row 4</option>
<option value="Row5">
Row 5</option>
<option value="Row6">
Row 6</option>
</select>
<select id="dropdown3" name="Column">
<option value="None">
'Select'</option>
<option value="Column1">
Column 1</otion>
<option value="Column2">
Column 2</option>
<option value="Column3">
Column 3</option>
<option value="Column4">
Column 4</option>
<option value="Column5">
Column 5</option>
<option value="Column6">
Column 6</option>
</select>
<li><h4>Without Road Access</h4></li>
<label id="Village" for="village">(per acre):</label>
<select id="dropdown1" name="Row" required>
<option value="none">
'Select'</option>
<option value="Row1">
Row 1</option>
<option value="Row2">
Row 2</option>
<option value="Row3">
Row 3</option>
<option value="Row4">
Row 4</option>
<option value="Row5">
Row 5</option>
<option value="Row6">
Row 6</option>
</select>
<select id="dropdown3" name="Column">
<option value="None">
'Select'</option>
<option value="Column1">
Column 1</otion>
<option value="Column2">
Column 2</option>
<option value="Column3">
Column 3</option>
<option value="Column4">
Column 4</option>
<option value="Column5">
Column 5</option>
<option value="Column6">
Column 6</option>
</select>
</ol>
</h4>
<h3 id="head">Title/Legility</h3>
<select id="dropdown2" name="clear-litigation" class="dropdown2">
<option value="none">
'Select'</option>
<option value="clear">
Clear</option>
<option value="litigation">
Litigation</option>
</select>
</div>
</fieldset>
<!-- -----------------------smth------------------------------- -->
<br><br>
<hr class="space">
<!-- ------------------------wasssup--------------------------- -->
<fieldset>
<legend id="head">Essay Section</legend>
<p>Provide a Bio</p>
<div>
<label for="msg"></label>
<textarea class="space1" id="Essay" name="Essay" rows="10" cols="90" placeholder="Message"></textarea>
</div>
<hr>
<div>
<label for="msg">Please upload contact details for references</label><br>
<textarea id="contact details" name="userMessage" rows="10" cols="90"
placeholder="Contact Details" required></textarea>
</div>
</fieldset>
<div class="wrapper">
<button class="btn-13" type="submit" id="submit" name="submit" ><span>Submit</span></button>
</div>
</div>
</form>
</div>
</form>
</body>
</html>```
This is css down below
```#import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');
:root {
--color-darkblue-alpha: rgba(247, 249, 250, 0.9);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: Poppins, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.4;
color: var(--color-black);
margin: 0;
}
/* mobile friendly alternative to using background-attachment: fixed */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: var(--color-darkblue);
background-image: linear-gradient(
180deg,
rgba(0, 100, 0 , 0),
rgba(0, 160, 10, 0)
),
url(https://i.pinimg.com/564x/43/45/a9/4345a99449df1fe9ea55e0085a8fd709.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
h1 {
font-weight: 500;
line-height: 1.9;
font-family: Poppins;
font-size: 40px;
Letter-spacing: -3px;
}
#description {
font-size: 1.125rem;
font-family: Poppins;
}
h1,
p {
margin-top: 0;
margin-bottom: 0rem;
}
label, Input, fieldset{
align-items: center;
font-size: 1.125rem;
margin-bottom: 0.5rem;
padding: 18px
}
.container {
width: 100%;
margin: 3.125rem auto 0 auto;
}
#media (min-width: 576px) {
.container {
max-width: 540px;
}
}
#media (min-width: 375px) {
.container {
max-width: 812px;
}
}
.header {
padding: 5 0rem;
margin-bottom: 1.875rem;
}
#head, #description {
font-size: 24px;
}
.clue {
margin-left: 0.25rem;
font-size: 0.9rem;
color: #e4e4e4;
}
.text-center {
text-align: center;
}
/* form */
form {
background: var(--color-darkblue-alpha);
padding: 2.5rem 0.625rem;
border-radius: 04rem;
border: 3px solid #dadce0;
margin-bottom: 3rem;
}
#media (min-width: 480px) {
form {
padding: 1.5rem;
}
}
.form-group {
margin: 0 auto 1.25rem auto;
padding: 0.25rem;
}
.form-control {
display: block;
width: 55%;
height: 2.595rem;
padding: 0.375rem 0.99rem;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 04rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
margin: 2px
}
.form-control:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.input-radio,
.input-checkbox {
display: inline-block;
margin-right: 0.425rem;
min-height: 1.5rem;
min-width: 3.25rem;
}
.input-textarea {
min-height: 120px;
width: 100%;
padding: 0.325rem;
resize: verticle;
border-radius: 6px
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.village {
display: flex;
align-items: left;
justify-content: left;
margin: -50px 30px 05px -20px;
}
a{
text-decoration: none;
}
.btn-13 {
display: block;
width: 200px;
height: 50px;
line-height: 40px;
font-size: 10px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
font-size: 10px;
border-radius:
}
.btn-13 span{
position: relative;
z-index: 2;
}
.btn-13:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgb(159, 90, 253);
transition: all .35s;
border-radius:32px;
}
.btn-13:hover {
color: #ffff;
font-weight: 500;
transition: all .1s;
border-radius:25px;
}
.btn-13:hover:after {
width: 100%;
}
#media (max-width: 140px) {
#outside {
padding: 0 .2rem;
}
html {
font-size: auto;
overflow-x: hidden;
}
.btn-13 {
size: px;
}
}
textarea {
width: 330px;
height: 85px;
border-radius: 14px;
font-size: 18px;
}
#title {
font-size: 55px
}
fieldset {
border-radius: 22px;
justify-content: center;
margin: 20px 50px 20px 50px;
}
.space1 {
margin-left: -35px
}
span {
font-size: 15px;
}
select {
margin: 6px ;
font-size: 16px
}```

iframe doesn't show its content

I have created an iframe per dropdown.
So here is the html, css and JS:
$(function(){
$('#klanten-lijst').on('change',function(){
$('#klanten div').hide();
$('.klant-'+this.value).show();
});
});
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 45px;
overflow: hidden;
width: 500px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 16px;
height: 45px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 520px;
}
.styled-select.slate {
background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
height: 45px;
width: 500px;
}
.styled-select.slate select {
border: 1px solid #ccc;
font-size: 16px;
height: 45px;
width: 520px;
}
<div>
<h2 style="margin: 0 0 0px 20px">Klanten</h2>
<div class="styled-select slate" style="position:fixed;margin-left:20px;">
<select name="klanten" id="klanten-lijst">
<option>Klanten<option>
<option value="1">7LAB LLP</option>
<option value="2">A.Tuin Den Helder B.V.</option>
<option id="option3" value="3">Ace Accounting</option>
<option id="option4" value="4">Administratiekantoor A.C. Koenen</option>
<option id="option5" value="5">Advocatenkantoor Roos</option>
<option id="option6" value="6">Afix</option>
<option id="option7" value="7">Agratechniek</option>
<option id="option8" value="8">Anne van Dalen</option>
<option id="option9" value="9">App-vise</option>
<option id="option10" value="10">Arlette Hazevoet</option>
<option id="option11" value="11">Asko Schoonmaak- en Bedrijfsdiensten B.V.</option>
<option id="option12" value="12">ATAL B.V.</option>
<option id="option13" value="13">Australian Backpackers B.V.</option>
<option id="option14" value="14">Blommestein Gevelonderhoud</option>
<option id="option15" value="15">Blooming bedrijvengroep B.V.</option>
<option id="option16" value="16">Borst Bedden B.V.</option>
<option id="option17" value="17">Bouwbedrijf J. Nat. & Zn. B.V.</option>
<option id="option18" value="18">BouwBoxr B.V.</option>
<option id="option19" value="19">Broersma & De Boer Bouwadviesgroep B.V.</option>
<option id="option20" value="20">Bruin Assurantiën</option>
<option id="option21" value="21">Bureau Gras</option>
<option id="option22" value="22">Bureau4 V.O.F. </option>
<option id="option23" value="23">Business Center Bonne Chance B.V.</option>
<option id="option24" value="24">C.B.M. Poland</option>
<option id="option25" value="25">CaseWare Nederland B.V.</option>
<option id="option26" value="26">ColorCrew</option>
<option value="27">Coos</option>
<option value="28">Coperatieve Dienstverlening Heerhugowaard U.A.</option>
<option value="29"></option>
<option value="30"></option>
<option value="31"></option>
<option value="32"></option>
<option value="33"></option>
</select>
<div id="klanten">
<div class="klant-1" hidden>
<iframe src="../klanten/7LAB LLP.html" style="height:410px;width:1880px;"></iframe>
</div>
<div class="klant-2" hidden>
<iframe src="../paginas/home.html" style="height:410px;width:1880px;"></iframe>
</div>
</div>
<script src="../scripts/klant-reveal.js"></script>
</div>
</div>
I don't understand why it isn't working and I have been breaking my brain over this for a little while now.
Its funny because when I change "hidden" by hand to "show" in F12 on the site it does show the frame with the mouse, but not the content itself.
Soo I have no clue where it could go wrong!
Thanks in advance,
Roel

Don't use hidden attribute, if so then try removing the attribute.
JQuery .show() changes css display to block or inline-block according to the element used.
So, either remove hidden attribute from the element using jQuery or
don't use hidden attribute instead do display:none on all the elements in css, so it will be hidden until selection is done. On selection, use jquery.show()
For reference:
$(function() {
$('#klanten-lijst').on('change', function() {
$('#klanten div').hide();
$('.klant-' + this.value).show();
});
});
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 45px;
overflow: hidden;
width: 500px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 16px;
height: 45px;
padding: 5px;
/* If you add too much padding here, the options won't show in IE */
width: 520px;
}
.styled-select.slate {
background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
height: 45px;
width: 500px;
}
.styled-select.slate select {
border: 1px solid #ccc;
font-size: 16px;
height: 45px;
width: 520px;
}
#klanten {
margin-top: 50px;
}
#klanten div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h2 style="margin: 0 0 0px 20px">Klanten</h2>
<div class="styled-select slate" style="position:fixed;margin-left:20px;">
<select name="klanten" id="klanten-lijst">
<option>Klanten</option>
<option value="1">7LAB LLP</option>
<option value="2">A.Tuin Den Helder B.V.</option>
<option id="option3" value="3">Ace Accounting</option>
<option id="option4" value="4">Administratiekantoor A.C. Koenen</option>
<option id="option5" value="5">Advocatenkantoor Roos</option>
<option id="option6" value="6">Afix</option>
<option id="option7" value="7">Agratechniek</option>
<option id="option8" value="8">Anne van Dalen</option>
<option id="option9" value="9">App-vise</option>
<option id="option10" value="10">Arlette Hazevoet</option>
<option id="option11" value="11">Asko Schoonmaak- en Bedrijfsdiensten B.V.</option>
<option id="option12" value="12">ATAL B.V.</option>
<option id="option13" value="13">Australian Backpackers B.V.</option>
<option id="option14" value="14">Blommestein Gevelonderhoud</option>
<option id="option15" value="15">Blooming bedrijvengroep B.V.</option>
<option id="option16" value="16">Borst Bedden B.V.</option>
<option id="option17" value="17">Bouwbedrijf J. Nat. & Zn. B.V.</option>
<option id="option18" value="18">BouwBoxr B.V.</option>
<option id="option19" value="19">Broersma & De Boer Bouwadviesgroep B.V.</option>
<option id="option20" value="20">Bruin Assurantiën</option>
<option id="option21" value="21">Bureau Gras</option>
<option id="option22" value="22">Bureau4 V.O.F. </option>
<option id="option23" value="23">Business Center Bonne Chance B.V.</option>
<option id="option24" value="24">C.B.M. Poland</option>
<option id="option25" value="25">CaseWare Nederland B.V.</option>
<option id="option26" value="26">ColorCrew</option>
<option value="27">Coos</option>
<option value="28">Coperatieve Dienstverlening Heerhugowaard U.A.</option>
<option value="29"></option>
<option value="30"></option>
<option value="31"></option>
<option value="32"></option>
<option value="33"></option>
</select>
</div>
<div id="klanten">
<div class="klant-1">
<iframe src="https://jsfiddle.net/q20yjtrh/2/" style="height:200px;width:500px;"></iframe>
</div>
<div class="klant-2">
<iframe src="https://jsfiddle.net/q20yjtrh/2/" style="height:200px;width:500px;"></iframe>
</div>
</div>
</div>

You don't import the jquery library to your html,'$' can't do anything.
$(function(){
$('#klanten-lijst').on('change',function(){
//$('#klanten div').hide();
//$('.klant-'+this.value).show();
});
});
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 45px;
overflow: hidden;
width: 500px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 16px;
height: 45px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 520px;
}
.styled-select.slate {
background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
height: 45px;
width: 500px;
}
.styled-select.slate select {
border: 1px solid #ccc;
font-size: 16px;
height: 45px;
width: 520px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div>
<h2 style="margin: 0 0 0px 20px">Klanten</h2>
<div class="styled-select slate" style="position:fixed;margin-left:20px;">
<select name="klanten" id="klanten-lijst">
<option>Klanten<option>
<option value="1">7LAB LLP</option>
<option value="2">A.Tuin Den Helder B.V.</option>
<option id="option3" value="3">Ace Accounting</option>
<option id="option4" value="4">Administratiekantoor A.C. Koenen</option>
<option id="option5" value="5">Advocatenkantoor Roos</option>
<option id="option6" value="6">Afix</option>
<option id="option7" value="7">Agratechniek</option>
<option id="option8" value="8">Anne van Dalen</option>
<option id="option9" value="9">App-vise</option>
<option id="option10" value="10">Arlette Hazevoet</option>
<option id="option11" value="11">Asko Schoonmaak- en Bedrijfsdiensten B.V.</option>
<option id="option12" value="12">ATAL B.V.</option>
<option id="option13" value="13">Australian Backpackers B.V.</option>
<option id="option14" value="14">Blommestein Gevelonderhoud</option>
<option id="option15" value="15">Blooming bedrijvengroep B.V.</option>
<option id="option16" value="16">Borst Bedden B.V.</option>
<option id="option17" value="17">Bouwbedrijf J. Nat. & Zn. B.V.</option>
<option id="option18" value="18">BouwBoxr B.V.</option>
<option id="option19" value="19">Broersma & De Boer Bouwadviesgroep B.V.</option>
<option id="option20" value="20">Bruin Assurantiën</option>
<option id="option21" value="21">Bureau Gras</option>
<option id="option22" value="22">Bureau4 V.O.F. </option>
<option id="option23" value="23">Business Center Bonne Chance B.V.</option>
<option id="option24" value="24">C.B.M. Poland</option>
<option id="option25" value="25">CaseWare Nederland B.V.</option>
<option id="option26" value="26">ColorCrew</option>
<option value="27">Coos</option>
<option value="28">Coperatieve Dienstverlening Heerhugowaard U.A.</option>
<option value="29"></option>
<option value="30"></option>
<option value="31"></option>
<option value="32"></option>
<option value="33"></option>
</select>
<div id="klanten">
<div class="klant-1" hidden>
<iframe src="../klanten/7LAB LLP.html" style="height:410px;width:1880px;"></iframe>
</div>
<div class="klant-2" hidden>
<iframe src="../paginas/home.html" style="height:410px;width:1880px;"></iframe>
</div>
</div>
<script src="../scripts/klant-reveal.js"></script>
</div>
</div>

Image-dropdown with callback function

My goal is to implement multiple dropdown fields that contain images, are positioned under each other, and that each have a JavaScript function assigned to them I can trigger by a button later on. Roughly saying like "oh, this and this and this got selected, press the button and trigger all the selected functions). The "add-to-cart" Cartjs.additem() function is working proper already, just not in this dropdown environment. I feel I got way over my head of course.
This is my code so far:
$('#options').ddslick();
<style class="cp-pen-styles">*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid__spans-25 {
width: 100%;
padding: 1em;
}
#media screen and (min-width: 48em) {
.grid__spans-25 {
width: 25%;
}
}
#options,
.dd-select,
.dd-options {
width: 100% !important;
}
.dd-selected-text,
.dd-option-text {
line-height: 64px !important;
}
.dd-select {
background: #fff !important;
border-color: #d1d3d4 !important;
border-radius: 0 !important;
}
.dd-selected {
font-weight: normal !important;
}
label {
display: block;
}
input[type="text"], input[type="name"], input[type="email"], input[type="tel"], input[type="password"], select {
background: transparent;
width: 100%;
height: 42px;
padding: 10px;
display: block;
border: 1px solid #d1d3d4;
border-radius: 0;
outline: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
<section class="grid">
<div>
<label for="options">Label</label>
<select id="options" class="test">
<option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
<option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
<option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
<option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
<option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
</select>
</div>
</section>
<section>
<div class="grid__spans-25">
<label for="options">Label</label>
<select id="options" class="test">
<option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
<option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
<option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
<option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
<option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
</select>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>
</script><script src='https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.min.js'></script>
My issue on hand is that a second added dropdown isn't working proper anymore.
I am hoping someone can push me in the right direction or recommend a solution that is easier to implement.
UPDATE
I was able to get the dropdown select and button trigger working. The issue I am having now is that in order to get the pictures added to the dropdown, I need to include the following function:
$('#options').ddslick();
This stops the dropdown from forwarding any value though, the forwarded value is shown as "undefined". Right now it's an either or.
Here is the whole code. The latter two would not prompt a value if I added $('#list1').ddslick(); or $('#list2').ddslick();
<ul class="flex-container">
<li class="flex-item">
<section class="grid__spans-25">
<div >
<label for="options">Label</label>
<select id="options" class="test">
<option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
<option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
<option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
<option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
<option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
</select>
</div>
</section>
</li>
<li class="flex-item">
<section class="grid__spans-25">
<select id="list1">
<option value="9107763265579">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
</select>
</section>
</li>
<li class="flex-item">
<section class="grid__spans-25">
<select id="list2">
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
</select>
</section>
</li>
</ul>
<input type="button" value="Add to Cart" onclick="addToCart()">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>
</script><script src='https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.min.js'></script>
<script >
$('#options').ddslick();
</script>
<script>
function addToCart(){
var school = document.getElementById('list1').value
var item = document.getElementById('list2').value
alert('school: '+school+' item: '+item)
}
</script>

You will have to assign a different id to each instance.
$('#options').ddslick();
$('#options2').ddslick();
<style class="cp-pen-styles">*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid__spans-25 {
width: 100%;
padding: 1em;
}
#media screen and (min-width: 48em) {
.grid__spans-25 {
width: 25%;
}
}
#options,
.dd-select,
.dd-options {
width: 100% !important;
}
.dd-selected-text,
.dd-option-text {
line-height: 64px !important;
}
.dd-select {
background: #fff !important;
border-color: #d1d3d4 !important;
border-radius: 0 !important;
}
.dd-selected {
font-weight: normal !important;
}
label {
display: block;
}
input[type="text"], input[type="name"], input[type="email"], input[type="tel"], input[type="password"], select {
background: transparent;
width: 100%;
height: 42px;
padding: 10px;
display: block;
border: 1px solid #d1d3d4;
border-radius: 0;
outline: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
<section class="grid">
<div>
<label for="options">Label</label>
<select id="options" class="test">
<option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
<option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
<option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
<option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
<option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
</select>
</div>
</section>
<section>
<div class="grid__spans-25">
<label for="options2">Label</label>
<select id="options2" class="test">
<option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
<option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
<option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
<option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
<option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
</select>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>
</script><script src='https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.min.js'></script>

dropdown multiselect disappears

I have a site made with Symfony and there is a dropdown menu with class=multiselect-container dropdown-menu
It works well except when I try to narrow the window : when the "location block" goes under the drop down menu; the drop drop disappears and is not clikable:
https://drive.google.com/open?id=0B2bmESDsWIPoRWtROTREWnVMTmM
here is the code :
<!-- form-category -->
<form name="" method="get" action="/en/listing/search_result" class="form-category alt col-xs-12">
<fieldset>
<legend class="hidden">form-category</legend>
<div class="form-holder">
<div class="col categories">
<strong class="title">
<label for="categories">
Categories
</label>
</strong>
<div class="multiselect">
<select id="categories" name="categories[]" multiple="multiple">
<optgroup label="Kitesurf Rental">
</optgroup> <optgroup label="&#160;&#160;&#160;Kite">
</optgroup> <option value="33">
&#160;&#160;&#160;&#160;&#160;&#160;Bow kite
</option> <option value="34">
&#160;&#160;&#160;&#160;&#160;&#160;Delta kite
</option> <option value="35" selected="selected">
&#160;&#160;&#160;&#160;&#160;&#160;Hybrid kite
</option> <option value="45">
&#160;&#160;&#160;&#160;&#160;&#160;C-KITE
</option> <optgroup label="&#160;&#160;&#160;Board">
</optgroup> <option value="50">
&#160;&#160;&#160;&#160;&#160;&#160;Wake-style Board Boots
</option> <option value="27">
&#160;&#160;&#160;&#160;&#160;&#160;Surfboard
for kiteboarding
</option> <option value="47">
&#160;&#160;&#160;&#160;&#160;&#160;Foil
Board
</option> <option value="48">
&#160;&#160;&#160;&#160;&#160;&#160;Race
board
</option> <option value="49">
&#160;&#160;&#160;&#160;&#160;&#160;Twin-tip
</option> <option value="51">
&#160;&#160;&#160;&#160;&#160;&#160;Wakeskate
</option> <option value="52">
&#160;&#160;&#160;Kitesurf accessories
</option> <option value="64">
&#160;&#160;&#160;Buggy rental
</option> <optgroup label="Wetsuit /Drysuit">
</optgroup> <option value="32">
&#160;&#160;&#160;Wetsuit
</option> <option value="37">
&#160;&#160;&#160;Drysuit
</option> <optgroup label="Stand Up Paddle / Canoe
Kayak">
</optgroup> <option value="20">
&#160;&#160;&#160;Inflatable
</option> <option value="28">
&#160;&#160;&#160;Surf SUP
</option> <option value="29">
&#160;&#160;&#160;Flatwater
</option> <option value="30">
&#160;&#160;&#160;Flatwater
</option> <option value="31">
&#160;&#160;&#160;Race SUP
</option> <option value="62">
&#160;&#160;&#160;Kayak / Canoe
</option> <optgroup label="Surf">
</optgroup> <option value="44">
&#160;&#160;&#160;Hybrid
</option> <option value="43">
&#160;&#160;&#160;Gun
</option> <option value="42">
&#160;&#160;&#160;Fish
</option> <option value="41">
&#160;&#160;&#160;Longboard
</option> <option value="40">
&#160;&#160;&#160;Funboard
</option> <option value="39">
&#160;&#160;&#160;Shortboard
</option> <optgroup label="Diving">
</optgroup> <option value="57">
&#160;&#160;&#160;Console Gauges
</option> <option value="56">
&#160;&#160;&#160;Nitrox Computer
</option> <option value="55">
&#160;&#160;&#160;Regulator
</option> <option value="54">
&#160;&#160;&#160;Vest BCD
</option> <option value="58">
&#160;&#160;&#160;Octopus or Alternate Air Source
</option> <option value="59">
&#160;&#160;&#160;Air Tank
</option> <option value="60">
&#160;&#160;&#160;Weight and/or Weight Belt
</option> <option value="61">
&#160;&#160;&#160;Scuba accessories
</option> <option value="63">
MTB Mountainboard rental
</option></select>
</div>
</div>
<div class="col location">
<strong class="title">
<label for="location_address">
Place
</label>
</strong>
<div class="field-holder">
CSS
.multiselect-container {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0
}
.multiselect-container .input-group {
margin: 5px
}
.multiselect-container > li {
padding: 0
}
.multiselect-container > li > a.multiselect-all label {
font-weight: 700
}
.multiselect-container > li.multiselect-group label {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
font-weight: 700
}
.multiselect-container > li.multiselect-group-clickable label {
cursor: pointer
}
.multiselect-container > li > a {
padding: 0
}
.multiselect-container > li > a > label {
margin: 0;
height: 100%;
cursor: pointer;
font-weight: 400;
padding: 3px 20px 3px 40px
}
.multiselect-container > li > a > label.radio, .multiselect-container > li > a > label.checkbox {
margin: 0
}
.multiselect-container > li > a > label > input[type=checkbox] {
margin-bottom: 5px
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio {
padding: 3px 20px 3px 40px
}
.form-inline .multiselect-container li a label.checkbox input[type=checkbox], .form-inline .multiselect-container li a label.radio input[type=radio] {
margin-left: -20px;
margin-right: 0
}
If you have an idea what I could do ?
Thank you

The problem was That bootstrap was outdated, I just needed to change the link to the new bootstrap version https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

datalist vertical scroll not working in chrome

I have used datalist function to list my product names, if list goes too long vertical scrolling not display in google chrome and some browsers. Is it possible to add overflow-y: scroll in css style for datalist? Used code below:
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
<option value="h"></option>
<option value="i"></option>
<option value="j"></option>
<option value="k"></option>
<option value="l"></option>
<option value="m"></option>
<option value="n"></option>
<option value="o"></option>
<option value="p"></option>
<option value="q"></option>
<option value="r"></option>
<option value="s"></option>
<option value="t"></option>
<option value="u"></option>
<option value="v"></option>
<option value="w"></option>
<option value="x"></option>
<option value="y"></option>
<option value="z"></option>
<option value="abc"></option>
<option value="def"></option>
<option value="ghi"></option>
<option value="jkl"></option>
<option value="mno"></option>
<option value="pqrs"></option>
<option value="tuv"> </option>
</datalist>
<input type="submit">
</form>

There is simple solution for this. Use https://github.com/b3n/datalist plugin.
Example:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="YOURBASE_JS_PATH/src/datalist.js"></script>
var maxHeight = '200px';
var openOnClick = true;
$('input[list]').datalist(maxHeight, openOnClick);

Unfortunately, No you can't use overflow-y property for datalist. You will have to write jQuery code to make it happen or at least show all possible values.
I wrote a small example for you i hope it will help you to get it done for you yourself:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#options{
display: none;
height: 300px;
text-align: center;
border: 1px solid red;
overflow-y:scroll;
}
#options>p{
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
<option value="h"></option>
<option value="i"></option>
<option value="j"></option>
<option value="k"></option>
<option value="l"></option>
<option value="m"></option>
<option value="n"></option>
<option value="o"></option>
<option value="p"></option>
<option value="q"></option>
<option value="r"></option>
<option value="s"></option>
<option value="t"></option>
<option value="u"></option>
<option value="v"></option>
<option value="w"></option>
<option value="x"></option>
<option value="y"></option>
<option value="z"></option>
</datalist>
<input type="submit">
<div id="options">
</div>
</form>
<div class="med_rec"></div>
<script>
$('#browsers option').each(function(){
$('#options').append('<p>'+$(this).val()+'</p>');
})
$('#options').css({'width':$('input[name="browser"]').width()});
$('input[name="browser"]').click(function(){
$('#options').show();
});
$('input[name="browser"]').keyup(function(){
$('#options').hide();
});
$('#options p').click(function(){
$('input[name="browser"]').val($(this).text());
$('#options').hide();
})
</script>
</body>
</html>
It actually creates a second option list for you to choose from which is scrollable and if user types in input box then datalist works as expected to give suggestions.
I hope it helps

I have used ComboBox Javascript Component to fix this problem, from: https://www.zoonman.com/projects/combobox/
var no = new ComboBox('cb_identifier');
div.combobox {
font-family: Tahoma;
font-size: 12px
}
div.combobox {
position: relative;
zoom: 1
}
div.combobox div.dropdownlist {
display: none;
width: 200px;
border: solid 1px #000;
background-color: #fff;
height: 200px;
overflow: auto;
position: absolute;
top: 18px;
left: 0px;
}
div.combobox .dropdownlist a {
display: block;
text-decoration: none;
color: #000;
padding: 1px;
height: 1em;
cursor: default
}
div.combobox .dropdownlist a.light {
color: #fff;
background-color: #007
}
div.combobox .dropdownlist,
input {
font-family: Tahoma;
font-size: 12px;
}
div.combobox input {
float: left;
width: 182px;
border: solid 1px #ccc;
height: 15px
}
div.combobox span {
border: solid 1px #ccc;
background: #eee;
width: 16px;
height: 17px;
float: left;
text-align: center;
border-left: none;
cursor: default
}
<script type="text/javascript" charset="utf-8" src="https://www.zoonman.com/projects/combobox/combobox.js"></script>
<div class="combobox">
<input type="text" name="comboboxfieldname" id="cb_identifier">
<span>▼</span>
<div class="dropdownlist">
<a>Item1</a>
<a>Second Item2</a>
<a>Third Item3</a>
</div>
</div>

Categories