Develop Reference

Why is my calculator program not working? JavaScript and HTML related

Can anyone help me identify what the problem is in my code?
HTML
<section>
<!--- Celsius, Fahrenheit, Kelvin -->
<table>
<tr>
<td>&#176C</td>
<td>&#176F</td>
<td>&#176K</td>
</tr>
<tr>
<td><label for="celsius"></label><input type="number" id="celsius"/> </td>
<td id="fahr1"></td>
<td id="kelv1"></td>
</tr>
<tr>
<td>later</td>
<td> <input type="number" id="fahrenheit"/> </td>
<td>later</td>
</tr>
</table>
</section>
<script src="js/main.js"></script>
and the JAVASCRIPT is
// Gets Celsius and returns Kelvin
let celsin1 = document.getElementById('celsius');
let fahrout1 = document.getElementById('fahr1');
let kelvout1 = document.getElementById('kelv1');
let newfahr1 = 0;
let newkelv1 = 0;
function celstokelv1(){ newkelv1 = celsin1 + 273;
return newkelv1}
function celstofahr1(){newfahr1 = (9/5) * celsin1 + 32;
return newfahr1}
function change1() {
fahrout1.innerHTML = '<td id="fahr1">'+ celstofahr1() +'</td>';
kelvout1.innerHTML = '<td id="kelv1">' + celstokelv1() + '</td>'
}
celsin1.addEventListener('change', change1, false);
If anyone can help me, it would be much appreciated.
Problems include:
When typing into the input bar, the other ones in the same row do not change.
Output for any number into the first Celcius input is NaN for Fahrenheit and
[object HTMLInputElement]273 for Kelvin.

Use .value to retrieve the value inside your input.
Then use parseInt() to convert it into a number to be calculated.
Using the same HTML you created:
let celsin1 = document.getElementById('celsius');
let fahrout1 = document.getElementById('fahr1');
let kelvout1 = document.getElementById('kelv1');
let newfahr1 = 0;
let newkelv1 = 0;
function celstokelv1(){
return parseInt(celsin1.value) + 273;
}
function celstofahr1(){
return (9/5) * parseInt(celsin1.value) + 32;
}
function change1() {
fahrout1.innerHTML = '<td id="fahr1">'+ celstofahr1() +'</td>';
kelvout1.innerHTML = '<td id="kelv1">' + celstokelv1() + '</td>'
}
celsin1.addEventListener('change', change1, false);

You can use parseInt().
var val = parseInt(document.getElementById("farenheit").value);
It basically converts the string into an integer. Required while doing math to numbers retrieved from elements.

As per your other question.... Basic Input/Output help for online calculator I am developing
HTML
<section>
<!--- Celsius, Fahrenheit, Kelvin -->
<table>
<tr>
<td>&#176C</td>
<td>&#176F</td>
<td>&#176K</td>
</tr>
<tr>
<td> <input type="number" id="celsius"/> </td>
<td id="fahr1"></td>
<td id="kelv1"></td>
</tr>
<tr>
<td id="celc2">-</td>
<td> <input type="number" id="fahrenheit" /> </td>
<td id="kelv2">-</td>
</tr>
</table>
</section>
JavaScript
const celsius = document.getElementById('celsius');
const fahrenheit = document.getElementById('fahrenheit');
celsius.addEventListener('change', (event) => {
convertFromCelsius();
});
fahrenheit.addEventListener('change', (event) => {
convertFromFahrenheit();
});
function convertFromCelsius() {
var fahr1 = document.getElementById("fahr1");
var kelv1 = document.getElementById("kelv1");
fahr1.textContent = parseInt(celsius.value) * (9/5) + 32;
kelv1.textContent = parseInt(celsius.value) + 273.15;
}
function convertFromFahrenheit() {
var celc2 = document.getElementById("celc2");
var kelv2 = document.getElementById("kelv2");
celc2.textContent = (parseInt(fahrenheit.value) - 32) * (5/9);
kelv2.textContent = (parseInt(fahrenheit.value) + 459.67) * (5/9);
}
See it working live here: https://jsfiddle.net/0Luvq4nx/1/

Repeating jquery script in every row in table automatically

I have problem with this script. When I change value in column "TO" in table, script substract automatically in column "Number of hours" only in first row value but others no. I need application script with name "PRO1" (updateDue) in every row in table.
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<body onload="changeText()">
<?php
$date = date('Y-m-01');
$end = date('Y-m-t');
//, strtotime('-1 months')//
?>
<?php include 'dbconfig.php' ?>
<table border="1" id="myTable">
<tr>
<td>Date</td>
<td>From</td>
<td>To</td>
<td>Number of hours</td>
</tr>
<tr class="item">
<?php
date_default_timezone_set('UTC');
while(strtotime($date) <= strtotime($end)) {
$day_num = date('d', strtotime($date));
$day_name= date('l', strtotime($date));
$date = date("Y-m-d", strtotime("+1 day", strtotime($date)));
if (($day_name == "Saturday")||($day_name == "Sunday"))
{
echo "<td id='color'>$day_num $day_name</td><td></td><td></td><td></td></tr>";
}
else {
echo "<td>$day_num $day_name</td><td>";
$query = mysql_query("SELECT * FROM norma") or die(mysql_error());
while($query_row = mysql_fetch_assoc ($query))
{
$starter= $query_row['start'];
echo "<input type='text' class='txtCal' id='num1' onchange='updateDue()' value=".$query_row['start'].">";
}
echo "</td><td>";
$query = mysql_query("SELECT * FROM norma") or die(mysql_error());
while($query_row = mysql_fetch_assoc ($query))
{
$finisher= $query_row['end'];
echo "<input type='text' class='txtCal' id='num2' onchange='updateDue()' value=".$query_row['end'].">";
}
echo "</td><td>";
$ts1 = strtotime($starter);
$ts2 = strtotime($finisher);
$seconds_diff = $ts2 - $ts1;
$time = ($seconds_diff/3600);
echo "<input type='text' class='txtCal2' id='remainingval' value=".number_format((float)$time, 2, '.', '').">";
echo "</td></tr>";
}
}
?>
</tr>
<tr>
<td></td>
<td></td>
<td>Sum:</td>
<td id="total_sum_value"><span id="total_sum_value"></span></td>
</tr>
</table>
<br>
<!-- SCRIPT NAME PRO1 -->
<script>
function updateDue() {
$('#myTable tr').each(function(){
var total = parseFloat(document.getElementById("num2").value);
var val2 = parseFloat(document.getElementById("num1").value);
// to make sure that they are numbers
if (!total) { total = 0; }
if (!val2) { val2 = 0; }
var ansD = document.getElementById("remainingval");
ansD.value = total - val2;
});
}
</script>
<script>
$(document).ready(function changeText(){
$(document).ready(function changeText(){
var calculated_total_sum = 0;
$("#myTable .txtCal2").each(function () {
var get_textbox_value = $(this).val();
calculated_total_sum += parseFloat(get_textbox_value);
});
$("#total_sum_value").html(calculated_total_sum);
});
$("#myTable").on('change','input', '.txtCal2', function () {
var calculated_total_sum = 0;
$("#myTable .txtCal2").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
});
});
</script>
I want dynamically change table. In column "FROM" and "TO" is value from database. This automatically subtract value (TO-FROM) and sum from this value is down. But when user change some value in column "FROM" or "TO", number will be count automatically. Thank you so much for every advice.

That's because you use the same ID for multiples TDs. You can't do that as an ID is supposed to be used once and help to identify a resource.
instead of an ID, you could use a class :
<table>
...
<tr>
<td><input type="text" class="txtCal num1" value="5" /></td>
<td><input type="text" class="txtCal num2" value="10" /></td>
<td><input type="text" class="txtCal2 remainingval" value="...">
</tr>
...
</table>
Then with jQuery, you can have access to your row values like this :
$('#myTable tr').each(function(){
var total = parseFloat($(this).find('.num2').val());
var val2 = parseFloat($(this).find('.num1').val());
...
var ansD = $(this).find(".remainingval");
ansD.val(total - val2);
});
Also let me point that mysql functions are deprecated and you should not use them anymore. Use PDO instead. (See Why shouldn't I use mysql_* functions in PHP?)

javascript: add and remove table row, cant get correct numbering

i have table like this:
<button type="button" onclick="addRow();">Add Row</button>
<table id="item_table" cellspacing="1" cellpadding="1" border=1>
<tr>
<td>No.</td>
<td>text</td>
<td>Action</td>
</tr>
<tr id="theFirstRow">
<td class="itemNumber">1</td>
<td>text</td>
<td><button type="button" onclick="deleteRow(this)">Delete</button> </td>
</tr>
</table>
and JS code like this:
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('item_table').deleteRow(i);
}
var maxID = 0;
function getTemplateRow() {
var x = document.getElementById("theFirstRow").cloneNode(true);
var tbs = null;
var lastRow = 0;
var currentRow = 0;
var numbering = 0;
tbs = document.getElementsByClassName("itemNumber");
lastRow = tbs.length - 1;
currentRow = tbs.length;
console.log("lastRow : " + lastRow);
numbering = parseInt(currentRow, 10) + 1;
console.log("numbering : " + numbering);
x.innerHTML = x.innerHTML.replace('<td class="itemNumber">' + currentRow + '</td>', '<td class="itemNumber">' + numbering + '</td>');
return x;
}
function addRow() {
var t = document.getElementById("item_table");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
r.parentNode.insertBefore(getTemplateRow(), r);
}
Updated: JSFIDDLE HERE
I cant get the increment numbering and delete row numbering correctly, when i check from console log, the number seem correct. Any help would be great.

I think I would go about this a little bit differently. Here is how I would do it. Maybe it isn't what you were looking for. JSFiddle.
HTML (Take out onclicks, add some ids and classes)
<button id="add" type="button">Add Row</button>
<table id="item_table" cellspacing="1" cellpadding="1" border=1>
<tr>
<td>No.</td>
<td>text</td>
<td>Action</td>
</tr>
<tr id="template">
<td class="itemNumber">1</td>
<td>text</td>
<td><button class="delete" type="button">Delete</button> </td>
</tr>
</table>
JS
(function() {
var template = document.getElementById("template"),
table = document.getElementById("item_table"),
display = template.style.display;
document.getElementById("add").addEventListener("click", function() {
var row = template.cloneNode(true);
row.style.display = display;
row.querySelector(".delete").addEventListener("click", function() {
table.removeChild(this);
}.bind(row));
row.querySelector(".itemNumber").innerHTML = table.children.length - 1;
table.appendChild(row);
});
template.style.display = "none";
}());

export to CSV from dynamic table data via PHP

Let's say I have a dynamic table in php page.... is there a way I can export what I have from the dynamic table to a CSV file (and text file [if possible]) via PHP...
Here I am getting data from table and show it in alert box. But I want to save it in a file. Using php.
Here is my code:
<html>
<head>
<script>
function GetCellValues()
{
var str = '';
var rows = document.getElementsByTagName('tr');
var table=document.getElementById("project");
for (var i=0;i<table.rows[0].cells.length;i++)
{
if (i > 2 )
{
str = str + table.rows[0].cells[3].innerHTML.replace(", ");
}
else
{
str = str + (table.rows[0].cells[i].innerHTML) + ', ' ;
}
}
for (var c = 1 ; c < rows.length ; c++)
{
str += '\n' + "0" + c + ', ';
var row = rows[c];
var inputs = row.getElementsByTagName('input');
for (var k = 0 ; k < inputs.length ; k++)
if (k > 1)
{
str += inputs[k].value.replace(", ");
}
else
{
str += inputs[k].value + ', ';
}
}
document.getElementById('hiden').value = str;
alert(document.getElementById('hiden').value);
}
</script>
</head>
<body>
<form>
<br>
<h1><u>PROJECT</u> :</h1>
<br>
<input type = "hidden" id = "hiden" name = "hiden" value = "">
<input type = "button" name = "submit" onclick = "GetCellValues()" Value = "SAVE">
<br>
</form>
<?php
$handle = fopen("data.csv", "w");
$hide = $_REQUEST['hide'];
fwrite($handle,$hide);
$file = file('data.csv');
$lines = count($file);
echo'<table id = "project" border = "1" cellpadding="2" cellspacing="0"
style = "width: 60%; margin-left: auto; margin-right: auto; border-color: brown; background-color:silver;">';
echo'<tr cellpadding="100">
<th width="15%">Sl.No.</th>
<th width="15%">Project Name</th>
<th width="15%">ChangeDate</th>
<th width="15%">Changed By</th>
</tr>';
for ($i=1; $i<$lines; $i++)
{
$part = explode(',', $file[$i]);
echo'<tr>
<td align= "center" width="5%">'.$part[0].'</td>
<td align= "center" width="25%"><input type="text" value='.$part[1].'></td>
<td align= "center" width="25%"><input type="text" value='.$part[2].'></td>
<td align= "center" width="25%"><input type="text" value='.$part[3].'></td>
</tr>';
}
echo'</table>';
?>
</body>
</html>

you could use the built in PHP5 function fputcsv
here is a sample code
$result = mysqli_query($con, 'SELECT * FROM table_name');
$row = mysqli_fetch_array($result, MYSQLI_ASSOC);
$fp = fopen('file.csv', 'w');
foreach ($row as $val) {
fputcsv($fp, $val);
}
fclose($fp);
It will return a comma separated string for each row written to file.csv:

Pagination with help from Javascript

Community, I currently have some pagination on my page to help users page through logged tickets. To help with this, I have two table cells with Next and Previous in each respectively. Right now, when a user clicks either, it adds +1 or -1 to a JS counter that AJAX's a string. Then, I have my pagination that either goes to the next or previous 15 items in my mysql database. I wrote my JS so that if the counter is less than 1 it will go back to one. That way they dont have to repeatedly click the next button to view tickets. I'm trying to figure out a way to do that from the other end, where if the end of the result list is blank, or no more results are available, it will stay at the last counter.
PhP including initial table setup and string variable
include 'Search_Var.php'; //This file is used to build $sequel.
//$sequel is a string built by user selected search options
echo '<div style="display: none" id="Search_Var">'.$sequel.'</div>
<div class="container" style="clear: both;">
<fieldset>
<legend class="legend1"><h2> &nbsp Results &nbsp </h2></legend>
<div style="padding-top: 5px;">
<span id="page">';
include 'Search_Tickets.php'; // This file builds a table to show the first 15 results
// It also displays the total number of tickets found
// in the database matching the search query
echo '</span>';
if($openTicketsCount!=0) {include '********/***********/PreviousNext.inc.php';};
//If no tickets are available the Previous and Next boxes won't appear.
</fieldset>
</div>
</div>
';
Javascript
var count = 1;
$(window).on('load', function() {
var id = document.getElementById( "Search_Var" ).innerText;
$('.page').on('click', function() {
var page = $(this).html();
if(page == "Next")
{
count = count + 1;
}
if(page == "Previous")
{
count = count - 1;
}
if(count < 1)
{
count = 1;
}
$.get("/*******/********/Search_Pagination.inc.php?count_id=" + count + "&search_id=" + id, function(data) {
$('#page').html(data);
});
});
});
Finally, the pagination
$start = 0;
$per_page = 15;
$page = $_GET['selection_id'];
$_SESSION['role_id'] = $_GET['role_id'];
$_SESSION['bus_id'] = $_GET['bus_id'];
$_SESSION['dept_id'] = $_GET['dept_id'];
if($page <= 1)
{
$start = 0;
}
else
{
$start = $page * $per_page - $per_page;
}
$get_openTickets = $search;
$openTicketsCount = mysql_num_rows(mysql_query($get_openTickets));
$num_rows = mysql_num_rows(mysql_query($get_openTickets));
$num_pages = $num_rows / $per_page;
$get_openTickets .= " LIMIT $start, $per_page";
if($openTicketsCount !=true)
{
echo '
<td colspan = "9">No open tickets were found!</td>
';
}
else
{
$result = mysql_query($get_openTickets);
echo '
<table class="openTickets" width="1150px" border="0px" padding="0px">
<tr>
<th scope="col">ID</th>
<th scope="col" style="width:75px;">PRIORITY</th>
<th scope="col">CALLER /<br />DEPARTMENT</th>
<th scope="col">COMPANY NAME /<br />SALES REP</th>
<th scope="col" style="width:75px;">CREATED<br />ON</th>
<th scope="col" style="width:75px;">LAST<br />UPDATED</th>
<th scope="col" style="width:75px;">SOURCE</th>
<th scope="col">USER</th>
<th scope="col">CATEGORY /<br />SUBCATEGORY</th>
</tr>
';
while(($openTicket = mysql_fetch_assoc($result)))
{
echo'
<tr>
<td>'.$openTicket['call_id'].'</td>
<td style="width:75px;">'.$openTicket['priority_name'].'</td
<td>'.$openTicket['caller_name'].'<br />'.$openTicket['caller_dept'].'</td>
<td>'.$openTicket['cust_name'].'<br />'.$openTicket['cust_rep'].'</td>
<td style="width:75px;">'.$openTicket['created_on'].'</td>
<td style="width:75px;">'.$openTicket['updated_on'].'</td>
<td style="width:75px;">'.$openTicket['source_name'].'</td>
<td>'.$openTicket['created_by'].'</td>
<td>'.$openTicket['cat_name'].'<br />'.$openTicket['subcat_name'].'</td>
</tr>';
}
echo '
<tr>
<th colspan="9" style="text-align:right;">Total Open Ticket(s): '.$openTicketsCount.' </th>
</tr>
</table>';
}

have a look below
$start = 0;
$per_page = 15;
$page = $_GET['selection_id'];
$_SESSION['role_id'] = $_GET['role_id'];
$_SESSION['bus_id'] = $_GET['bus_id'];
$_SESSION['dept_id'] = $_GET['dept_id'];
if($page <= 1)
{
$start = 0;
}
else
{
$start = $page * $per_page - $per_page;
}
$get_openTickets = $search;
$openTicketsCount = mysql_num_rows(mysql_query($get_openTickets));
$num_rows = mysql_num_rows(mysql_query($get_openTickets));
$num_pages = $num_rows / $per_page;
$get_openTickets .= " LIMIT $start, $per_page";
if($openTicketsCount !=true)
{
echo '
<td colspan = "9">No open tickets were found!</td>
';
}
else
{
$result = mysql_query($get_openTickets);
echo '<input type="hidden" value="'.$num_pages.'" id="pageCount"/>
<table class="openTickets" width="1150px" border="0px" padding="0px">
<tr>
<th scope="col">ID</th>
<th scope="col" style="width:75px;">PRIORITY</th>
<th scope="col">CALLER /<br />DEPARTMENT</th>
<th scope="col">COMPANY NAME /<br />SALES REP</th>
<th scope="col" style="width:75px;">CREATED<br />ON</th>
<th scope="col" style="width:75px;">LAST<br />UPDATED</th>
<th scope="col" style="width:75px;">SOURCE</th>
<th scope="col">USER</th>
<th scope="col">CATEGORY /<br />SUBCATEGORY</th>
</tr>
';
while(($openTicket = mysql_fetch_assoc($result)))
{
echo'
<tr>
<td>'.$openTicket['call_id'].'</td>
<td style="width:75px;">'.$openTicket['priority_name'].'</td
<td>'.$openTicket['caller_name'].'<br />'.$openTicket['caller_dept'].'</td>
<td>'.$openTicket['cust_name'].'<br />'.$openTicket['cust_rep'].'</td>
<td style="width:75px;">'.$openTicket['created_on'].'</td>
<td style="width:75px;">'.$openTicket['updated_on'].'</td>
<td style="width:75px;">'.$openTicket['source_name'].'</td>
<td>'.$openTicket['created_by'].'</td>
<td>'.$openTicket['cat_name'].'<br />'.$openTicket['subcat_name'].'</td>
</tr>';
}
echo '
<tr>
<th colspan="9" style="text-align:right;">Total Open Ticket(s): '.$openTicketsCount.' </th>
</tr>
</table>';
}
And then change this
var count = 1;
$(window).on('load', function() {
var id = document.getElementById( "Search_Var" ).innerText;
$('.page').on('click', function() {
var page = $(this).html();
if(page == "Next")
{
count = count + 1;
}
if(page == "Previous")
{
count = count - 1;
}
if(count < 1)
{
count = 1;
}
if(count > parseInt( $("#pageCount").val()))
{
count = parseInt($("#pageCount").val());
}
$.get("/*******/********/Search_Pagination.inc.php?count_id=" + count + "&search_id=" + id, function(data) {
$('#page').html(data);
});
});
});
Edit:
It might be that the page count is not an integer so just check that the page count returns a valid integer, also added parseInt, it might be the reason why it was not working

I dont know why "Add Comment" is not shown for me,
But I wanted to say dont use functions mysql_*
Try using something like PDO