remove element with click on outer element in window with javascript - javascript

I want, That user click on input type="checkbox", "textarea" is displayed.
then when user click on anywhere except same "textarea", same "textarea" is hidden.
please help me that do this work.
If you have a suggestion for solving this problem, thank you for letting me know.
Thank you in advance for your cooperation.
var requiredDescription = document.querySelectorAll(".required-description");
requiredDescription.forEach(item => {
item.addEventListener('click', function(){
item.classList.toggle('active');
});
});
window.addEventListener("click", function(event){
var desText = document.querySelector('input.active');
if (event.target !== desText) {
description.classList.remove('show');
}
});
.items{
border: 1px solid var(--txt);
padding: .5rem;
border-radius: 10px;
}
p > span.label{
width: 30%;
display: block;
}
p > span.label-items{
width: 70%;
display: flex;
align-items: center;
justify-content: space-between;
}
p > span.label-items > lable.label-item{
display: flex;
align-items: center;
width: 100%;
}
.description{
border: 2px solid var(--c2);
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 20%;
top: 10%;
width: 50%;
z-index: 1;
padding: 1rem;
display: none;
}
p > span.label-items > label.label-item > input.active ~ .description{
display: block;
}
<p class="items">
<span class="label">example1</span>
<span class="label-items">
<label class="label-item" for="Others">
<input type="checkbox" name="Others" id="Others" class="required-description">
Others
<textarea class="description" placeholder="Define who" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example2</span>
<span class="label-items">
<label class="label-item" for="Yes">
<input type="checkbox" name="Yes" id="Yes" class="required-description">
Yes
<textarea class="description" placeholder="Explain more" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example3</span>
<span class="label-items">
<label class="label-item" for="ok">
<input type="checkbox" name="ok" id="ok" class="required-description">
Yes
<textarea class="description" placeholder="Define" cols="50" rows="3"></textarea>
</label>
</span>
</p>

You can add click event to body element and check the element which is clicked to remove the class.
You can try the following way:
var requiredDescription = document.querySelectorAll(".required-description");
requiredDescription.forEach(item => {
item.addEventListener('click', function(){
item.classList.toggle('active');
});
});
document.querySelector('body').addEventListener('click', function(e){
if(!(e.target.nodeName == 'SPAN' || e.target.nodeName == 'INPUT' || e.target.nodeName == 'TEXTAREA')){
requiredDescription.forEach(item => {
item.classList.remove('active');
document.querySelectorAll(":checked").forEach(function(chk){
chk.checked = false;
});
});
}
});
.items{
border: 1px solid var(--txt);
padding: .5rem;
border-radius: 10px;
}
p > span.label{
width: 30%;
display: block;
}
p > span.label-items{
width: 70%;
display: flex;
align-items: center;
justify-content: space-between;
}
p > span.label-items > lable.label-item{
display: flex;
align-items: center;
width: 100%;
}
.description{
border: 2px solid var(--c2);
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 20%;
top: 10%;
width: 50%;
z-index: 1;
padding: 1rem;
display: none;
}
p > span.label-items > label.label-item > input.active ~ .description{
display: block;
}
I want, That user click on input type="checkbox", "textarea" is displayed. then when user click on anywhere except same "textarea", same "textarea" is hidden. please help me that do this work. If you have a suggestion for solving this problem, thank you for letting me know. Thank you in advance for your cooperation.
<p class="items">
<span class="label">example1</span>
<span class="label-items">
<label class="label-item" for="Others">
<input type="checkbox" name="Others" id="Others" class="required-description">
Others
<textarea class="description" placeholder="Define who" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example2</span>
<span class="label-items">
<label class="label-item" for="Yes">
<input type="checkbox" name="Yes" id="Yes" class="required-description">
Yes
<textarea class="description" placeholder="Explain more" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example3</span>
<span class="label-items">
<label class="label-item" for="ok">
<input type="checkbox" name="ok" id="ok" class="required-description">
Yes
<textarea class="description" placeholder="Define" cols="50" rows="3"></textarea>
</label>
</span>
</p>

Related

Is it possible to display a tooltip only when hovered over a checked radio button using jQuery

I want to display the tooltip only when I hover over a checked radio button.
When hovered on the radio button I'm trying to check
$(this).is(':checked') == true
But the tooltip is displayed only when hovered on "Yes". What am I doing wrong here?.
Any suggestions are highly appreciated. Thanks in advance. :)
$("input[name^='radioBtn']").hover(function () {
if(($(this).is(':checked')) == true){
var text= "Hello";
$(".displayContents").append(text);
}
});
.radioHover:hover ~ .displayContents{
visibility: visible;
}
.displayContents{
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn radioHover" value="true" id="radioYes" class="radioBtn radioHover"/><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn radioHover" value="true" id="radioNo" class="radioBtn"/><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>
It is not necessary to use jQuery to achieve your desired goal. It is enough to aim the :hover pseudo-class at the :checked pseudo-class, in the css. Like this:
.radioHover:checked:hover ~ .displayContents {
visibility: visible;
}
For unique content of each radio button, use id #radioYes and #radioNo with operator ~.
$("#radioYes ~ .displayContents").text("Hello Yes");
$("#radioNo ~ .displayContents").text("Hello No");
.radioHover:checked:hover ~ .displayContents {
visibility: visible;
}
.displayContents {
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn" value="true" id="radioNo" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>
First of all, you put radioHover into name attribute.
Anyway, you should set radioHover class on the checked button only, like so:
$("input[name='radioBtn']").hover(function () {
this.classList.toggle("radioHover", this.checked);
if($(this).is(':checked') == true){
var text= "Hello";
$(".displayContents").append(text);
}
});
.radioHover:hover ~ .displayContents{
visibility: visible;
}
.displayContents{
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn"/><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn" value="false" id="radioNo" class="radioBtn"/><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>
You had some typos and some misunderstandings. The radioHover class was in the name field, was missing in the class for the 'no' radio. Additionally, you have 2 different . displayContents elements. The way to target the one associated with the radio is via the .closest(selector).find(selector) combo. I didn't think you wanted to actually append the same HTML continuously, so I changed that to .html().
Finally, I added the 'change' event in the mix - that way you'll get your value on hover and on click (if checked). Reason being, you are hovering over the element when you click it. Yet the hover didn't update when the state went from not-checked to checked. Now it does
$("input[name='radioBtn']").on('hover, change', function() {
if ($(this).is(':checked')) {
$(this).closest('div').find(".displayContents").html('Hello from ' + $(this).val());
}
});
.radioHover:checked:hover~.displayContents {
visibility: visible;
}
.displayContents {
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn" value="yes" id="radioYes" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn" value="no" id="radioNo" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>

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>

Dropdown with Radio button and jQuery

I coded a dropdown menu with radio button to change currency in my website. I use jQuery to open/close this dropdown but the currency change doesn't work.
The expanded class is used to open/close the dropdown menu.
I think that the error comes from the line $('#' + $(e.target).attr('for')).prop('checked', true); but I don't know how to modify this. I want it to check the right input.
$('.maincar__currency').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
$('#' + $(e.target).attr('for')).prop('checked', true);
});
$(document).click(function() {
$('.maincar__currency').removeClass('expanded');
});
.maincar__currency {
display: flex;
flex-direction: column;
min-height: 32px;
max-height: 32px;
margin-left: auto;
margin-bottom: 10px;
overflow: hidden;
border-radius: 6px;
box-sizing: border-box;
box-shadow: $shadowBox;
font-size: 14px;
font-weight: 500;
}
.maincar__currency label {
display: flex;
width: 80px;
height: 32px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 8px;
margin-right: 0 auto;
background-color: #fff;
text-align: center;
color: $mediumMainGrey;
cursor: pointer;
//box-sizing: border-box;
}
.maincar__currency label:hover {
background-color: $extraLightGrey;
}
.currency {
display: flex;
width: 100%;
}
.currency input {
display: none;
}
.currency img {
//object-fit: contain;
height: 20px;
width: auto;
margin-right: 6px;
}
.currency span {
display: flex;
//align-items: center;
color: $mediumMainGrey;
text-decoration: none;
}
.expanded {
max-height: 128px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency">
<label for="euro-radio-is">
<div class="currency currency__euro">
<img src="/assets/images/icons/euro.png" alt="Euro sign">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true">
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<img src="/assets/images/icons/dollar.png" alt="Dollar sign">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar">
<span>USD</span>
</div>
</label>
<label for="gbp-radio-is">
<div class="currency currency__pound">
<img src="/assets/images/icons/pound-sterling.png" alt="Pound sign">
<input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp">
<span>GBP</span>
</div>
</label>
<label for="chf-radio-is">
<div class="currency currency__chf">
<img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign">
<input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf">
<span>CHF</span>
</div>
</label>
</div>
Try to use below code:-
$(document).ready(function(){
$("input[type='radio']").click(function(){
var radioValue = $("input[name='currency-is']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
You'll get the radio button value. Let me know if this helps you...
CSS (add these extra classes):
.maincar__currency label{
display: none;
}
.expanded label{
display: block;
}
JS & Html:
$('.maincar__currency').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
});
$(".maincar__currency label").click(function(){
$('#' + $(this).attr('for')).prop('checked', true);
var selected = $('input[name=currency-is]:checked').val(); // <-- add this line
$('.active_currency').text(selected.toUpperCase()); // <-- and this line
alert(selected);
});
$(document).click(function() {
$('.maincar__currency').removeClass('expanded');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency">
<div class="active_currency">EUR</div>
<label for="euro-radio-is">
<div class="currency currency__euro">
<img src="/assets/images/icons/euro.png" alt="Euro sign">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true" />
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<img src="/assets/images/icons/dollar.png" alt="Dollar sign">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar" />
<span>USD</span>
</div>
</label>
<label for="gbp-radio-is">
<div class="currency currency__pound">
<img src="/assets/images/icons/pound-sterling.png" alt="Pound sign">
<input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp" />
<span>GBP</span>
</div>
</label>
<label for="chf-radio-is">
<div class="currency currency__chf">
<img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign">
<input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf" />
<span>CHF</span>
</div>
</label>
</div>

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.

Angular JS : show text box relatively based on click on radio button and change background color of div

image
I am new to angularjs. as shown in the image , by default linkedin radio button is selected.
but when i select on facebook radio button then two textboxes appears for 1 sec and hide the linked in textbox.
when i click on linkedin button then linked in textbox should appear and other textbox should get disappear and when i click on facebook radio button then facebook textbox should appear.
here is JSFiddle
Thank You.
.social_icon_radio_toggle {
float: left;
margin-right: 20px;
}
label {
float: left;
width: 35px;
height: 35px;
overflow: hidden;
cursor: pointer !important;
margin-right: 5px;
}
span {
text-align: center;
font-size: 15px;
margin: auto;
display: block;
}
input {
position: absolute;
}
//wheather radio button is checked or not
input:checked + span {
background-color: $linked_in_bg_color;
color: #fff;
min-height: 100%;
width: 35px;
line-height: 33px;
}
input:not(:checked + span) {
background-color: #edf1f2;
color: #58666e;
}
.linkedin {
background-color: #edf1f2;
color: #58666e;
border: thin #a8a8a8 solid;
color: #a8a8a8;
line-height: 33px;
}
.facebook {
background-color: #edf1f2;
color: #58666e;
border: thin #ced9db solid;
line-height: 35px;
}
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 set_padding_0 social_icons_section">
<div class="social_icon_radio_toggle">
<label class="linkedin">
<input type="radio" name="registration_options" checked="checked" ng-click="option='linkedin'" ng-init="option='linkedin'">
<span><i class="fa fa-linkedin"></i> </span></label>
<label class="facebook">
<input type="radio" name="registration_options" ng-click="option='facebook'">
<span><i class="fa fa-facebook"></i> </span></label>
</div>
<div>
<input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="option == 'linkedin'" ng-hide="option == 'facebook'">
</div>
<input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="option == 'facebook'" ng-hide="option == 'linkedin'">
</div>
.social_icon_radio_toggle{
float: left; margin-right: 20px;
}
label {
float:left;width:35px; height:35px;overflow:hidden;cursor: pointer !important; margin-right: 5px;}
span {text-align:center;font-size: 15px;margin:auto;display: block;}
input {position:absolute;}
//wheather radio button is checked or not
input:checked + span {background-color:$linked_in_bg_color;color:#fff; min-height: 100%; width: 35px; line-height: 33px;}
input:not(:checked + span) {background-color:#edf1f2;color:#58666e;}
.linkedin {background-color:#edf1f2;color: #58666e; border: thin #a8a8a8 solid; color: #a8a8a8;line-height: 33px;}
.facebook {background-color:#edf1f2;color: #58666e;border: thin #ced9db solid; line-height: 35px;}
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 set_padding_0 social_icons_section">
<div class="social_icon_radio_toggle">
<label class="linkedin">
<input type="radio" name="registration_options" checked="checked" ng-click="option='linkedin'" ng-init="option='linkedin'">
<span><i class="fa fa-linkedin"></i> </span></label>
<label class="facebook" >
<input type="radio" name="registration_options" ng-click="option='facebook'">
<span><i class="fa fa-facebook"></i> </span></label>
</div>
<div type="text" ng-show="option === 'linkedin'" >
<input class="form-control " placeholder="www.linkedin.com/example" >
</div>
<div ng-show="option === 'facebook'">
<input class="form-control " placeholder="www.facebook.com/example" type="text" >
</div>
</div>
Here is updated JSFiddle
Hope this helps.
You should use the directive ng-model to track the value of your 'option' property. Then set per every radio button the corresponding ng-value.
And take into account, that ng-show and ng-hide works in similar ways. It is not necessary to use both at the same time.
ng-hide = hide the element if the expression = true
ng-show = show the element if the expression = true
<label class="linkedin" >
<input type="radio" name="registration_options" ng-model="option" ng-value="'linkedin'">
<span><i class="fa fa-linkedin"></i> </span></label>
<label class="facebook" >
<input type="radio" name="registration_options" ng-value="'facebook'" ng-model="option">
<span><i class="fa fa-facebook"></i> </span></label>
<input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="option == 'linkedin'">
<input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="option == 'facebook'">
Working Sample:
https://plnkr.co/edit/ezDAwU41vYKrw7DwWJAB

Categories