HTML input fields as paragraph - javascript

I'm making a web calculator with 2 fields to take inputs, and I want to change its type to paragraph. How to do so? And how add listeners to support tapping on the paragraphs to make them “active” and indicate this somehow with CSS?
Once the web page gets opened somehow I want to take values from the 2 fields.
<div class="calculator">
<div class="screen"></div>
<div class="inputs">
<p id="carbs">Carbs/100g</p>
<p id="portion">Portion (g)</p>
</div>
<div class="calcul">
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button><br>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button><br>
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button><br>
<button id="zero">0</button>
<button id="decimal">.</button>
<button id="clear">C</button><br>
<button id="save">Save</button>
<button id="equals">=</button>
</div>
</div>

To change the input fields to paragraphs and add listeners to them, you can do the following:
const carbsField = document.querySelector("#carbs");
const portionField = document.querySelector("#portion");
carbsField.addEventListener("click", () => {
carbsField.classList.add("active");
portionField.classList.remove("active");
});
portionField.addEventListener("click", () => {
portionField.classList.add("active");
carbsField.classList.remove("active");
});
.input-field {
background-color: lightgray;
padding: 10px;
border-radius: 10px;
cursor: pointer;
display: inline-block;
}
.input-field.active {
background-color: gray;
color: white;
}
<div class="calculator">
<div class="screen">
</div>
<div class="inputs">
<p id="carbs" class="input-field">Carbs/100g: <span id="carbs-value">0</span></p>
<p id="portion" class="input-field">Portion (g): <span id="portion-value">0</span></p>
</div>
<!-- rest of the HTML code -->
</div>

Related

How to toggle multiple divs using jQuery

I have several divs which should be shown / hidden when the corresponding button is clicked. In the initial state all buttons and all divs are visible. When the first button is clicked, only the corresponding div should be visible. When the second button is clicked, the corresponding div should be visible as well etc. The click on a button should toggle the state of the button and the corresponding div.
I'm not sure if this can be realized without placing a cookie or local storage token. So far I've created the following code, which only allows me to deactivate the divs with one first click.
$(function() {
$('.button').click(function(){
$(this).toggleClass('inactive');
$('#mydiv'+$(this).attr('target')).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="button" target="1">Button 1</button>
<button class="button" target="2">Button 2</button>
<button class="button" target="3">Button 3</button>
</div>
<div id="mydiv1">
<p>Div 1</p>
</div>
<div id="mydiv2">
<p>Div 2</p>
</div>
<div id="mydiv3">
<p>Div 3</p>
</div>
If you want to toggle only the button/div that you just clicked, first you have to reset previous state of all elements to initial (remove class inactive and show all divs) and only than toggle state.
$(function() {
$('input[type="checkbox"]').change(function() {
let checked = $('input[type="checkbox"]:checked');
$('.inactive').removeClass('inactive');
if (checked.length == 0) {
$('.subdiv').show();
return;
}
$('input[type="checkbox"]:not(:checked)').closest('label').addClass('inactive');
$('.subdiv').hide();
checked.each(function () {
$('#mydiv' + $(this).val()).toggle();
});
});
});
.inactive {
color: red;
}
label input {
display: none;
}
label {
border: 1px solid gray;
border-radius: 3px;
padding: 2px 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label><input type="checkbox" value="1"/>Button 1</label>
<label><input type="checkbox" value="2"/>Button 2</label>
<label><input type="checkbox" value="3"/>Button 3</label>
</div>
<div id="mydiv1" class="subdiv">
<p>Div 1</p>
</div>
<div id="mydiv2" class="subdiv">
<p>Div 2</p>
</div>
<div id="mydiv3" class="subdiv">
<p>Div 3</p>
</div>
You'd have to initially hide the divs and show the correct one when the right button is clicked.
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
$('#mydiv' + $(this).attr('target')).toggle();
});
});
/*
Hide all divs that have an id starting with "mydiv"
*/
div[id^="mydiv"] {
display: none;
}
.active {
background-color: green;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="button" target="1">Button 1</button>
<button class="button" target="2">Button 2</button>
<button class="button" target="3">Button 3</button>
</div>
<div id="mydiv1">
<p>Div 1</p>
</div>
<div id="mydiv2">
<p>Div 2</p>
</div>
<div id="mydiv3">
<p>Div 3</p>
</div>
Have you to use a toggle or you can also solve it with a walk around?
$(function() {
$('.button').click(function() {
$('.inactive').removeClass('inactive');
$(this).toggleClass('active');
$('.subdiv').show();
$('.mydiv' + $(this).attr('target')).toggle();
});
});
/*
Hide all divs that have an id starting with "mydiv"
*/
.active {
background-color: green;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="button" target="1">Button 1</button>
<button class="button" target="2">Button 2</button>
<button class="button" target="3">Button 3</button>
</div>
<div class="mydiv1" hidden>
<p>Div 1</p>
</div>
<div class="mydiv2" hidden>
<p>Div 2</p>
</div>
<div class="mydiv3" hidden>
<p>Div 3</p>
</div>

Style changing with JS not responding

I am trying to change style to a component by "classList.add" but for some reasons it is working for the first two element and for all the rest is taking the new class.
Is there any reason why this is happening and how I can work around to fix this issue?
Basically a button in the page has opacity: 0.3, by selecting and answer the button will become active from disable and the opacity should be 1
Thanks
Here my example:
for (let i = 0; i < option.length; i++) {
[].forEach.call(opts, (el) => {
el.addEventListener("click", btnClick, false);
});
option[i].addEventListener("click", function() {
// console.log(option[i])
// console.log('CLICKED') // click on answer
move.classList.add("active");
nextSecond.classList.add("active");
nextThird.classList.add("active");
nextFour.classList.add("active");
nextFive.classList.add("active");
nextSix.classList.add("active");
nextSeven.classList.add("active");
});
}
function btnClick() {
[].forEach.call(opts, (el) => {
if (el !== this) el.classList.remove("selected");
});
this.classList.add("selected");
$(".next").removeAttr("disabled");
$(".nextSecond").removeAttr("disabled");
$(".nextThird").removeAttr("disabled");
$(".nextFour").removeAttr("disabled");
$(".nextFive").removeAttr("disabled");
$(".nextSix").removeAttr("disabled");
$(".nextSeven").removeAttr("disabled");
}
.btn {
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
line-height: 42px;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
color: #4BA21C;
border: 1px solid black;
width: 220px;
border-radius: 23px;
border: 2px solid #4BA21C;
height: 46px;
background-color: white;
&.btn-left {
margin-left: -56px;
}
&:hover {
cursor: pointer;
}
&.back,
&.next,
&.nextSecond,
&.nextThird.ans.active,
&.nextFour,
&.nextFive,
&.nextSix,
&.nextSeven {
width: 116px;
}
&.back {
color: #5C5C5C;
border: 2px solid #5C5C5C;
background-color: white;
}
&.next,
&.nextSecond,
&.nextThird,
&.nextFour,
&.nextFive,
&.nextSix,
&.nextSeven {
margin-right: 33px;
opacity: 0.3;
}
&.nextFour,
&.nextFive,
&.nextSix {
margin-right: -14px;
}
}
.active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Question Page 3 -->
<div class="questionsPageThree hide">
<p class="number">3/7</p>
<div class="second">
<h1>
<span>Info</span>mentum
</h1>
<p class="hero">
<span class="start">
>
</span> Making change work</p>
</div>
<div class="q">
<div class="left">
<h2 class="three">3. Do you have someone who you feel comfortable sharing your feelings with?</h2>
</div>
<div class="opt">
<button class="options choosen" type="submit" value="3">
&check; Yes
</button>
<button class="options choosen" type="submit" value="0">
&#120 No
</button>
</div>
<div class="right">
<div class="image-right question3"></div>
</div>
<section class="q1">
<button class="btn btn-left back" value="BACK" type="button">
BACK
</button>
<button class="btn btn-right nextThird ans" value="NEXT" type="button" disabled="disabled">
NEXT
</button>
</section>
</div>
</div>
<!-- Question Page 4 -->
<div class="questionsPageFour hide">
<p class="number">4/7</p>
<div class="second">
<h1>
<span>Info</span>mentum
</h1>
<p class="hero">
<span class="start">
>
</span> Making change work</p>
</div>
<div class="q">
<div class="left">
<h2>4. How many times this week would you say you felt stressed to the point of worry?</h2>
</div>
<div class="opt">
<button class="options choosen" type="submit" value="3">
<h4> 0</h4>
<h6>TIMES</h6>
</button>
<button class="options choosen" type="submit" value="0">
<h4>1 - 2</h4>
<h6>TIMES</h6>
</button>
<button class="options choosen" type="submit" value="-2">
<h4>3 + </h4>
<h6>TIMES</h6>
</button>
</div>
<div class="right">
<div class="image-right question4"></div>
</div>
<section class="q1">
<button class="btn btn-left back" value="BACK" type="button">
BACK
</button>
<button class="btn btn-right nextFour ans" value="NEXT" type="button" disabled="disabled">
NEXT
</button>
</section>
</div>
</div>
javascript html jquery css class

jQuery/Javascript Can't get the "check" button to strike through an appended list item's name text

Have been trying to create an input that creates a list item typed into the input. Once that newly created item is created, I'm trying to make it possible for the user to press a "check" button and have the title of the item change to strike-through.
I have tried to use event delegation for clicking the button on appended items but can't get it to work!
Any help would be greatly appreciated!
$(function() {
$(".shopping-list").empty(); //clear the list when the browser is loaded for the first time
$('#js-shopping-list-form').submit(event => { //submission event
event.preventDefault() //prevent default submission behavior
//grab the value written in the add an item input
const shopItemEntry = $(event.currentTarget).find(
'input[name="shopping-list-entry"]').val();
//create a new list item for the new item written in in the input and add it to <ul class="shopping-list">
$('.shopping-list').append(`<li>
<span class="shopping-item">${shopItemEntry}</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>`);
//listen for when the user clicks check. Add strikethrough to text for the item who's button is checked.
$('.ul').on('click', '.shopping-item', 'shopping-item-controls', '.shopping-item-toggle', function(event) {
$(this).closest('li.span').toggleClass('shopping-item__checked');
});
//listen for when the user clicks delete. Make the delete remove the item
$('.shopping-item-delete').click(function(event) {
this.closest('li').remove(); //remove the shopping item entry
});
});
});
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
button,
input[type="text"] {
padding: 5px;
}
button:hover {
cursor: pointer;
}
#shopping-list-item {
width: 250px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.shopping-list {
list-style: none;
padding-left: 0;
}
.shopping-list>li {
margin-bottom: 20px;
border: 1px solid grey;
padding: 20px;
}
.shopping-item {
display: block;
color: grey;
font-style: italic;
font-size: 20px;
margin-bottom: 15px;
}
.shopping-item-checked {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Shopping List</h1>
<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>
<ul class="shopping-list">
<li>
<span class="shopping-item shopping-item__checked">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">oranges</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">milk</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">bread</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
The class you were adding is not what's defined in the css (.shopping-item__checked vs .shopping-item-checked). The selectors for the event and elements to be manipulated when the event happens were also not correct. The check and delete handlers were declared inside the form submit handler, which meant duplicates where registered each time an item was added to the list. See the updated code below.
$(function() {
$(".shopping-list").empty(); //clear the list when the browser is loaded for the first time
$("#js-shopping-list-form").submit(event => {
//submission event
event.preventDefault(); //prevent default submission behavior
//grab the value written in the add an item input
const shopItemEntry = $(event.currentTarget)
.find('input[name="shopping-list-entry"]')
.val();
//create a new list item for the new item written in in the input and add it to <ul class="shopping-list">
$(".shopping-list").append(`<li>
<span class="shopping-item">${shopItemEntry}</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>`);
});
//listen for when the user clicks check. Add strikethrough to text for the item who's button is checked.
$(".shopping-list").on("click", ".shopping-item-toggle", function(event) {
$(this)
.closest("li")
.find(".shopping-item")
.toggleClass("shopping-item__checked");
});
//listen for when the user clicks delete. Make the delete remove the item
$(".shopping-list").on("click", ".shopping-item-delete", function(event) {
this.closest("li").remove(); //remove the shopping item entry
});
});
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
button,
input[type="text"] {
padding: 5px;
}
button:hover {
cursor: pointer;
}
#shopping-list-item {
width: 250px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.shopping-list {
list-style: none;
padding-left: 0;
}
.shopping-list>li {
margin-bottom: 20px;
border: 1px solid grey;
padding: 20px;
}
.shopping-item {
display: block;
color: grey;
font-style: italic;
font-size: 20px;
margin-bottom: 15px;
}
.shopping-item__checked {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Shopping List</h1>
<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>
<ul class="shopping-list">
<li>
<span class="shopping-item shopping-item__checked">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">oranges</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">milk</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">bread</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>

Add / remove div for each button on click

I'm trying use append to give each button it's own div (.modal-item) that can be created and removed inside of the .modal container when the button is clicked. Each .item has it's own button and different content nested inside.
What I need as an example: If I click the button labelled Btn 1, I want a .modal-item div created inside of .modal that has the content from the Btn 1 .item. If I click Btn 1 again, it is removed. The same goes for each of the buttons.
The buttons should act as a checkbox for creating and removing the .modal-items. So in other words, the adding/removing of each .modal-item is handled by it's button.
$(function() {
$('#btn').click(function() {
var newDiv = $('<div class="modal-item"><h4><a>Dynamic Title</a></h4> </div>');
$('.modal').append(newDiv);
});
});
.container {
display: flex;
border: 1px solid blue;
}
.item,
.modal-item {
width: 100px;
border: 1px solid;
}
.modal {
display: flex;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<button id="btn">Btn 1</button>
<h4> Test 1 </h4>
<div class="subtitle"> Title 1 </div>
<div class="info"> This is Info / Description 1. </div>
</div>
<div class="item">
<button id="btn">Btn 2</button>
<h4> Test 2 </h4>
<div class="subtitle"> Title 2 </div>
<div class="info"> This is Info / Description 2. </div>
</div>
<div class="item">
<button id="btn">Btn 3</button>
<h4> Test 3 </h4>
<div class="subtitle"> Title 3 </div>
<div class="info"> This is Info / Description 3. </div>
</div>
</div>
<div class="modal"></div>
1st: id must be unique so you need to change id="btn" to class="btn"
2nd: by using data attribute for each btn and pass it to the modal-item div it can be done
$(function() {
$('.btn').click(function() {
var newDiv = $('<div data-btn="'+$(this).attr("data-btn")+'" class="modal-item"><h4><a>Dynamic Title'+ ($(this).closest('.item').index() + 1) +'</a></h4> </div>');
if($('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').length < 1 ){
$('.modal').append(newDiv);
}else{
$('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').remove();
}
});
});
.container {
display: flex;
border: 1px solid blue;
}
.item,
.modal-item {
width: 100px;
border: 1px solid;
}
.modal {
display: flex;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<button class="btn" data-btn="btn1">Btn 1</button>
<h4> Test 1 </h4>
<div class="subtitle"> Title 1 </div>
<div class="info"> This is Info / Description 1. </div>
</div>
<div class="item">
<button class="btn" data-btn="btn2">Btn 2</button>
<h4> Test 2 </h4>
<div class="subtitle"> Title 2 </div>
<div class="info"> This is Info / Description 2. </div>
</div>
<div class="item">
<button class="btn" data-btn="btn3">Btn 3</button>
<h4> Test 3 </h4>
<div class="subtitle"> Title 3 </div>
<div class="info"> This is Info / Description 3. </div>
</div>
</div>
<div class="modal"></div>

How to implement a search and filter into HTML divs?

I'm working on a website as part of a project. The idea is to be able to filter the div tags by their title. For example, if you wanted to search for 'Television' or 'Music', etc.
My idea was to use the ID for each div to search and filter. Any advice on how to do that or any method is greatly appreciated!
Search bar:
<input id="search-bar" class="options-button" type="text" placeholder="Search Categories...">
Div tags to be search:
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
CSS for the divs:
.discover-subscribe, .discover-unsubscribe {
width: calc(100% + 14px);
text-align: center;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
color: white;
background: #63c401;
border: none;
font-size: 14px;
margin: 14px 0 -14px -14px;
padding: 10px 10px;
text-shadow: rgba(0,0,0,0.4) 0 0 6px;
box-shadow: rgba(0,0,0,0.3) 0 0 4px;
transition: background 0.2s ease-in-out;
}
.discover-unsubscribe {
background: #DE1B1B;
}
.discover-subscribe:hover {
background: #52A301;
}
.discover-unsubscribe:hover {
background: #B81616;
}
Try the following way with Array's forEach():
var divEl = document.querySelectorAll('div.discover-tile');
divEl.forEach(function(d){
if(d.getAttribute('id') == 'television'){
console.log(d);
}
});
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
Or you can use filter() like:
var divEl = document.querySelectorAll('div.discover-tile');
var television = Array.prototype.filter.call(divEl, function(d){
return d.getAttribute('id') == 'television';
});
console.log(television);
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
The answers presented don't cover all the gotchas that you will run into. I would suggest you try using list.js to filter - it is very powerful and has a very small footprint.
http://listjs.com/
I've used it on several projects and it is rock solid and easy to setup.
You can do it in the following way:
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<div class="container">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<h2>
example to filter div content</h2>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<div class="list-group" id="myList">
<div>Label 1</div>
<div>Label 2</div>
<div>asdf 1</div>
<div>asdf 2</div>
</div>
</div>

Categories