Develop Reference

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 button id on click with fontawesome icons returns undefined

Issue when getting recently clicked button id. Form submit button decorated with fontawesome icons.
Operation:
On body click get button id
Submit form
Concept:
Mouse pointer over button click is working
Issue:
Mouse pointer exactly over button image(example:round arrow icon) click
not working.
Browser Console returning undefined
Any tweaks to make this work? Normally user will attracted by images and they will click over icons only. how fix this?
JSfiddle

Don't use body, only set it to the buttons then.
$(function() {
$('button').on('click', function(e) {
var buttonClicked = $(this).attr('id');
console.log(buttonClicked);
});
});
Working example.
I'm not sure if you want to do more work on the button click. So you could submit the form manually too in the callback. Just change the buttons to type="button" instead of submit and extend the callback:
$(function() {
$('button').on('click', function(e) {
var buttonClicked = $(this).attr('id');
console.log(buttonClicked);
// do your work
// submit the form manually
$("form").submit();
});
});
Working example.

If all you want is the ID of the button that was clicked, why attach the event to the body? I can maybe understand event delegation, but you only have two buttons here. Bind the click handler to both buttons. See http://jsfiddle.net/jvsxo8s0/4/
$(document).ready(function() {
$('button').on('click', function(e) {
target = $(e.target);
buttonclicked = target.attr('id');
console.log(buttonclicked);
e.preventDefault();
});
});

Dont know why you need the id, but you can use the submit() function from jQuery and serialize the form data.
$(function() {
$('#setpolicyform button').on('click', function(e) {
e.preventDefault();
// get button id
var buttonId = $(this).attr('id');
// form data
var formData = $('#setpolicyform').serialize();
console.log(formData);
// check the clicked id
if(buttonId === 'save') {
console.log('save');
} else {
console.log('send');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form role="form" method="POST" action="#" name="setpolicyform" id="setpolicyform">
<div class='box-body pad'>
<div class="form-group">
<div class="lnbrd">
<textarea class="textarea form-control" placeholder="Enter text ..." name="policyta" style="width: 510px; height: 200px;"></textarea>
</div>
</div>
</div>
<div class="box-footer clearfix">
<button type="button" class="btn btn-danger pull-right" id="save"><i class="fa fa-save"></i> SAVE</button>
<button class="btn btn-success" type="button" id="send"><i class="fa fa-arrow-circle-right fa-lg fa-fw"></i>Send</button>
</div>
</form>
</div>

Use this
$(document).ready(function() {
$('body').on('click', function(e) {
target = $(e.target);
buttonclicked = target.closest("button").attr('id');
console.log(buttonclicked);
});
});
Updated Fiddle is here http://jsfiddle.net/jvsxo8s0/6/

Counting number of elements in Jquery

I am making some template that i will add to my page
I have some input with some number, what i need is when i click on button ADD to add new element to page, and on DELETE to remove that element, here is my code
HTML
<div class="container">
<div class="row box template">
<label class="input box" for="foldername">
<span class="icon-prepend input-index-number">1</span>
<input type="text" class="input-folder-name" placeholder="Please article" />
<button class="btn btn-no-borders button-remove" type="button">
Delete
</button>
</label>
</div>
<div class="row box">
<label class="input" for="foldername">
<span class="icon-prepend input-index-number">1</span>
<input type="text" class="input-folder-name" placeholder="Please enter article" />
</label>
</div>
<div class="row">
<button type="button" class="btn btn-primary button-add">Add article</button>
</div>
</div>
JS
$(document).on("click", ".button-add", function () {
var lastbox = $('.box').length;
var indexNumber = lastbox - 1;
$('.template label span').text(indexNumber);
$('.template').clone()
.show()
.removeClass("template")
.insertBefore('.row:last');
}).on("click", ".button-remove", function () {
$(this).closest('.row').remove();
});
Here is working fiddle
http://jsfiddle.net/52VtD/9531/
What i need is the next, on default in class input-index-number there is some number, when i add new element i want to get that number and add new counted number in that filed.Example if there is in default number 2 next added element must have 3 etc. But also, i have problem when i remove some number i must also reindex all other numbers, like is there 1, 2, 3, 4. When i remove 3, number 4 must become 3 etc. Please take a look at my fiddle what i have for now, and you will see what i need

Just write a function to update the indexes correctly, and call it after you add or delete a row.
Full code:
$(document).on("click", ".button-add", function () {
var lastbox = $('.box').length;
$('.template').clone()
.show()
.removeClass("template")
.insertBefore('.row:last');
updateIndexes();
}).on("click", ".button-remove", function () {
$(this).closest('.row').remove();
updateIndexes();
});
function updateIndexes() {
$('.input-index-number:visible').each(function (index) {
$(this).text(index + 1);
});
}
Forked jsFiddle

You could create a helper method that reindexes the boxes and then call that whenever you add or remove a box.
var reindex = function() {
$('.row.box:not(.template)').each(function(i) {
$(this).find('.input-index-number').text(i + 1);
});
}
It seems like it would be a little more work for the computer when adding a box, but it seems simpler and less error-prone.

$(document).on("click", ".button-add", function () {
var lastbox = $('.box').length;
var t = $('.template').clone()
.removeClass("template")
.insertBefore('.row:last');
$(".input-index-number",t).html($(".input-index-number").length-1);
}).on("click", ".button-remove", function () {
$(this).closest('.row').remove();
$(".input-index-number").each(function(i)
{
$(this).html(i);
});
});
Although you could do away with all those duplicate template divs
http://jsfiddle.net/52VtD/9532/

alternating button on clicking event?

Hey, it's all about Jquery. I am using two Div and a button, at a time only one div is shown. Suppose these are div:
<div id="first"></div>
<div id="second"></div>
And button is:
<input type="button" value="show first" onClick="called a javascript();"/>
Only single div is shown i.e. first
<script>
$(document).ready( function() {
$("#second").hide();
});
</script>
Now on clicking button, I want to hide first div, show second and the value of button is changed to show second and if clicked again it revert back to previous state.
Thanks in advance

Heres' the FIDDLE. Hope it helps.
html
<div id="first" style="display:none;">first</div>
<div id="second">second</div>
<input id="btn" type="button" value="show first" />
script
$('#btn').on('click', function () {
var $this = $(this);
if ($this.val() === 'show first') {
$('#first').show();
$('#second').hide();
$this.val('show second');
} else {
$('#first').hide();
$('#second').show();
$this.val('show first');
}
});

What you are looking for is the toggle function from jquery
Here's an example on fiddle
$(".toggleMe").click(function() {
$(".toggleMe").toggle();
});

JavaScript Only - How to change the Font Size when clicked or rollover

This is what I'm trying to do. On my html page I have to have 4 different font sizes one that's 10px 20px 30px 40px then reset.
When I click or rollover on 10px the font size changes and displays the new size of the font in the div box.
I also have an input box so when I type in the input box and press submit it shows the text you typed in and displays it within the div box with the font assigned in the CSS.

bsAs for the HTML you want want something like this
<ul id="sizes">
<li class="size" rel="10">10px</li>
<li class="size" rel="20">20px</li>
<li class="size" rel="30">30px</li>
<li class="size" rel="40">40px</li>
<li>
<input class="manual" type="text" />
</li>
<ul>
<div id="content">The font size to change goes here</div>
And for the jQuery
$( '#sizes' ).on({
mouseover: function ( event ) {
var $target = $( event.target );
if ( $target.is( '.size' ) ) {
$( '#content' ).css( 'font-size', $target.attr( 'rel' ) );
}
},
blur: function ( event ) {
var $target = $( event.target );
if ( $target.is( '.manual' ) ) {
$( '#content' ).css( 'font-size', parseInt( $target.val(), 10 ) );
}
}
});
That should be enough to get you started

This may not be exactly what you're wanting, but it should get you started and it's a pure JavaScript solution:
HTML
<div id="fonts">
<button value="10px">10px</button>
<button value="20px">20px</button>
<button value="30px">30px</button>
<button value="40px">40px</button>
<button value="15px">Reset</button>
</div>
<div id="text">The font size to change goes here</div>
You'll notice that I've set the Reset button to 15px, but I wasn't sure what the default font size should be in your case.
Javascript:
var text = document.getElementById("text");
var size = "15px";
var changeFontSize = function(e){
var target = e.target;
if(target.nodeName.toLowerCase() === "button"){
text.style.fontSize = target.value;
if(e.type.toLowerCase() === "click"){
size = target.value;
}
}
};
var mouseOut = function(e){
text.style.fontSize = size;
}
document.addEventListener("click", changeFontSize, false);
document.addEventListener("mouseover", changeFontSize, false);
document.addEventListener("mouseout", mouseOut, false);
Depending on the browser compatibility you need to have, you may need to look into addEventListener and attachEvent.
When doing event handlers and messing with the e value, things get a bit tricky between browsers. This is mostly why the jQuery solutions are popular, since it generally takes care of the compatibility problems.
EXAMPLE

This should get you started; a button that changes font size of a div, and a button that copies text from a textbox to the div:
<div id="demo"></div>
<input type="button" value="Size 10" onclick="document.getElementById('demo').style.fontSize='10px';" />
<input type="text" id="demotext" />
<input type="button" value="Use text" onclick="document.getElementById('demo').innerHTML=document.getElementById('demotext').value;" />
Demo: http://jsfiddle.net/Guffa/AzmMc/

$("p1").mouseover(function(){
$("p").css("fontsize","10px");
});
$("button ").onclick(function(){1
$("p").css("fontsize","10px");
});