We Keep Coding

Ease Transition of Toggling Div with jQuery

I'm trying to establish a smooth transition when toggling a div. Right now the toggle is immediate.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
})
});
.description-container {
font-family: "Proxima Nova Regular";
}
.form-div-outer {
margin: 10px 0;
}
.product-suggestion-form-container {
border: 1px solid #c6c6c6;
border-bottom: none;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #f8f7f7;
cursor: pointer;
}
/*initial display*/
.form-div-top {
display: none;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="description-container">
Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required> </input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
I've tried to add .animate() and .fadeIn() but neither are working. Is my syntax wrong? Is the way I'm calling them wrong? Transition is still immediate.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle()
$(".form-div-top").animate({
duration: 200
});
$(".form-div-top").fadeIn( "slow", function() {
// Animation complete
});
})
});

jQuery's toggle method accepts a duration in milliseconds as the first argument.
$(".form-div-top").toggle(300);
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle(300);
})
});
.description-container {
font-family: "Proxima Nova Regular";
}
.form-div-outer {
margin: 10px 0;
}
.product-suggestion-form-container {
border: 1px solid #c6c6c6;
border-bottom: none;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #f8f7f7;
cursor: pointer;
}
/*initial display*/
.form-div-top {
display: none;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="description-container">
Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required> </input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>

On my own I can suggest a solution using the toggleClass() method:
...
$(".form-div-top").toggleClass("form-div-top_show");
...
It is necessary to create an additional class for the block activity:
.form-div-top_show {
opacity: 1;
}
And also, you need to add a transition rule for the smooth appearance of the block, and replace display: none with opacity: 0:
.form-div-top {
opacity: 0;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
transition: .5s;
}
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggleClass("form-div-top_show");
})
});
.description-container {
font-family: "Proxima Nova Regular";
}
.form-div-outer {
margin: 10px 0;
}
.product-suggestion-form-container {
border: 1px solid #c6c6c6;
border-bottom: none;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #f8f7f7;
cursor: pointer;
}
/*initial display*/
.form-div-top {
opacity: 0;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
transition: .5s;
}
.form-div-top_show {
opacity: 1;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="description-container">
Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required> </input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>

Controlling Element Height With jQuery - Why Isn't This Working?

I'm trying to change the height of a div element with a function triggered by "onmouseover" in jQuery. However, when I hover over the element, nothing happens. There are no errors in the console and as far as I can see this should be working. Any suggestions would be much appreciated. Thanks for your help.
function lowerRaise() {
var getHeiggt = document.getElementsByClassName('searchItem')[0];
var tehHeiegt = jQuery(getHeiggt).height();
var allTIms = document.getElementsByClassName('searchItem');
if (tehHeiegt > 0) {
for (i = 0; i < allTIms.length; i++) {
jQuery(allTIms[i]).height("9px");
jQuery(allTIms[i]).css("padding-top", "3px");
jQuery(allTIms[i]).css("padding-bottom", "10px");
}
} else {
for (i = 0; i < allTIms.length; i++) {
jQuery(allTIms[i]).height("0px");
jQuery(allTIms[i]).css("padding-top", "0px");
jQuery(allTIms[i]).css("padding-bottom", "0px");
}
}
}
.searchItem {
height: 9px;
transition: 0.3s;
background-color: white;
color: black;
padding: 3px 0px 10px 6px;
border-bottom: 1px solid lightgrey;
cursor: pointer;
}
.searchItem a {
display: block;
color: black;
text-decoration: none;
}
.searchItem a:hover {
display: block;
color: black;
text-decoration: none;
}
.searchItem:hover {
background-color: lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onmouseover="lowerRaise()" role="search" method="get" class="search-form" action="/">
<label>
<span class="screen-reader-text">Search for:</span>
<input autocomplete="off" type="search" class="search-field" placeholder="Search …" value="" name="s">
</label>
<input type="submit" class="search-submit" value="Search">
</form>
<div id="searchDrop" style="transition: 0.5s;">
<div class="searchItem"><a style="" href="/?s=dress">Dresses</a></div>
<div class="searchItem">Sweaters</div>
<div class="searchItem">Blouses</div>
<div class="searchItem">Pants</div>
<div class="searchItem">Tops</div>
<div class="searchItem">T-Shirts</div>
<div class="searchItem">Skirts</div>
<div class="searchItem">Shirts</div>
<div class="searchItem">Blazers</div>
</div>

How to validate without allowing gmail and yahoo while user signing up?

How to Validate? Don’t allow Gmail, Yahoo, etc email addresses. And one more issue is that when all the fields are not entered submit should be disabled. when i fill all submit is enabled and when i remove one input after filling it, submit should be disabled, but still it's enabled. How to fix that?
$("#passwordv").on("focusout", function (e) {
if ($(this).val() != $("#passwordvConfirm").val()) {
$("#passwordvConfirm").removeClass("valid").addClass("invalid");
$('#btn-1').show();
} else {
$("#passwordvConfirm").removeClass("invalid").addClass("valid");
$('#btn').removeAttr("disabled");
$('#btn-1').hide();
}
});
$("#passwordvConfirm").on("keyup", function (e) {
if ($("#passwordv").val() != $(this).val()) {
$(this).removeClass("valid").addClass("invalid");
$('#btn-1').show();
} else {
$(this).removeClass("invalid").addClass("valid");
$('#btn').removeAttr("disabled");
$('#btn-1').hide();
}
});
$(document).ready(function () {
$('#passwordv').keyup(function () {
$('#result').html(checkStrength($('#passwordv').val()))
})
function checkStrength(password) {
var strength = 0
if (password.length < 6) {
$('#result').removeClass()
$('#result').addClass('short')
return 'Too short'
}
if (password.length > 7) strength += 1
// If password contains both lower and uppercase characters, increase strength value.
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
// If it has numbers and characters, increase strength value.
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
// If it has one special character, increase strength value.
if (password.match(/([!,%,&,#,#,$,^,*,?,_,~])/)) strength += 1
// If it has two special characters, increase strength value.
if (password.match(/(.*[!,%,&,#,#,$,^,*,?,_,~].*[!,%,&,#,#,$,^,*,?,_,~])/)) strength += 1
// Calculated strength value, we can return messages
// If value is less than 2
if (strength < 2) {
$('#result').removeClass()
$('#result').addClass('weak')
return 'Weak'
} else if (strength == 2) {
$('#result').removeClass()
$('#result').addClass('good')
return 'Good'
} else {
$('#result').removeClass()
$('#result').addClass('strong')
return 'Strong'
}
}
});
$('.form').find('input, textarea').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if ($this.val() === '') {
label.removeClass('highlight');
} else if ($this.val() !== '') {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #f1f0ee;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #1ab188;
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
background: rgba(19, 35, 47, 0.9);
padding: 40px;
max-width: 600px;
margin: 130px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
#media only screen and (max-width: 768px) {
.form {
background: rgba(19, 35, 47, 0.9);
padding: 40px;
max-width: 600px;
margin: 30px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: rgba(160, 179, 176, 0.25);
color: #a0b3b0;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #179b77;
color: #ffffff;
}
.tab-group .active a {
background: #1ab188;
color: #ffffff;
}
.tab-content>div:last-child {
display: none;
}
h1 {
text-align: center;
color: #ffffff !important;
font-weight: 300;
margin: 0 0 40px !important;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 13px;
color: rgba(255, 255, 255, 0.5);
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
margin-top: 18px;
}
label .req {
margin: 2px;
color: #1ab188;
}
label.active {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #ffffff;
}
input,
textarea {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 8px 10px;
background: none;
background-image: none;
border: 1px solid #a0b3b0;
color: #ffffff;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus,
textarea:focus {
outline: 0;
border-color: #1ab188;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 25px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row>div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row>div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 50px;
padding: 15px 0;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
background: #1ab188;
color: #ffffff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover,
.button:focus {
background: #179b77;
}
.button-block {
display: block;
width: 50%;
margin: 0 auto;
}
.forgot {
text-align: right;
}
#toast-container {
top: 4% !important;
right: 40% !important;
left: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="form">
<ul class="tab-group">
<li class="tab active">Log In</li>
<li class="tab">Sign Up</li>
</ul>
<div class="tab-content">
<div id="login">
<form id="form_id" method="post" name="myform">
<div class="field-wrap">
<label>
User Name<span class="req">*</span>
</label>
<input type="text" autocomplete="off" name="username" id="username" required>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" autocomplete="off" name="password" id="password" required>
</div>
<p class="forgot">Forgot Password?</p>
<input type="button" value="Log in" id="submit" onclick="validate()" class="button button-block">
</form>
</div>
<div id="signup">
<form>
<div class="field-wrap">
<label>
Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Company Details<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label for="passwordv">
Set A Password<span class="req">*</span>
</label>
<input id="passwordv" type="password" class="validate" required autocomplete="off" />
<span id="result" style="color: white;"></span>
</div>
<div class="field-wrap" style="margin-bottom: 0px">
<label id="lblPasswordvConfirm" for="passwordvConfirm" data-error="Password not match"
data-success="Password Match">
Confirm Password<span class="req">*</span>
</label>
<input id="passwordvConfirm" type="password" required autocomplete="off" />
</div>
<label class="field-wrap" id="btn-1" style="display: none;color: white;font-size: 15px">password
didn't match
</label>
<input type="submit" value="submit" id="btn" class="button button-block" style="margin-top:20px;cursor:not-allowed"
disabled />
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->

Okay, so I broke down your code a bit to make it more easily understood. This example will only include your signup part of your application.
As I explained in my comment, what you could do to test the E-mails to see whether they are a Gmail or a Yahoo E-mail, is by using regular expressions (RegExp).
Example of Gmail RegExp:
/([a-zA-Z0-9]+)([\.{1}])?([a-zA-Z0-9]+)\#gmail([\.])com/g
Example of Yahoo RegExp:
/^[^#]+#(yahoo|ymail|rocketmail)\.(com|in|co\.uk)$/i
In my example, I'll put them into functions for simplicity.
Gmail RegExp function:
function regExpGmail() {
return RegExp(/([a-zA-Z0-9]+)([\.{1}])?([a-zA-Z0-9]+)\#gmail([\.])com/g);
}
Yahoo RegExp function:
function regExpYahoo() {
return RegExp(/^[^#]+#(yahoo|ymail|rocketmail)\.(com|in|co\.uk)$/i);
}
Now, I altered some of your code a bit in order to have some selectors to go by. Some of your input fields did not contain any selectors, such as name or id, while others did. So I took the liberty to add some.
One thing to note, is that the id you assigned your password input field (not the password confirm one, but the one before that) had some id conflicts. Therefore I took the liberty to change the id accordingly.
I then made a function handling all the validation logic of the input fields to fit your needs in your question. However, again, pretty simplified. I would suggest you alter it to fit your solution a little bit better, but it should give you more than a general idea.
Full Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
function regExpGmail() {
return RegExp(/([a-zA-Z0-9]+)([\.{1}])?([a-zA-Z0-9]+)\#gmail([\.])com/g);
}
function regExpYahoo() {
return RegExp(/^[^#]+#(yahoo|ymail|rocketmail)\.(com|in|co\.uk)$/i);
}
function validateInputs() {
reGmail=regExpGmail();
reYahoo=regExpYahoo();
var result = true;
var nameCheck=$('#nameField').val();
var emailCheck=$('#emailField').val();
var compDetailsCheck=$('#compDetailsField').val();
var passwordCheck=$('#passwordvz').val();
var passwordConfirmCheck=$('#passwordvConfirm').val();
if(!nameCheck) {
result=false;
$('#nameError').html('Name is missing!');
}
else {
$('#nameError').html('');
}
if(!emailCheck) {
result=false;
$('#emailError').html('E-mail is missing!');
}
else if(reGmail.test(emailCheck)) {
result=false;
$('#emailError').html('Gmail is not allowed!');
}
else if(reYahoo.test(emailCheck)) {
result=false;
$('#emailError').html('Yahoo is not allowed!');
}
else {
$('#emailError').html('');
}
if(!compDetailsCheck) {
result=false;
$('#compDetailsError').html('Company Details is missing!');
}
else {
$('#compDetailsError').html('');
}
if(!passwordCheck) {
result=false;
$('#passwordError').html('Password is missing!');
}
else {
$('#passwordError').html('');
}
if(passwordCheck != passwordConfirmCheck) {
result=false;
$('#passwordError2').html('The passwords do not match!');
}
else {
$('#passwordError2').html('');
}
if(result == true) {
$('#btn').removeAttr('disabled');
$('#btn').css("cursor", "");
alert('Everything ok, you may now press the submit button!');
}
}
</script>
<div class="form">
<div class="tab-content">
<div id="signup">
<form>
<div class="field-wrap">
<span id="nameError" style="color: red !important;"></span><br />
<label>
Name<span class="req">*</span>
</label>
<input type="text" id="nameField" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<div class="field-wrap">
<span id="emailError" style="color: red !important;"></span><br />
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" id="emailField" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<div class="field-wrap">
<span id="compDetailsError" style="color: red !important;"></span><br />
<label>
Company Details<span class="req">*</span>
</label>
<input type="text" id="compDetailsField" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<div class="field-wrap">
<span id="passwordError" style="color: red !important;"></span><br />
<label for="passwordv">
Set A Password<span class="req">*</span>
</label>
<input id="passwordvz" type="password" class="validate" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<div class="field-wrap" style="margin-bottom: 0px">
<span id="passwordError2" style="color: red !important;"></span><br />
<label id="lblPasswordvConfirm" for="passwordvConfirm" data-error="Password not match"
data-success="Password Match">
Confirm Password<span class="req">*</span>
</label>
<input id="passwordvConfirm" type="password" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<input type="submit" value="submit" id="btn" class="button button-block" style="margin-top:20px;cursor:not-allowed" disabled />
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
Screenshots of the validation process:

jQuery for each input change text for matching element

I'm making a printable ICE card. User enters info in form inputs and they are shown preview below.
The code I have is working fine, but I have to copy/paste it for each input/element match. I want to compress the code so that it listens for changes for each input and changes the text for matching element.
Snippet below. JSFiddle is here
$("#inputName").keyup(function() {
$("#spanName").html($(this).val());
});
$("#inputHCN").keyup(function() {
$("#spanHCN").html($(this).val());
});
$("#inputDOB").keyup(function() {
$("#spanDOB").html($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>

Data attributes is the way I would go
$("[data-out]").keyup(function() {
var selector = $(this).data("out");
$(selector).text($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name" data-out="#spanName">
</p>
<p>
<input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #" data-out="#spanHCN">
</p>
<p>
<input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B." data-out="#spanDOB">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>

Add data-target attribute to your form elements with ids of elements where the text should be displayed:
<input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">
Now change your scripts to display the text. Note that I am using two events keyup and change so that copy-paste would work as well.
$(".form-control").on('keyup change', function(e) {
var target = $(this).data("target");
$(target).html($(this).val());
});
Demo shown below:
$(".form-control").on('keyup change', function(e) {
var target = $(this).data("target");
$(target).html($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="inputHCN" data-target="#spanHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="inputDOB" data-target="#spanDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>

There could be a lot of variants, here is a short one that rely to keep a naming convention between input id attribute and span id attribute:
$("#inputName,#inputHCN,#inputDOB").keyup(function() {
$("#span" + this.id.replace('input', '')).html($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>

Another way is through replacing input with span assuming that the naming convention is followed.
$("#inputName, #inputHCN, #inputDOB").keyup(function() {
var spanId = $(this).attr("id").replace("input", "span");
$("#" + spanId).html($(this).val());
});

You can try this. Hope it will help. Just change the name of textboxes and find the span control using textbox name.
$("#inputName,#inputHCN,#inputDOB").keyup(function() {
var inputValue = $(this).attr("name");
$("#span" + inputValue).html($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="Name" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="HCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="DOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>

You could loop through inputs and add event listeners to each:
var inputs = $('form p input');
for (var i=0; i<inputs.length; i++) {
$(inputs[i]).keyup(function() {
var span = $(this).attr('id').replace('input','span');
$("#"+span).html($(this).val());
});
}
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>

//map the names of the input elements with the output elements
var myIOMap={
inputName:"spanName",
inputHCN:"spanHCN",
inputDOB:"spanDOB",
};
function doTextBinding(ioMap){
Object.keys(ioMap).forEach(function(inputName,outputName){
var inputElement="#"+inputName;
var outputElement="#"+ioMap[inputName];
console.log(inputElement);
console.log(outputElement);
$(inputElement).keyup(function() {
$(outputElement).html($(this).val());
});
});
}
doTextBinding(myIOMap);
Replace your JavaScript with the following code, it will do the same without having to rewrite the key-up binding for each element. Make sure you call the function every time the page initializes though.

Copy to clipboard when click on div

How can i use this code so that it affects multiple input fields.
So when someone clicks on a button every input get's that value added to the original.
But the added value has to toggle on and off.
HTML
<button id="toggle1" onclick="myFunction1()" class="1">Circle On</button>
<button id="toggle2" onclick="myFunction2()" class="2">Square On</button>
<button id="toggle3" onclick="myFunction3()" class="3">Border On</button>
<li>
<div class="icon icon-arrow-d"></div>
<input id="text" type="text" readonly="readonly" value="arrow-d">
</li>
<li>
<div class="icon icon-arrow-d"></div>
<input id="text" type="text" readonly="readonly" value="arrow-d">
</li>
<li>
<div class="icon icon-arrow-d"></div>
<input id="text" type="text" readonly="readonly" value="arrow-d">
</li>
Script
document.getElementById('toggle1').onclick = function() {
var txt = ' circle',
area = document.getElementById('text');
area.value = area.value.indexOf(txt) != -1 ? area.value.replace(txt, '') : area.value + txt;
}
document.getElementById('toggle2').onclick = function() {
var txt = ' square',
area = document.getElementById('text');
area.value = area.value.indexOf(txt) != -1 ? area.value.replace(txt, '') : area.value + txt;
}
document.getElementById('toggle3').onclick = function() {
var txt = ' border',
area = document.getElementById('text');
area.value = area.value.indexOf(txt) != -1 ? area.value.replace(txt, '') : area.value + txt;
}

Try it!
function copyToClipboard(text) {
if (window.clipboardData) { // Internet Explorer
window.clipboardData.setData("Text", text);
} else {
unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
const clipboardHelper = Components.classes["#mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
clipboardHelper.copyString(text);
}
}

Your all input ID values are same ,
if you want to change all input when click try with it jquery
look it
<pre>https://jsfiddle.net/6xyasx7u/</pre>

I have the answer.
$('#toggle1,#toggle2,#toggle3').click(function() {
toggleText(this.innerHTML.toLowerCase());
});
function toggleText(text) {
$(".text").each(function() {
var totalArray = [' circle', ' square', ' border'];
if ($(this).val().indexOf(text) != -1) {
var regex1 = new RegExp(text, "");
$(this).val($(this).val().replace(regex1, ""));
console.log("After replacing " + $(this).val());
} else {
//console.log( "After replacing " + $(this).val() );
$(this).val($(this).val() + "" + text);
//console.log( "After replacing " + $(this).val() );
}
totalArray.splice(totalArray.indexOf(text), 1);
console.log(totalArray);
var regex2 = new RegExp(totalArray.join("|"), "");
console.log(regex2);
$(this).val($(this).val().replace(regex2, ""));
});
}
$(document).ready(function() {
$("button.cirkel").click(function() {
$(".icon").removeClass("border");
$(".icon").removeClass("square");
$(".icon").toggleClass("circle");
$("button.cirkel").toggleClass("on");
$("button.vierkant").removeClass("on");
$("button.rand").removeClass("on");
});
$("button.vierkant").click(function() {
$(".icon").removeClass("border");
$(".icon").toggleClass("square");
$(".icon").removeClass("circle");
$("button.cirkel").removeClass("on");
$("button.vierkant").toggleClass("on");
$("button.rand").removeClass("on");
});
$("button.rand").click(function() {
$(".icon").toggleClass("border");
$(".icon").removeClass("square");
$(".icon").removeClass("circle");
$("button.cirkel").removeClass("on");
$("button.vierkant").removeClass("on");
$("button.rand").toggleClass("on");
});
$("#uitleg-toggle").click(function() {
$("#uitleg").toggleClass("zichtbaar");
});
$("input:text").focus(function() {
$(this).select();
});
});
body {
font-family: Arial, Helvetica, Verdana, sans-serif;
}
ul {
padding: 0;
margin: 10px 0 0 0;
}
li {
list-style-type: none;
display: block;
left: 0;
margin: 5px 0 5px 0;
postiton: relative;
float: left;
}
button {
width: 100px;
border-radius: 7px;
height: 40px;
font-size: 20px;
border: 0px;
margin: 10px 10px 10px 0;
color: #FFF;
background-color: #D95021;
border: 3px outset #EA6C40;
display: block;
float: left;
cursor: pointer;
outline: none;
}
button:hover {
background-color: #F9794D;
}
.on {
background-color: #5DC55D !important;
color: #FFF !important;
border: 3px outset #6BD46B;
}
.icon {
height: 66px !important;
width: 66px !important;
margin: 0 auto;
font-size: 55px !important;
padding: 10px !important;
text-align: center;
}
input {
border-radius: 10px;
padding: 10px;
border: 1px solid #dedede;
font-size: 16px;
text-transform: uppercase;
}
.circle {
border-radius: 80px !important;
display: block;
border: 3px solid #FF0066;
background-color: #FF0066;
transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
cursor: pointer;
text-decoration: none;
color: #FFF !important;
}
.circle:hover {
background-color: #FFF;
border: 3px solid #FF0066;
color: #FF0066 !important;
}
.square {
border-radius: 10px !important;
display: block;
background-color: #FF0066;
border: 3px solid #FF0066;
transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
cursor: pointer;
text-decoration: none;
color: #FFF !important;
}
.square:hover {
background-color: #FFF;
border: 3px solid #FF0066;
background-color: #FFF;
color: #FF0066 !important;
}
.border {
border-radius: 80px !important;
border: 3px solid #FF0066;
display: block;
background-color: #FFF;
transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
cursor: pointer;
text-decoration: none;
color: #FF0066 !important;
}
.border:hover {
background-color: #FF0066 !important;
color: #FFF !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Click to add a class to see how it looks with a extra classname.</h3>
<button id="toggle1" class="cirkel">Circle</button>
<button id="toggle2" class="vierkant">Square</button>
<button id="toggle3" class="rand">Border</button>
<div style="clear:both;"></div>
<ul class="glyphs css-mapping">
<li>
<div class="icon lm-home">1</div>
<input id="text" class="text" type="text" readonly="readonly" value="home">
</li>
<li>
<div class="icon lm-notes">2</div>
<input id="text" class="text" type="text" readonly="readonly" value="notes">
</li>
<li>
<div class="icon lm-info">3</div>
<input id="text" class="text" type="text" readonly="readonly" value="info">
</li>
<li>
<div class="icon lm-support">4</div>
<input id="text" class="text" type="text" readonly="readonly" value="support">
</li>
<li>
<div class="icon lm-check">5</div>
<input id="text" class="text" type="text" readonly="readonly" value="check">
</li>
<li>
<div class="icon lm-cross">6</div>
<input id="text" class="text" type="text" readonly="readonly" value="cross">
</li>
<li>
<div class="icon lm-min">7</div>
<input id="text" class="text" type="text" readonly="readonly" value="min">
</li>
<li>
<div class="icon lm-full">8</div>
<input id="text" class="text" type="text" readonly="readonly" value="full">
</li>
<li>
<div class="icon lm-menu">9</div>
<input id="text" class="text" type="text" readonly="readonly" value="menu">
</li>
<li>
<div class="icon lm-menu-list">10</div>
<input id="text" class="text" type="text" readonly="readonly" value="menu-list">
</li>
<li>
<div class="icon lm-dots">11</div>
<input id="text" class="text" type="text" readonly="readonly" value="dots">
</li>
<li>
<div class="icon lm-star">12</div>
<input id="text" class="text" type="text" readonly="readonly" value="star">
</li>
<li>
<div class="icon lm-zoom">13</div>
<input id="text" class="text" type="text" readonly="readonly" value="zoom">
</li>
<li>
<div class="icon lm-excl-mark">14</div>
<input id="text" class="text" type="text" readonly="readonly" value="excl-mark">
</li>
<li>
<div class="icon lm-question">15</div>
<input id="text" class="text" type="text" readonly="readonly" value="question">
</li>
<li>
<div class="icon lm-arrow-rd">16</div>
<input id="text" class="text" type="text" readonly="readonly" value="arrow-rd">
</li>
<li>
<div class="icon lm-s-arrow-r">17</div>
<input id="text" class="text" type="text" readonly="readonly" value="s-arrow-r">
</li>
<li>
<div class="icon lm-reset">18</div>
<input id="text" class="text" type="text" readonly="readonly" value="reset">
</li>
</ul>
</div>