Develop Reference

Get the added class from body and do somthing

I have two button when i click one one of them class "active-1" add to body
and another button, class "active-2" add to body.
When i want to get one of this class, don't work.
I use this code to get class "active-2":
if ( $("body.active-1").hasClass("active-2") ) {
// Do Somtihng
}
what is the problem and what is the expected behaviour?

try this,
$(document).ready(function(){
$('.button').click(function(){
console.log($(this).attr('id') + ' class added');
$('body').removeAttr('class').addClass($(this).attr('id'));
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button class="button" id="active-1">active-1 add</button>
<button class="button" id="active-2">active-2 add</button>

DataTables search on button click instead of typing in input

I would to know if it is possible to move the search function out of an input for a table modified by DataTables. Currently I have a custom input that executes this function:
<script>
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchNameField').keyup(function () {
oTable.search($(this).val()).draw();
});
})
</script>
the input looks like so:
<label for="searchNameField" class="col col-form-label">Name:</label>
<div class="col-sm-11">
<input type="text" class="form-control ml-0 pl-2" id="searchNameField"
placeholder="Name" autofocus/>
</div>
What I would like to do is move this to a button. What I thought might be possible is the following:
<script>
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchButton').click(function () {
oTable.search($(this).val()).draw();
});
})
</script>
with the button looking like so:
<button id="searchButton" type="button" class="btn btn-sm btn-success" style="width: 150px">
<i class="fa fa-search">
Search
</i>
</button>
however when I click on the button this does not work. In typing this question I have realised that this is probably because when I click the button, it does not know where to get the filter text from to actually filter the table.
Is there a way I can have a button click that references the input, that then goes and filters the table?

You're right, you need to redefine $(this), which now refers to the button, not the search box:
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchButton').click(function () {
oTable.search($("#searchNameField").val()).draw();
});
// EDIT: Capture enter press as well
$("#searchNameField").keypress(function(e) {
// You can use $(this) here, since this once again refers to your text input
if(e.which === 13) {
e.preventDefault(); // Prevent form submit
oTable.search($(this).val()).draw();
}
});
});

get value with data attribute and display on other div

I would like to show the value "1,000 below" found inside the button on this div using jquery
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>
I got this so far but not working, it shows the class ".1000"
var syo = $this.attr('data-filter');
$(this).parent().find('.showvaluehere').html(syo);
for clarity, I want the value of the button to be on the
so that it shows like this;
<div class="showvaluehere">1,000 below</div>
Thanks

You are getting value of data-filter attribute, which is .1000
Try this
$('.button').click(function() {
var syo = $(this).text();
$('.showvaluehere').html(syo);
})

Your code is confusing as you're referencing a lot of elements and attributes which seem unrelated to the HTML you've shown and the problem you describe.
That said, you can do what you require by simply setting the text() of the .showvaluehere element to match that of it's neighbouring button, like this:
$('.showvaluehere').text(function() {
return $(this).next('button').text();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>

$('.button').click(function() {
$('.showvaluehere').text($(this).text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>

HTML + JS How to change/unchange text onclick

I would like to write a JS that changes text on a button when clicked (to 'SHOW'), but when another button is clicked then the previously clicked button will change its text from 'SHOW' to initial text (eg 'A')
Scenario:
1. click on button A -> 'A' changes to 'SHOW'
2. click on button B -> 'B' changes to 'SHOW' but also 'SHOW'(from button A) changes back to 'A'
<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>
Above you will find example buttons i have in html file.
In JS file i have:
$("button1").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
});
previously i used class selector not id one, but still could not accomplish what i wanted. The add and remove CSS works really ok

I think this is what you are looking for:
$("button").click(function() {
var clicked_button = $(this);
$("button").each(function() {
if($(this).is(clicked_button)) {
$(this).text('SHOW');
}
else {
$(this).text($(this).attr('value'))
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>
Check working example here https://jsfiddle.net/prxd81vk/

You already have your solution, because when you add a class to the last pressed button, you can use it to change the text back:
$("button").on('click', function () {
$('.btn_click')
.text($('.btn_click').val())
.removeClass('btn_click');//this is a css class that changes bgcolor
$(this).addClass('btn_click');
$(this).text('SHOW');
});

You must use $("#button1") to properly select the button by id. This onClick is not actually associated to any of the buttons.

You need to keep track of the old text of the button and revert back to it when another button is pressed.
Example:
$("button").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$("[data-old-text]").each(function () {
$(this).text($(this).attr("data-old-text"));
$(this).removeAttr("data-old-text");
});
$(this).addClass('btn_click');
$(this).attr("data-old-text", $(this).text());
$(this).text('SHOW');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">A</button>
<button id="button2">B</button>
<button id="button3">C</button>

Use this :
Button 1 click :
$('#button1').click(function () {
$('#button1').text('Show');
});
Buttton 2 click :
$('#button2').click(function () {
$('#button2').text('show');
$('#button1').text('old value');
});

I would change targeting elements from id to class attribute.
<button class="button" value="A">A</button>
<button class="button" value="B">B</button>
<button class="button" value="C">C</button>
The script would then first clear the 'btn_click' class from any other buttons, and then apply the 'active' class to the button that was clicked.
$("button").on('click', function () {
$('.button').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');

To select element by ID you must use $("#button1").
Try like this:
$("#button1").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
});
And after that add whatever you want to do with other two buttons (set A,B,C).

You can try this code..
<script>
$(document).ready(function()
{
$('#button1').click(function()
{
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('Show');
$('#button2').text('B');
});
$('#button2').click(function()
{
$('#button1').text('A');
$(this).text('Show');
});
});
</script>

Button on click creates alert to show data-id attribute

I have a button like so:
<button data-id="1" onclick="showID()">Show ID</button>
And a function:
<script>
function showID() {
alert(($(this).data("id")));
}
</script>
I just want the data-id to be shown in the alert box. I've also tried
alert(($(this).data("id")));
But again nothing...

$(this) inside your click function indicates to either global in sloppy mode or undefined in strict mode.
You need to do like this:
<button data-id="1" onclick="showID(this)">Show ID</button>
<script>
function showID(elem) {
alert(($(elem).data("id")));
}
</script>

Try this
function showID(button) {
alert($(button).attr('data-id'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>

Currently this will not give you the right value, your code should be this way:
<button data-id="1" onclick="showID(this)">Show ID</button>
Then
<script>
function showID(e) {
alert(($(e).data("id")));
}
</script>

this doesn't work the way you are trying.
pass this on click.
Check out this fiddle.
Here is the snippet.
function showID(ele) {
alert(($(ele).attr("data-id")));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>

Here there is an example, you have to pass the id to function in the button tag:
JavaScript - onClick to get the ID of the clicked button