We Keep Coding

Search filter on div with hidden elements

I have a accordion placed inside a div and I have added a search box to the div which is intended to function as a search filter. Inside the div some accordion elements are visible and some are hidden. I need the filter to work only on visible elements.
In the current code I have used it's searching for all elements inside the div and when the search box is cleared the page is getting hanged and not responsive unless I refresh the page.
Any solution pointing to the right direction would be highly appreciated.
$(document).ready(function() {
$("#searchTC").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#testcases div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">Test<i class="fa fa-thumbs-o-down"></i> <small style="color:#117DEF">CASES</small></h4>
<div class="panel-actions">
<!--Search TestCases-->
<div id="filterTC" class="form-group">
<div class="input-search">
<i class="input-search-icon ti-search" aria-hidden="true" style="color: #1179EF"></i>
<input type="search" class="form-control" placeholder="Search..." id="searchTC">
</div>
</div>
<!--Select All/Deselect All Toggle-->
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)" style="transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, border-color 0s linear 0.17s, -webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s;">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body container-fluid">
<div id="testcases" class="accordion js-accordion" style="max-height: 240px;overflow: auto;">
<div class="accordion__item js-accordion-item" id="0001" style="display: block" name="com.onlineshopping.TS_Ebay">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-0001" value="tc_SearchProducts" aria-hidden="true" style="display: none;"><label for="labelauty-0001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_SearchProducts</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-0001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-00010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Ebay</button>
<div class="modal fade modal-fill-in" id="dtFillIn-00010" aria-hidden="false" aria-labelledby="dtFillIn-00010" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_Ebay</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_Ebay"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item active"></div>
<div class="accordion__item js-accordion-item" id="00011" style="display: block" name="com.onlineshopping.TS_Ebay">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-00011" value="tc_LoginToApplication" aria-hidden="true" style="display: none;">
<label for="labelauty-00011"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_LoginToApplication</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-00011"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-000110" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_EbayLogin</button>
<div class="modal fade modal-fill-in" id="dtFillIn-000110" aria-hidden="false" aria-labelledby="dtFillIn-000110" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_EbayLogin</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_EbayLogin"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
<div class="accordion__item js-accordion-item" id="1001" style="display: none" name="com.onlineshopping.TS_Amazon">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-1001" value="tc_ExploreAmazon" aria-hidden="true" style="display: none;"><label for="labelauty-1001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_ExploreAmazon</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-1001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-10010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Amazon</button>
<div class="modal fade modal-fill-in" id="dtFillIn-10010" aria-hidden="false" aria-labelledby="dtFillIn-10010" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_Amazon</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_Amazon"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
</div>
<br>
<button type="button" class="btn btn-info float-right waves-effect waves-classic" onclick="loadplan()">Add to Plan</button>
</div>
</div>
</div>

Use jquery hidden attribute to check if element is hidden
if ($('#testElement').is(':visible')) {
// Code
}

How to access the value of an input in Javascript

For my assignment I'm trying to create a calculator website and in the process of implementing the on and off button of that calculator. I'm working on trying to access the value of the input but keep getting the following error:
assignment_4.html:62 Uncaught TypeError: Cannot read property '0' of
null
at HTMLButtonElement.buttons.(anonymous function).onclick
<script>
let buttons=document.querySelectorAll(".col-6");
for(let i=0; i<buttons.length; i++){
buttons[i].onclick=function(){
console.log(buttons[i].innerHTML);
if(buttons[i].innerHTML=='ON / OFF'){
console.log(document.getElementById("#display").value);
if(document.getElementById("#display").value=='OFF'){
this.value="0";
}
}
else{
}
}
}
</script>
<body>
<div class="container">
<div class="row">
<h1 class="col-12 text-center mt-5">JS Calculator</h1>
</div> <!-- .row -->
<div class="row">
<div id="calculator" class="mt-4 col-12 col-md-6 ml-md-auto mr-md-auto col-lg-4">
<div class="row">
<input type="text" id="display" class="col-12 text-right form-control" value="OFF" disabled>
</div> <!-- .row -->
<div class="row">
<button class="col-6 btn btn-lg btn-outline-dark">ON / OFF</button>
<button class="col-6 btn btn-lg btn-outline-dark">AC</button>
</div> <!-- .row -->
<div class="row">
<button class="col-3 btn btn-lg btn-outline-dark">7</button>
<button class="col-3 btn btn-lg btn-outline-dark">8</button>
<button class="col-3 btn btn-lg btn-outline-dark">9</button>
<button class="col-3 btn btn-lg btn-outline-dark">/</button>
</div> <!-- .row -->
<div class="row">
<button class="col-3 btn btn-lg btn-outline-dark">4</button>
<button class="col-3 btn btn-lg btn-outline-dark">5</button>
<button class="col-3 btn btn-lg btn-outline-dark">6</button>
<button class="col-3 btn btn-lg btn-outline-dark">x</button>
</div> <!-- .row -->
<div class="row">
<button class="col-3 btn btn-lg btn-outline-dark">1</button>
<button class="col-3 btn btn-lg btn-outline-dark">2</button>
<button class="col-3 btn btn-lg btn-outline-dark">3</button>
<button class="col-3 btn btn-lg btn-outline-dark">-</button>
</div> <!-- .row -->
<div class="row">
<button class="col-3 btn btn-lg btn-outline-dark">0</button>
<button class="col-3 btn btn-lg btn-outline-dark">.</button>
<button class="col-3 btn btn-lg btn-outline-dark">=</button>
<button class="col-3 btn btn-lg btn-outline-dark">+</button>
</div> <!-- .row -->
</div> <!-- #calculator -->
</div> <!-- .row -->
</div> <!-- .container -->

You don't need the # when getting the element, since it already expects an ID. Change your call to:
document.getElementById("display")

It seems you be you're confusing jQuery with JS. There is no need to use # when using document.getElementById()
e.g. document.getElementById('display');

You need to change the reference of buttons[i] inside of the callback for the event onclick for "this". The reason is that by the time the event happens, the buttons variable is not defined and therefore its throwing an error.
buttons[i].onclick=function(){
console.log(this.innerHTML);
...

How to change visible button in div?

Hello guys I have some code:
<div class="a">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
<div class="b">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
When i use $("button.btn.approve").addClass("disabled"); the buttons from div a and div b are disabled. How to disabled button-approve only from div a?

If you click the button, you only want to add class to the buttons in the same group?
If so do this:
$('.btn-group .btn').click(function(){
$(this).parent().children('.btn').addClass('disabled');
});
.disabled {
color: #bbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="a">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
<div class="b">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>

You just have to change your selector and make it more general to include your .a class:
$(".a > .btn-group > button.btn.approve").addClass("disabled");`

Select buttons only within the div has class a by updating the selector.
$("div.a button.btn.approve").addClass("disabled");

Try something like this :
$(".a button.btn.approve").addClass("disabled");

.b>.button.btn.approve
You need to define exact element because
button.btn.approve
Matches all buttons, you can add additional class or ID too

How to store and retrieve value of button when clicked?

I'm making a checkin app for my soccer team. I think I got the buttons programmed properly but I'm having problems storing the value and retrieving the value from mySQL database. Can someone please tell me what piece of code I'm missing? thanks in advance.
<style>
.height {
height: 100px;
}
.height2 {
height: 50px;
text-align: center;
}
.fc {
display: block;
margin-left: auto;
margin-right: auto;
}
body {
font-family: monospace;
font-size: 4em;
font-weight: bold;
}
.btn-xl {
padding: 15px 24px;
font-size: 24px;
line-height: 1.4;
border-radius: 8px;
text-transform: uppercase;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function($, window, document) {
$(function() {
// bind to the click event of the checkin button
$('.btn-player-checkin').on('click', function() {
// if the button has the success class - assume the user is checked in
var isCheckedIn = $(this).hasClass('btn-success');
// get the player id from the data attribute
var playerId = $(this).data('player-id');
// call the send function
// sendDataToServer(!isCheckedIn, playerId, $(this)); // send the status we want the player to save (ie. opposite of current);
// if you would like to test the success function without the ajax call, comment out above and uncomment below
if (!isCheckedIn) { // trying to check out
$(this).text('IN');
} else { // checking in
$(this).text('OUT');
}
// cycle classes
$(this).toggleClass('btn-success btn-danger');
});
function sendDataToServer(newStatus, playerId, button) {
$.ajax({
url: 'http://labombafootball.com/checkin', // replace this with the url of the server end point
method: 'POST',
data: {
playerId: playerId,
status: newStatus
} // send this data, on the server you could also record the timestamp of when this occurred
}).done(function() { // if we successfully complete the post
if (newStatus) { // checking in
button.text('OUT');
} else { // trying to check out
button.text('IN');
}
// cycle classes
button.toggleClass('btn-success btn-danger');
}).fail(function() {
// do something if the post fails
});
}
});
}(window.jQuery, window, document));
</script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 height"><img class="fc" src="images/la-bomba-fc-sm.jpg"></div>
</div>
<div class="row">
<div class="col-xs-8 height2">#2 STEVE B</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="2">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#1 INDER JHOOTY</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="1">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#21 CHRIS NAKATSU</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="21">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#88 NICK MARSHALL</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="88">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#99 TONY YUN</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="99">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#6 DANIELE BORRELLI</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="6">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#11 NITESH SHETTY</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="11">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#45 UDAYA MADANAYAKE</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="45">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#9 ADRIAN PARTYKA</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="9">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#5 PATRICK REGAN</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="5">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#13 RAMEZ ALAM</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="13">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#8 FAIZAN ALAM</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="8">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#33 DAVID CLEBAN</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="33">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#14 VICTOR JIMENEZ</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="14">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#7 HARRY SANDHU</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="7">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#77 JOHN PINEDA</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="77">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#44 DEVON CARNEY</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="44">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#17 JUSTIN CONSTANTINEAU</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="17">OUT</button>
</div>
</div>
</div>

showing and hiding divs by clicking a button

I have four divs, the first is showing on load of the site. I am currently hiding the other three on load with CSS (display: none)
Within that first div that is showing, I have a button that on click, I want to hide the current div and then show the next div.
<div id="one">
<h3>Placeholder</h3>
<form>
<button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes One-->
<div id="two">
<h3>Placeholder</h3>
<form>
<button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Two-->
<div id="three">
<h3>Placeholder</h3>
<form>
<button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Three-->
<div id="four">
<h3>Placeholder</h3>
</div><!--Closes Four-->
So im looking to create some Jquery to make this happen.
Here's the janky code I have that doesnt really work at all...
$("#next1").click(function(){
$("#two").show();
$("#one").hide();
});
$("#next2").click(function(){
$("#three").show();
$("#two").hide();
});
$("#next3").click(function(){
$("#four").show();
$("#three").hide();
});
Forgot CSS, my apologies!
#two, #three, #four {
display: none;
}
I assume I dont need to explicitly say to hide all three divs every time due to CSS already hiding two through four, and then altering one at a time through Jquery.
Thank you ahead of time!

This should do it:
(you used classes instead of ids for your elements)
$("#next1").click(function(){
$("#two").show();
$("#one").hide();
});
$("#next2").click(function(){
$("#three").show();
$("#two").hide();
});
$("#next3").click(function(){
$("#four").show();
$("#three").hide();
});
#two, #three, #four {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<h3>Placeholder 1</h3>
<form>
<button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes One-->
<div id="two">
<h3>Placeholder 2</h3>
<form>
<button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Two-->
<div id="three">
<h3>Placeholder 3</h3>
<form>
<button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Three-->
<div id="four">
<h3>Placeholder 4</h3>
</div><!--Closes Four-->

So this is the simple query which you are looking after
$(".btn-default").click(function(){
$(this).closest('div').hide(); //Gets the closest div associated with your button click
$(this).closest('div').next('div').show(); //hide the next div
});

try this
$("button.btn-default").click(function(){
$(this).closest('div').hide();
$(this).closest('div').next('div').show();
});
#two, #three, #four {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<h3>Placeholder 1</h3>
<form>
<button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes One-->
<div id="two">
<h3>Placeholder 2</h3>
<form>
<button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Two-->
<div id="three">
<h3>Placeholder 3</h3>
<form>
<button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Three-->
<div id="four">
<h3>Placeholder 4</h3>
</div><!--Closes Four-->

It's not necessary to give each div it's own class or ID.
You could give them all the same class and use the jQuery eq: filter to choose the correct div.
Example code:
$(".custom button").click(function(){
var nextDiv = $(this).attr('data-id'); // Usually a +1 for the next div, but since eq filter is zero based, it works in this case.
$('.custom').hide();
$('.custom:eq(' + nextDiv + ')').show();
});
Working example: https://jsfiddle.net/ore5h6tk/
Another example, hiding all but the first with CSS: https://jsfiddle.net/ore5h6tk/1/
Hope this helps.

Actually there is nothing wrong with your code .Just make the four divs looks difference.