We Keep Coding

how to Pass ddl value from html and pass it to if else condtion in JS

I have a html select tag with several options in it, I want to make users to select any one options and depending on the user's selection, pass this in a JS function, and perform varoius actions depending on what is selected by user.
My Problem is that, it does not match user selection with the if else condition, on which my rotate() function will get executed, but it does not work.
here is my code.
<table class="table-box">
<thead>
<th colsapn="5" style="color:red">
My Photo Album
</th>
</thead>
<tbody>
<tr>
<td id="r1">Roboust</td>
<td id="r2">Dynamic</td>
<td id="r3">Adhere</td>
</tr>
<tr>
<td id="r4">Popular</td>
<td id="r5">Trending</td>
<td id="r6">Favourite</td>
</tr>
<tr>
<td id="r7">Famous</td>
<td id="r8">Blockbouster</td>
<td id="r9">Navie</td>
</tr>
</tbody>
</table>
<p>Select Box from Below to flip:</p>
<select id="ddlbox" onchange="GetSelectedTextValue(this)">
<option value=""></option>
<option value="1">Roboust</option>
<option value="2">Dynamic</option>
</select>
<script>
//var selectDdl = function(ddlbox) {
var seletion=document.getElementById('ddlbox');
var selectedText = seletion.options[seletion.selectedIndex].Value;
if(selectedText == "Roboust") {
rotate();
}
else {
alert("Else called");
}
var rotate =function() {
document.getElementById('r1').style="transform:rotateX(180deg);transition:0.6s;transform-style:preserve-3d";
</script>

I can't see your GetSelectedTextValue function which should be something
function GetSelectedTextValue (t){
var selectedText = t.options[t.selectedIndex].innerHTML;
if(selectedText == "Roboust") {
rotate();
}
else {
alert("Else called");
}
}

Unable to get HTML table rows values using jQuery

I have some HTML that looks as follows:
<table id="resultsTable" class="table table-bordered table-responsive table-hover table-condensed sortable">
<thead>
<tr>
<th>Company Name</th>
<th>Tours Offered</th>
<th>Average Rating</th>
<th>Total Reviews</th>
</tr>
</thead>
<tbody class="searchable">
#foreach (var item in Model.AccommodationList)
{
<tr>
<td class="accommodationName">
#Html.ActionLink(item.AccommodationName, "ViewHomePage", "AccommodationHomepage", new {accommodationId = item.AccommodationId}, null)
</td>
<td>
#Html.DisplayFor(modelItem => item.FormattedAddress)
</td>
<td>
<Deleted for brevity>
</td>
<td>
#Html.DisplayFor(modelItem => item.TotalReviews)
</td>
<td class="latitudeCell" style="display: none;">
#Html.DisplayFor(modelItem => item.Latitude)
</td>
<td class="longitudeCell" style="display: none;">
#Html.DisplayFor(modelItem => item.Longitude)
</td>
</tr>
}
</tbody>
</table>
I am trying to get the value of the accommodation name, latitude and longitude in each row with the following jQuery:
$('#resultsTable tbody tr').each(function () {
var latitude = $(this).find(".latitudeCell").html();
var longitude = $(this).find(".longitudeCell").html();
var accommodationName = $(this).find(".accommodationName").html();
});
}
However I must be doing something incorrectly because I'm not able to get any values.

Use javascript table.rows function and textContent property to get the inner text of the cell like you can do something like below:
for(var i = 1, row; row = table.rows[i]; i++)
{
var col1 = row.cells[0].textContent;
var col2 = row.cells[1].textContent;
} var col3 = row.cells[2].textContent;
Don't use innerText it is much slower than textContent and also doesn't work in firefox.

I wrote up a fiddle and modified some of your code so I could put text in your cells, I am wondering if this will help you? If not could you write up a small fiddle and I can provide some more assistance.
https://jsfiddle.net/y3llowjack3t/8cL94hgq/
$('#resultsTable tbody tr').each(function () {
var latitude = $(this).find(".latitudeCell").html();
var longitude = $(this).find(".longitudeCell").html();
var accommodationName = $(this).find(".accommodationName").html();
alert(latitude);
});

You are getting the data correctly but, you don't seem to do anything with the values you obtain from the table. And, after .each(), you will not have access to even the values from the last row since you're using local variables. You can create an array that has all the data.
Give this a try:
var locations = $('#resultsTable tbody tr').map(function() {
var location = {};
location.latitude = $(this).find(".latitudeCell").html();
location.longitude = $(this).find(".longitudeCell").html();
location.accommodationName = $(this).find(".accommodationName").html();
return location;
}).get();
console.log( locations );
//OUTPUT: [{"latitude": "<val>","longitude": "<val>", "accommodationName": "<val>"},{.....},....]

Your code works for me:
example
In the code you paste you put a } more, try to check if there's some issues with brakets.

Here is a working example. In your example, I did not see how you were calling your function. I enclosed your function in $().ready() so that it is called when the DOM is ready. You will want to call your function any time the tan;e content changes.
$().ready(function() {
$('div#cellValues').empty();
$('div#cellValues').append('<ul></ul>');
$('#resultsTable tbody tr').each(function(index) {
var latitude = $(this).find('.latitudeCell').html();
var longitude = $(this).find(".longitudeCell").html();
var accommodationName = $(this).find(".accommodationName").html();
$('div#cellValues ul').append('<li>' + accommodationName + ': [' + latitude + ',' + longitude + ']</li>');
});
});
#cellValues {
border: 1px solid red;
}
#cellValues::before {
content: "Cell Values:";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cellValues"></div>
<table id="resultsTable" class="table table-bordered table-responsive table-hover table-condensed sortable">
<thead>
<tr>
<th>Company Name</th>
<th>Tours Offered</th>
<th>Average Rating</th>
<th>Total Reviews</th>
</tr>
</thead>
<tbody class="searchable">
<tr>
<td class="accommodationName">accomidationName1</td>
<td>FormattedAddress1</td>
<td></td>
<td>TotalReviews1</td>
<td class="latitudeCell" style="display: none;">Latitude1</td>
<td class="longitudeCell" style="display: none;">Longitude1</td>
</tr>
<tr>
<td class="accommodationName">accomidationName2</td>
<td>FormattedAddress2</td>
<td></td>
<td>TotalReviews2</td>
<td class="latitudeCell" style="display: none;">Latitude2</td>
<td class="longitudeCell" style="display: none;">Longitude2</td>
</tr>
<tr>
<td class="accommodationName">accomidationName3</td>
<td>FormattedAddress3</td>
<td></td>
<td>TotalReviews3</td>
<td class="latitudeCell" style="display: none;">Latitude3</td>
<td class="longitudeCell" style="display: none;">Longitude3</td>
</tr>
</tbody>
</table>

HTML JavaScript - changing info in cell by ID

I've got this problem:
I have a table in HTML, that I want to edit via Javascript.
The table info is of rooms with either value 0 or 1.
I have two buttons that can change a cell, that can set the value to 1 or 0, but I want a function connected to one button, that changes the value, as 1 gets to 0, and 0 gets to 1.
One solution I find is to give each cell an ID and change it, and the other one is to use row/cell from the table.
<table id="table1">
<table border="1" cellpadding="1" cellspacing="3">
<tr>
<td> Room </td>
<td> Status </td>
</tr>
<tr>
<td> r1 </td>
<td id="room1"> 0 </td>
</tr>
<tr>
<td> r2 </td>
<td> 0 </td>
</tr>
<tr>
<td> r3 </td>
<td> 1 </td>
</tr>
Currently I've tried:
<button type="button" onclick="metode1()">Room 1 => 0/1</button>
<button type="button" onclick="metode2()">Room 1 => 0</button>
<script>
function metode1(){
if(document.getElementById("room1").innerHTML > 0) {
document.getElementById("room1").innerHTML = 0;
}
else {
document.getElementById("room1").innerHTML = 1;
}
}
function metode2(){
document.getElementById("table1").rows[1].cells[1].innerHTML = 0;
}
</script>
But neither of them work..
What can I do?

metode1 would work, but your initial text in the element has spaces on either side of the 0, so > can't implicitly convert it to a number. If you remove the spaces (in the markup, or by doing .innerHTML.trim() on a modern browser), the implicit conversion from string to number will work. You might consider converting explicitly, but you'll still have to trim.
Live Example with the spaces removed in the markup:
function metode1() {
if (document.getElementById("room1").innerHTML > 0) {
document.getElementById("room1").innerHTML = 0;
} else {
document.getElementById("room1").innerHTML = 1;
}
}
<table border="1" cellpadding="1" cellspacing="3">
<tr>
<td>Room</td>
<td>Status</td>
</tr>
<tr>
<td>r1</td>
<td id="room1">0</td>
</tr>
<tr>
<td>r2</td>
<td>0</td>
</tr>
<tr>
<td>r3</td>
<td>1</td>
</tr>
</table>
<button type="button" onclick="metode1()">Room 1 => 0/1</button>
Live Example using trim:
function metode1() {
if (document.getElementById("room1").innerHTML.trim() > 0) {
document.getElementById("room1").innerHTML = 0;
} else {
document.getElementById("room1").innerHTML = 1;
}
}
<table border="1" cellpadding="1" cellspacing="3">
<tr>
<td>Room</td>
<td>Status</td>
</tr>
<tr>
<td>r1</td>
<td id="room1"> 0 </td>
</tr>
<tr>
<td>r2</td>
<td>0</td>
</tr>
<tr>
<td>r3</td>
<td>1</td>
</tr>
</table>
<button type="button" onclick="metode1()">Room 1 => 0/1</button>
Note that trim was added in ECMAScript5 (2009) and so may not be on some older JavaScript engines. It's easily shimmed, though.

Try this-
<button type="button" onclick="metode1()">Room 1 => 0/1</button>
function metode1(){
if(document.getElementById("room1").innerHTML.trim() =="1") {
document.getElementById("room1").innerHTML = 0;
}
else {
document.getElementById("room1").innerHTML = 1;
}
}

Angular checkbox filter leaves no data

My checkbox filter is totally removing all data records instead of filtering.
I used this post as guidance: http://jsfiddle.net/65Pyj/
I can get and console the selected category. I am having problems filtering the list.
My data is like so:
{"product_title":"COPD Track Package","product_code":"COPDPKG2014","id":"a1u40000000C182AAC","Id":"a1u40000000C182AAC","sort_order":"6","sort_code":"COPDPKG2014","category":["Postgraduate Course, Continuing Education"]}
Here is the angular:
<div class="container">
<div class="ng-scope" ng-app="products">
<div class="ng-scope" ng-controller="ShoppingCartCtrl">
<div class="row">
<div class="col-sm-7"><h3 class="colored-title">Search Filter</h3>
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>By Product Title:</td>
<td><input ng-model="search.product_title" type="text"/></td>
</tr>
<tr>
<td>By Product Code:</td>
<td><input ng-model="search.product_code" type="text"/></td>
</tr>
<tr>
<td>By Presentation Title:</td>
<td><input ng-model="search.presentations" type="text"/></td>
</tr>
<tr>
<td>By Speaker Name:</td>
<td><input ng-model="search.speakers" type="text"/></td>
</tr>
<tr>
<td><input type="checkbox" ng-click="includeProduct('Postgraduate Course')"/>Postgraduate Course</td>
<td><input type="checkbox" ng-click="includeProduct('Continuing Education')"/>Continuing Education</td>
</tr>
<tr><td>Filter dump: {{productIncludes}}</td></tr>
</tbody>
</table></div>
</div>
<div>Sort by:<select ng-model="sortExpression">
<option value="sort_code">Product Code</option>
<option value="product_title">Product Title</option>
</select></div>
<table class="table table-bordered table-striped">
<thead>
<tr class="warning"><th>Product Code</th><th>Product Title</th></tr>
</thead>
<tbody>
<tr ng-repeat="item in items | orderBy:mySortFunction | filter:search |filter:productFilter">
<td valign="top">
{{item.id}}<div ng-repeat="c in item.cat" >{{c}}</div>
</td>
<td>
{{item.product_title}}
</tr>
</tbody>
</table>
</div>
$scope.productIncludes = [];
$scope.includeProduct = function(category){
var i = $.inArray(category, $scope.productIncludes);
if(i > -1){
$scope.productIncludes.splice(i,1);
}else{
$scope.productIncludes.push(category);
}
console.log($scope.items.length);
}
$scope.productFilter = function (items) {
if ($scope.productIncludes.length > 0) {
if ($.inArray(items.cat, $scope.productIncludes) < 0) return;
}
return items;
}

Basically it is problem with your data representations.
You have categories stored as "category":["Postgraduate Course, Continuing Education"] and you want to search in those categories as if it was an array like "category":["Postgraduate Course", "Continuing Education"].
I recommend you to represent your data like the second case and then you can iterate over it like this:
$scope.productFilter = function (items) {
if ($scope.productIncludes.length > 0) {
var result = $scope.productIncludes.filter(function(n) {
return items.category.indexOf(n) != -1
});
if(result.length < 1) {
return;
}
}
return items;
}
And here is your fiddle: http://jsfiddle.net/65Pyj/133/
Short explanation:
filter function in combination with the indexOf function will return an intersection of the two arrays.

Updating HTML table from SQL server repeadetly

I have an HTML page with a table in it which I want to update it's values every 2 seconds with the values stored in the MySQL database.
setInterval(updateSensorsTable, 2000);
setInterval(updatePower, 2000);
function showValue(value) {
document.getElementById("range").innerHTML = value;
}
function TurnLedOn() {
//TODO: need to set the led state and update the sql server
document.getElementById("ledStatus").src = "/LedOn.png";
}
function TurnLedOff() {
//TODO: need to set the led state and update the sql server
document.getElementById("ledStatus").src = "/LedOff.png";
}
function AjaxCaller() {
var xmlhttp = false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function callPage(url, div) {
ajax = AjaxCaller();
ajax.open("GET", url, true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
div.innerHTML = ajax.responseText;
}
}
}
ajax.send(null);
}
function updateSensorsTable() {
for (i = 0; i <= 7; i++)
callPage('/getVarFromDB.php?offset=' + i, document.getElementById(i));
}
function updatePower() {
document.getElementById("powerValue").innerHTML = '200';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
<title>SmartLight</title>
</head>
<body bgcolor="#E6E6FA" onload='updateSensorsTable()'>
<br></br>
<table class="sensorsTable" align="center">
<thead>
<tr>
<th>Sensor</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">GPS</td>
<td align="center" id="0">0</td>
</tr>
<tr>
<td align="left">Temperature</td>
<td align="center" id="1">0</td>
</tr>
<tr>
<td align="left">Pressure</td>
<td align="center" id="2">0</td>
</tr>
<tr>
<td align="left">Light</td>
<td align="center" id="3">0</td>
</tr>
<tr>
<td align="left">Altitude</td>
<td align="center" id="4">0</td>
</tr>
<tr>
<td align="left">Accelerometer</td>
<td align="center" id="5">0</td>
</tr>
<tr>
<td align="left">Humidity</td>
<td align="center" id="6">0</td>
</tr>
<tr>
<td align="left">Camera</td>
<td align="center" id="7">0</td>
</tr>
</tbody>
</table>
<br></br>
<table class="ledTable" align="center">
<tr>
<td align="center">
<input type="image" src="/TurnOn.png" id="turnOn" width="60" height="60" onclick='TurnLedOn()'>
</td>
<td align="center">
<input type="image" src="/TurnOff.png" id="turnOff" width="60" height="60" onclick='TurnLedOff()'>
</td>
<td align="center">
<img src="/LedOn.png" style="width:60px;height:60px" id="ledStatus">
</td>
</tr>
<tr>
<td align="center" id="ledOnButton">LED On</td>
<td align="center" id="ledOffButton">LED Off</td>
<td align="center">LED Status</td>
</tr>
</table>
<div align="center">
Brightness:
<input type="range" name="brightness" min="0" max="100" value="0" step="1" onchange="showValue(this.value)" />
<span id="range">0</span>
<table align="center" class="power">
<tr>
<td align="center" id="powerValue">0</td>
<td align="left">mW</td>
</tr>
</table>
<div align="center">LED Power Meter</div>
</div>
</body>
</html>
Here is the php code:
<?php
include("connect_to_mysql.php");
$result = mysql_query("SELECT value FROM sens" );
echo mysql_result($result,$offset);
Please help me to do this with the correct way.
This code doesn't work when I use the for loop. Using this code with a direct assigment e.g callPage('/getVarFromDB.php?offset=' + 1, document.getElementById(1)); is working

"I have an HTML page with a table
in it which I want to update it's values every 2 seconds with the
values stored in the MySQL database"
Am I missing something? Where does JavaScript enter into this (other than Das Blinkenlights)?
Is there any compelling reason not to just use an HTML page and auto-refresh it every 2 seconds with <meta http-equiv="refresh" content="2000">?
That's the KISS solution.

Change the global to a local: var ajax = AjaxCaller() and this should work.