We Keep Coding

My disable submit if input empty is not working

my disable submit button if input is empty is not working. When i put an input, the submit button still not able to click, it is still disabled.
what is wrong here? btw, Im still learning..
<div class="input-group mb-2 mx-sm-2 my-sm-4">
<div class="form-outline">
<input type="search" id="" placeholder="North Borneo.." name="valueToSearch" class="form-control" />
</div>
<button type="submit" class="btn btn-primary" name="caribtn" disabled="disabled">
<i class="mdi mdi-magnify"></i>
</button>
</div>
$(function () {
$('.button[type="submit"]').keyup(function () {
var empty = false;
$('.input[type="search"]').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('.button[type="submit"]').attr("disabled", "disabled");
} else {
$('.input[type="search"]').removeAttr("disabled");
}
});
});

Try it.
$(function() {
var btnSubmit = $('button[type="submit"]');
btnSubmit.attr('disabled', 'disabled');
$('input[name="valueToSearch"]').on('keyup', function() {
if ($(this).val() !== '') {
btnSubmit.removeAttr('disabled');
} else {
btnSubmit.attr('disabled', 'disabled');
}
})
});

.button or .input class doesn't exist in your context.
Attach a handler to all your search inputs; and inside check if any of them are empty.
$(function() {
$('input[type="search"]').keyup(function() {
var empty = false;
$('input[type="search"]').each(function() {
if($(this).val().length === 0) {
empty = true;
}
});
if (empty) {
$('button[type="submit"]').attr('disabled', 'disabled');
} else {
$('button[type="submit"]').removeAttr('disabled');
}
});
});
.mdi-magnify::before {content: "magnify-icon";display:inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-2 mx-sm-2 my-sm-4">
<div class="form-outline">
<input type="search" id="" placeholder="North Borneo.." name="valueToSearch" class="form-control" />
</div>
<button type="submit" class="btn btn-primary" name="caribtn" disabled="disabled">
<i class="mdi mdi-magnify"></i>
</button>
</div>

I've been trying to build a dc.js datatable with pagination.How to fix 'Pagination for dc.table'?

I'm trying to add pagination to dc.datatable .
The pagination is not working and not displaying pages.
With this code the whole data table is showing up,and just the 'next' and 'prev' button at the end of the table but the buttons are not functioning.
How to fix pagination which shows 20 rows at one page?
My Code
<div class="chart col-sm-12" id="all-characters-div">
<div class="content-wrapper">
<h2>Comic Characters</h2>
<table id="all-characters"> </table>
</div>
</div>
<div id="pagination">
<span id="start"></span>-<span id="end"></span> of <span id="totalSize"></span>
<button id="prev" class="btn" onclick="prev()">Prev</button>
<button id="next" class="btn" onclick="next()">Next</button>
</div>
function makeGraphs(error, charactersData) {
var ndx = crossfilter(charactersData);
show_listCharacters(ndx);
updateResult();
dc.renderAll();
function show_listCharacters(ndx) {
var dataTable = dc.dataTable("#all-characters");
var dim = ndx.dimension(dc.pluck("name"));
// console.log(dim.top(Infinity));
dataTable
.dimension(dim)
.group(function(d) {
return "";
})
.columns(["name", "urlslug", "first appearance"])
.size(Infinity)
.sortBy(dc.pluck("name"))
.order(d3.ascending)
.transitionDuration(1000);
}
/*-----------------Table Pagination-----------*/
var resultStart = 0; var resultEnd =21;
var ndx;
var dataTable = dc.dataTable;
function displayResult() {
document.getElementById("start").innerHTML = resultStart;
document.getElementById("end").innerHTML = resultStart + resultEnd-1;
document.getElementById("totalSize").innerHTML = ndx.size();
d3.select('#prev').attr('disabled', resultStart-resultEnd < 0 ? 'true' : null);
d3.select('#next').attr('disabled', resultStart+resultEnd >= ndx.size() ? 'true' : null);
}
function updateResult() {
dataTable.beginSlice(resultStart);
dataTable.endSlice(resultStart + resultEnd);
displayResult();
}
function prev() {
resultStart -= resultEnd;
updateResult();
dataTable.redraw();
}
function next() {
resultStart += resultEnd;
updateResult();
dataTable.redraw();
}

look at the code in this project: https://tttp.eu I have pagination and sortable columns
the relevant part
function drawPagination(){
var ofs = 0, pag = 10;
chart.on('preRedraw.pagination', display);
function display() {
d3.select('#begin')
.text(1+ofs);
d3.select('#end')
.text(ofs+pag);
d3.selectAll('#next,#last')
.attr('disabled', ofs+pag>=graphs.total.data() ? 'true' : null);
d3.selectAll('#first,#prev')
.attr('disabled', ofs<=0 ? 'true' : null);
d3.select('#size').text(graphs.total.data());
}
function update() {
chart.beginSlice(ofs);
chart.endSlice(ofs+pag);
chart.redraw();
}
function next() {
ofs += pag;update();
}
function prev() {
ofs -= pag;
if (ofs <=0) {
d3.selectAll("#prev,#first").attr("disabled",true);
ofs=0;
}
update();
}
d3.selectAll("#pagination")
.html (`
Showing <span id="begin"></span>-<span id="end"></span> of <span id="size"></span><span class="btn-group">
<button id="first" disabled="disabled" class="btn btn-primary"><i class="glyphicon glyphicon-fast-backward"></i>First</button>
<button id="prev" disabled="disabled" class="btn btn-primary"><i class="glyphicon glyphicon-step-backward"></i>Prev</button>
<button id="next" class="btn btn-primary">Next<i class="glyphicon glyphicon-step-forward"></i></button>
<button id="last" class="btn btn-primary">Last<i class="glyphicon glyphicon-fast-forward"></i></button>
</span>
`);
d3.select("#first").on("click",function(){ofs=0;update()});
d3.select("#last").on("click",function(){ofs=graphs.total.data()-pag;update()});
d3.select("#prev").on("click",prev);
d3.select("#next").on("click",function(){ofs +=pag;update()});
update();
}

Check if a button Is clicked then do something

I have a form with tabs which include buttons. Before the user clicks next, I want to check if at least one or all the buttons have been clicked, if clicked, the next tab shows up. If not, an alert pops up!
<button class="btns rem" id="mon">morning</button>
<button class="btns rem" id="oo" >afternoon</button>
<button class="btns rem" id="pp" >night</button>
<button class="btns" id="day" >Next</button>
<script type="text/javascript" >
document.getElementById("day").onclick =
function(event) {
var btn=
document.getElementsByClassName("btns") ;
for(x=0; x<btn.length; x++){
if(btn[x].click == true){
prompt("open Next page?");
}
else {
alert("please click at least one button");
}
}
</script>

Better way of doing it is to use checkboxes since you want to check if at least one or all the buttons have been clicked. Then attach the onchange event.
var btns = document.getElementsByClassName("radio-btn") ;
var len = btns.length;
var isSelected = false;
while(len--) {
btns[len].onchange = function() {
isSelected = this.checked ? true : false;
};
}
document.getElementById("day").onclick = function() {
if(isSelected) {
alert("open Next page?");
}
else {
alert("please click at least one button");
}
}
<form onsubmit="return false;">
<input type="checkbox" name="time" class="radio-btn rem"> Morning<br>
<input type="checkbox" name="time" class="radio-btn rem"> Afternoon<br>
<input type="checkbox" name="time" class="radio-btn rem"> Evening<br>
<button class="btns" id="day" >Next</button>
</form>

If you like just try it.
<button class="btns rem" id="mon">morning</button>
<button class="btns rem" id="oo" >afternoon</button>
<button class="btns rem" id="pp" >night</button>
<button class="btns" id="day" >Next</button>
<script type="text/javascript" >
var clickedData = "";
function setClicked(data){
clickedData = data;
}
var btn = document.getElementsByClassName("btns");
for(x = 0 ; x < btn.length; x++){
if(btn[x].id !=="day"){
const val = btn[x].innerHTML;
btn[x].onclick = function(){ setClicked(val); }
}
}
document.getElementById("day").onclick =
function(event) {
if (clickedData !== ""){
prompt("open Next page?");
}else{
alert("please click at least one button");
}
}
</script>

How to make the same working javascript code on hyperlink workable on click of a button?

I've a following javascript code which is working fine upon clicking on the below hyperlink.
Delete Event
<script>
function ConfirmDelete() {
var ans=confirm("Are you sure to delete this event?");
if(!ans) {
return false;
}
}
</script>
Now I've a HTML code for a button and I want to execute the same functionality as above when user clicks on the below button.
<button type="button" class="btn btn-info" data-toggle="popover">Delete Event</button>
So tell me what changes I need to make to the code I written for a hyperlink?
Thanks.

just add an onclick attribute, same as anchor, without return
<button type="button" class="btn btn-info" data-toggle="popover" onClick="ConfirmDelete('delete_event.php?event_id=110')">Delete Event</button>
function ConfirmDelete(url) {
var ans=confirm("Are you sure to delete this event?");
if(!ans) {
return false;
}
window.location.href = url;
}
and since you also have added jQuery tag
<button type="button" class="btn btn-info" data-toggle="popover" data-url="delete_event.php?event_id=110">Delete Event</button>
<script>
$( "button.btn-info" ).bind( "click", function(){
ConfirmDelete($( this ).attr( "data-url" )) ;
} )
function ConfirmDelete(url) {
var ans=confirm("Are you sure to delete this event?");
if(!ans) {
return false;
}
window.location.href = url;
}
</script>

Try this.
<button type="button" class="btn btn-info" data-toggle="popover" onClick="ConfirmDelete()">Delete Event</button>
<script>
function ConfirmDelete() {
var ans=confirm("Are you sure to delete this event?");
if(!ans) {
return false;
}else{
window.location.href = "http://stackoverflow.com";
}
}
</script>

give id to the button and hyperlink
<button type="button" class="btn btn-info" id="btn" data-toggle="popover">Delete Event</button>
$('#btn').click(function(){
$('#hyperlickid').click();
window.locaction.reload(true)
})

$(document).ready(function(){
$("a").click(function() {
if (ConfirmButtonDelete("delete_event.php?event_id=110") == false) {
$(this).attr("href", "#");
} else {
$(this).attr("href", "delete_event.php?event_id=110");
}
});
$("button").click(function() {
if (ConfirmButtonDelete("delete_event.php?event_id=110") == false) {
//do nothing
} else {
window.location = "delete_event.php?event_id=110";
}
});
});
function ConfirmButtonDelete(url) {
var ans=confirm("Are you sure to delete this event?");
if(!ans) {
return false
} else {
return true
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="popover">Delete Event</button>
Delete Event

Basic Validate javascript not working correctly

This is my simple code which I have been working to just show valid or invalid if the wrong text is inserted but the problem I’m having is that when I hit enter the valid and invalid flashes without staying on screen.
Here is my Fiddle
function validate ()
{
var me = document.getElementById("my").value;
if (me == 'my')
{
document.getElementById("Result").innerHTML = "valid";
document.getElementById("Result").style.color = "green";
}
else
{
document.getElementById("Result").innerHTML = "invalid";
document.getElementById("Result").style.color = "red";
}
}
<form>
<button type="button" onclick ="yes" class="fa fa-search"></button>
<input type="text" id="my" onchange="validate()"></input>
<label id="Result"></label>
</form>
What is the mistake i am doing and How can i fix this ?

The problem is that you have your code inside tag. You need to prevent form submission if you want to stay on the page.
I have not included CSS here!!
<div class="container">
<div id="nav">
<div id="search">
<form id="form1">
<button type="button" onclick ="yes" class="fa fa-search"></button>
<input type="text" id="my"></input>
<label id="Result"></label>
</form>
</div>
</div>
</div>
$(document).ready(function(){
$("#form1").submit(function(event){
if ( !validate()) {
alert("Error");
event.preventDefault();
return false;
}
});
});
function validate ()
{
var me = document.getElementById("my").value;
if (me == 'my')
{
document.getElementById("Result").innerHTML = "valid";
document.getElementById("Result").style.color = "green";
return true;
}
else
{
document.getElementById("Result").innerHTML = "invalid";
document.getElementById("Result").style.color = "red";
return false;
}
}
Here is a fiddle. Hope it will help.