Selecting a specific column in a option box using Javascript - javascript

I'm using the following php code to create a select option box:
$TypeLU = mysqli_query($mysqli, "SELECT * FROM LookupList");
while($Row = mysqli_fetch_array($TypeLU)) {
$TypeOptions = $TypeOptions."<option>$Row[1] $Row[2]</option>";
}
In HTML it gets displayed as a list with 2 columns. If I select and item from the list the value would be the concat of both $Row[1] and $Row[2] which is fine for display purposes, but I want to be able to 'extract' for example only $Row[1] as being the 'bound' value which I can then use as refrence.
So in pure Javascript I want to be able to get the value of just $Row[1] for example:
var x = document.getElementById("selectbox").value;
// So x must be only $Row[1] and not the concat of $Row[1] $Row[2]
Thanks

Use:
$TypeOptions = $TypeOptions."<option value='$Row[1]'>$Row[2]</option>";
You may also want to consider escaping the variables in case they contain any < or " or other special HTML characters. See htmlspecialchars.
Full example with escaping:
$TypeLU = mysqli_query($mysqli, "SELECT * FROM LookupList");
while($Row = mysqli_fetch_array($TypeLU))
{
$Row[1] = htmlspecialchars($Row[1]);
$Row[2] = htmlspecialchars($Row[2]);
$TypeOptions = $TypeOptions."<option value='$Row[1]'>$Row[2]</option>";
}

Related

HTML form select to drive PHP/SQLSRV results

I'm working on a very basic web page to facilitate data entry. I have it working with PHP talking to SQL Server to both enter and display data. At the simplest level, they'll select a store from a dropdown and enter some data, then hit submit.
I'm trying to dynamically display the last 7 days worth of data when their store is chosen from the form select input. How do I get the Select value to drive the SQL query? I found how to use onchange to fire a javascript function, which I can alert the value. Do I really need to then use jquery or AJAX to link that back to the PHP select query or is there a simpler way to approach this?
I'm trying to learn this all from scratch and am quite admittedly out of my element. Here are some snippets of what I've got:
...
<script>
function OnSelectChange(obj)
{
alert(obj.options[obj.selectedIndex].value);
}
</script>
...
<td align="right">Store</td><td width="125"><select style="width:100%" name="store" onchange="OnSelectChange(this)">
...
<?php
$tsql = "select * from test where DateStamp >= getdate()-7";
$stmt = sqlsrv_query($conn, $tsql);
//generate table view of data
echo "<table>";
echo "<tr><td>Store ID</td><td>Date</td><td>Data</td></tr>";
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC))
{
$StoreID = $row['StoreID'];
$DateStamp = $row['DateStamp'];
$Donations = $row['Data'];
echo "<tr><td>".$StoreID."</td><td>".$DateStamp."</td><td>".$Data."</td></tr>";
}
echo "</table>";
?>
I've found a lot of helpful information to get me this far, but am stuck now.
Thank you in advance.
Got it! For anyone else looking, here are relevant snippets of code:
<style>
.hideable {
visibility: collapse;
}
</style>
...
<script language="JavaScript">
function OnSelectChange(cl)
{
var els = document.getElementsByClassName('hideable');
for(var i=0; i<els.length; ++i){
var s = els[i].style;
s.visibility = 'collapse';
};
var els = document.getElementsByClassName(cl);
for(var i=0; i<els.length; ++i){
var s = els[i].style;
s.visibility = 'visible';
};
}
</script>
...
<select style="width:100%" name="store" onchange="OnSelectChange(this.value)">
...
echo "<tr class='hideable ".$StoreID."'><td>".$StoreID."</td><td>".$DateStamp."</td><td>".$Data."</td></tr>";
Leveraging dual classes upon the table (tr) creation and the collapse CSS style property was key.

Text not marking up

I am writing a page which allows a tournament director (TD) to add players to an event. When the TD goes to search for a player I want the search results to appear on keyup below the search input (without needing to refresh the page).
At this stage I have 2 php pages and 1 js page and have the live search happening, but the output is not getting marked up. I have written a piece of code to convert a PHP $_SESSION[''] array to a javascript array, but my brain is frying and I'm not sure where to go from here.
I effectively want the processed version of this code as output (presuming the SQL returns only 1 player named John Smith)
<tr></td> 123 </td><td> John Smith </td></tr>
My main php page has:
<table border='1px'>
<tr><th colspan='6'> <?php echo ($eName . " - " . $vn); ?></th></tr>
<tr><th>Player ID</th>
<th>Player Name</th>
<th>Place</th>
<th>Points</th>
<th>Cash</th>
<th>Ticket?</th></tr>
<tr><td colspan='3'>Search <input type='text' id='newsearch'</input>
</table>
<br>
<div id="newsearch-data"> </div>
<script>
var players = [];
</script>
<?php
//Makes php array into js array
foreach ($_SESSION['players'] as $id){
echo "<script> players.push('" . $id . "') </script>";
}
?>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"> </script>
<script src="global.js"> </script>
js page:
$('input#newsearch').on('keyup', function(){
var newsearch = $('input#newsearch').val();
if ($.trim(newsearch)!= "") {
$.post('newsearch.php', {newsearch: newsearch}, function(data) {
$('div#newsearch-data').text(data);
});
}
});
And 2nd php page
<?php
session_start();
unset($_SESSION['players']);
if (isset($_POST['newsearch']) === true && empty($_POST['newsearch'] === false)){
require 'dbconnect.php';
$term = $_POST['newsearch'];
$terms = "%" . $term . "%";
$_SESSION['players'] = array();
$query = ("SELECT * FROM players WHERE Username LIKE '$terms'");
$run_query = mysqli_query($dbcon, $query);
while ($dbsearch = mysqli_fetch_assoc($run_query))
{
array_push ($_SESSION['players'],$dbsearch['PlayerID']);
echo "<tr><td>" . $dbsearch['PlayerID'] . "</tr></td>";
}}?
How can I output a new row on a html table rather than raw html code?
replace $('div#newsearch-data').text(data);
with $('div#newsearch-data').html(data);
$.text() escapes the input string and you should use it when you know the input is a string, and that you want to preset it "as is". If the input includes actual HTML that you want to inject into the DOM, $.html() is your friend :-)
You need .html() to render output as a HTML rather than .text(), because .text() will output the result as a raw data, then try this solution instead :
$('div#newsearch-data').html(data);
Live example - credited to #Peter Bailey for live example.
References
http://api.jquery.com/html/ - .html()
http://api.jquery.com/text/ - .text()

how to display only 4 result in each page using html & sqlite

This is me once again as I got some error in previous question in the code. So asking this question once again.
This is code from phonegap app from index html page. I don't know how to get only 4 result from database at each page when a sqlite query processed?
Also I want to add next page button. When clicking on this button next 4 result from database should come. This is code.
function querySuccess(tx, results){
var len = results.rows.length;
var output = '';
for (var i=0; i<len; i++){
output = output + '<li id="' + results.rows.item(i).id + '">' + results.rows.item(i).list_action + '</li>';
}
messageElement.html('<p>There are ' + len + ' items in your list:</p>');
listElement.html('<ul>' + output + '</ul>');
}
Dividng your solution into 3 phases
Phase 1: Using LIMIT Clause you can limit number of rows to be displayed
SELECT expressions FROM tables WHERE conditions ORDER BY expression [ ASC | DESC ] LIMIT number_rows OFFSET offset_value;
For Example:
SELECT employee_id, last_name, first_name
FROM employees
WHERE favorite_website = 'divyashah.in'
ORDER BY employee_id DESC
LIMIT 4;
Phase 2:
As the code provided by you is not efficient to explain but still... Now for your Next button
1) Fetch number of rows from your database table (mysql_num_rows).
2) Store that number in a Variable say 'a'.
3) Divide it(a) with 4 and store it in variable 'b'.
4) Use if > if(b!=0) {display next button} else {no need to display}
Phase 3:
This will fetch your first four rows i.e. from 0 to 4.
<?PHP
$fetch = mysql_query("SELECT * FROM table LIMIT 0, 4")or
die(mysql_error());
?>
Now how can you make the next page show the next 4 records?
you simply have to store the value of the starting row in a variable and pass it in the URL as a GET variable. Also have to check if there was a value already passed or not so we can set a default value in case it wasn't (zero to start from first row):
<?PHP
//check if the starting row variable was passed in URL or not
if (!isset($_GET['startrow']) or !is_numeric($_GET['startrow'])) {
//we give the value of the starting row to 0 because nothing was found in URL
$startrow = 0;
//otherwise we take the value from the URL
} else {
$startrow = (int)$_GET['startrow'];
}
?>
Now your query should have this new variable ($startrow) in the LIMIT clause
<?PHP
//this part goes after the checking of the $_GET var
$fetch = mysql_query("SELECT * FROM table LIMIT $startrow, 4")or
die(mysql_error());
?>
Now to see the next 4 records you should have a link which will add 4 to $startrow so you can view the next 4 records
<?PHP
//now this is the link..
echo 'Next';
?>

check if line has already been parsed and inserted into mysql database

I am parsing a whole javascript file (min_day.js) into arrays and then creating INSERT Statements; then executing them with a mysqli_multi_query to get the data into my database
this min_day.js file is updating irregularly (in most cases every 5 min) during the day but it still holds the data from the same day: that means always a new line with data is added on top of the old data
so i am going to configure a cronjob that runs every min to do the parsing and inserting mentioned in the first paragraph but:
now the problem is: how can i only parse and insert the data that has not already been parsed and inserted into the database? how can i check if the data has already been parsed and inserted?
i want to avoid having twice the same data in my database. i guess the solution could be something with using a timestamp... but i'm a beginner and don't know how
// min_day.js file
m[mi++]="24.11.14 08:30:00|196;124;132;55;540;601;45|194;112;123;53;538;606;45|457;350;120;149;570;541;45|452;336;114;146;566;544;46|428;323;107;145;569;541;45|409;325;114;137;572;541;45|38;50;11;407;10|0;0;0;251;14|0;0;0;253;14|11;8;73;0.0;3|16;9;74;0.0;5|13;7;74;0.0;3|16;8;75;0.0;4|18;8;74;0.0;6|0;0;0;310"
m[mi++]="24.11.14 08:25:00|151;106;104;39;539;594;45|147;90;102;37;538;589;45|355;273;96;111;564;540;44|351;259;94;109;566;534;46|348;280;87;110;563;539;45|331;269;97;103;569;536;45|28;38;8;377;10|0;0;0;228;14|0;0;0;239;14|10;8;73;0.0;2|14;8;74;0.0;4|11;7;74;0.0;2|13;8;75;0.0;3|15;8;74;0.0;4|0;0;0;303"
m[mi++]="24.11.14 08:20:00|110;84;85;27;535;586;45|113;74;82;26;533;586;44|283;229;81;83;564;539;44|282;213;76;81;564;536;45|283;223;73;82;566;539;44|266;232;81;76;566;540;45|19;30;0;394;10|0;0;0;230;14|0;0;0;228;14|6;8;73;0.0;1|9;8;74;0.0;3|6;7;74;0.0;1|9;7;75;0.0;2|11;7;74;0.0;3|0;0;0;279"
m[mi++]="24.11.14 08:15:00|94;82;80;18;535;594;44|93;70;76;17;534;599;44|264;215;76;59;558;534;43|262;198;74;58;560;534;45|260;211;66;58;564;537;44|248;208;76;54;560;534;44|17;28;0;394;10|0;0;0;229;14|0;0;0;228;14|6;8;73;0.0;1|9;8;74;0.0;2|5;7;74;0.0;1|8;7;75;0.0;1|10;7;74;0.0;2|0;0;0;281"
m[mi++]="24.11.14 08:10:00|45;47;64;0;556;573;44|62;50;58;9;543;587;43|190;156;59;38;561;528;43|188;148;57;36;557;523;44|189;158;51;37;561;526;44|179;163;61;34;560;521;44|1;11;0;454;10|0;0;0;216;14|0;0;0;213;14|4;8;73;0.0;0|7;8;74;0.0;1|3;7;74;0.0;0|4;7;75;0.0;0|7;7;74;0.0;1|0;0;0;197"
m[mi++]="24.11.14 08:05:00|49;54;55;5;519;551;43|52;44;51;4;517;553;43|151;139;49;22;499;477;42|147;126;47;20;496;466;44|132;120;39;21;530;501;43|130;136;50;19;493;466;43|0;0;0;353;7|0;0;0;206;14|0;0;0;203;14|3;8;73;0.0;0|6;8;74;0.0;0|2;7;74;0.0;0|3;7;75;0.0;0|5;7;74;0.0;0|0;0;0;121"
m[mi++]="24.11.14 08:00:00|36;50;47;1;520;524;43|36;42;48;0;521;531;42|118;112;44;10;470;446;42|116;106;40;9;473;448;44|114;114;37;10;477;452;43|104;120;44;9;471;447;43|0;0;0;0;0|0;0;0;196;14|0;0;0;192;14|3;8;73;0.0;0|6;8;74;0.0;0|1;7;74;0.0;0|2;7;75;0.0;0|5;7;74;0.0;0|0;0;0;118"
m[mi++]="24.11.14 07:56:00|0;12;15;0;641;641;42|0;1;16;0;641;640;42|75;82;33;5;470;446;42|72;83;33;3;473;448;43|74;83;29;5;477;452;42|66;91;36;4;471;447;43|0;0;0;0;0|0;0;0;0;0|0;0;0;0;0|1;8;73;0.0;0|4;8;74;0.0;0|1;7;74;0.0;0|1;7;75;0.0;0|3;7;74;0.0;0|0;0;0;115"
m[mi++]="24.11.14 07:50:00|0;0;0;0;0;0;0|0;0;0;0;0;0;0|0;19;9;0;586;567;41|0;10;3;0;584;564;42|0;10;0;0;590;570;42|0;19;9;0;584;566;42|0;0;0;0;0|0;0;0;0;0|0;0;0;0;0|1;8;73;0.0;0|3;8;74;0.0;0|0;7;74;0.0;0|0;7;75;0.0;0|1;7;74;0.0;0|0;0;0;0"
// php code to parse min_day.js and insert data into db
ini_set('auto_detect_line_endings', true);
$fileArray = file("min_day.js");
$fileArray = array_values(array_filter($fileArray, "trim"));
$arrayElements = count($fileArray) -1;
$SQL = "";
$x = 0;
while($x <= $arrayElements)
{
$SQL .= "INSERT INTO mydatabase (DatumUhrzeit, Pac_1, Pdc1_1, Pdc2_1, DaySum_1, Udc1_1, Udc2_1, Temp_1, Pac_2, Pdc1_2, Pdc2_2, DaySum_2, Udc1_2, Udc2_2, Temp_2, Pac_3, Pdc1_3, Pdc2_3, DaySum_3, Udc1_3, Udc2_3, Temp_3, Pac_4, Pdc1_4, Pdc2_4, DaySum_4, Udc1_4, Udc2_4, Temp_4, Pac_5, Pdc1_5, Pdc2_5, DaySum_5, Udc1_5, Udc2_5, Temp_5, Pac_6, Pdc1_6, Pdc2_6, DaySum_6, Udc1_6, Udc2_6, Temp_6, Pac_7, Pdc1_7, DaySum_7, Udc1_7, Temp_7, Pac_8, Pdc1_8, DaySum_8, Udc1_8, Temp_8, Pac_9, Pdc1_9, DaySum_9, Udc1_9, Temp_9, SolIrr_10, TmpMod_10, TmpAmb_10, Wind_10, DaySumIrr_10, SolIrr_11, TmpMod_11, TmpAmb_11, Wind_11, DaySumIrr_11, SolIrr_12, TmpMod_12, TmpAmb_12, Wind_12, DaySumIrr_12, SolIrr_13, TmpMod_13, TmpAmb_13, Wind_13, DaySumIrr_13, SolIrr_14, TmpMod_14, TmpAmb_14, Wind_14, DaySumIrr_14, Pac_15, Pdc1_15, DaySum_15, Udc_15) VALUES ";
$string = $fileArray[$x];
$string = str_ireplace("|", ";", $string);
$data=explode(";", substr($string,9, strlen($string)-11));
$SQL .= "('" . DateTime::createFromFormat('d.m.y H:i:s', $data[0])->format('Y-m-d H:i:s') . "', ";
for ($i=1; $i<= 85; $i++){
$data2 = explode(";", $data[$i]);
$SQL .= "'" . $data[$i] . "', ";
}
$SQL .= "'$data[86]'); <br>";
$x++;
}
// connecting to db and executing mysqli_multi_query....
You can setup proper primary keys and use the insert on duplicate...update syntax:
--Say A and B together was the primary key.
INSERT INTO table (a,b,c) VALUES (1,2,3)
ON DUPLICATE KEY UPDATE c=c+1;
-- Row will be inserted with A=1, B=2, C=3
INSERT INTO table (a,b,c) VALUES (1,2,3)
ON DUPLICATE KEY UPDATE c=c+1;
-- Row where A=1, B=2 will be updated to C=4
Second insert would not give an error but would rather result in the value of C being updated on the already existing row.
In your case, you can update the timestamp:
INSERT INTO table (a,b,ts) VALUES (1,2,current_timestamp)
ON DUPLICATE KEY UPDATE ts=current_timestamp;
To create a primary key on a table that already exists:
alter table tablename add primary key(field1, field2);
To create a primary key on a new table:
create table newtable ( x int, y int, z varchar(50), primary key(x,y) );

Call Javascript from recurring loop with incremental IDs

I have this php site and i use javascript with it.
One of the pages is an entry form with 10 lines to enter data in.
One line in this case would be coded in this way:
echo "<td style='border-width: 0'><input type='text' id = 'price1' style = 'font-size: 10px' name='poline1[price]' size='7'></td>";
Right next to this input field there is a button:
echo "<td style='border-width: 0'><a href = 'javascript:void(0)' onClick = 'copyRow1;' class='button6'>Copy Down</a></td>";
Javascript function copyRow1 is as follows:
<script type="text/javascript">
function copyRow1() {
document.fabricorder.price2.value = document.fabricorder.price1.value;
}
</script>
It copies inputted value from input box ID = price1 into input box ID = price2.
I have 10 Javascript functions like this
copyRow1(), copyRow2(), copyRow3(), etc....
It works fine but I am trying to optimize all the code to make it easier for modifications and now I want to loop all my lines.
So I want change my line script in this way:
for ($i = 1; $i <= 10; ++$i){
echo "<tr>";
echo "<td style='border-width: 0'><input type='text' id = 'price$i' style = 'font-size: 10px' name='poline[$i][price]' size='7'></td>";
echo "<td style='border-width: 0'><a href = 'javascript:void(0)' onClick = 'copyRow($i);' class='button6'>Copy Down</a></td>";
echo "</tr>";
}
and my function this way:
<script type="text/javascript">
function copyRow(i) {
document.fabricorder.price(i+1).value = document.fabricorder.price(i).value;
}
</script>
Unfortunately this doesn't work. What am i doing wrong?
Try modifying your copyRow function to:
function copyRow(i) {
for (var j=i,numRows=document.fabricorder.length;j<numRows;j++) {
document.fabricorder["price"+(j+1)].value = document.fabricorder["price"+(j+1)].value;
}
}
You need to loop over all input fields, copying each value to the next. It's hard to give you 100% working code without seeing 100% of your code. Can you put it in a JSFiddle?

Categories