I need to fill the code and initials of a employment with the same javascript functions.
The java script function
<script type="text/javascript">
function Expedisi(t) {
var y = document.getElementById("code");
y.value = t.value;
}
</script>
<tr>
<td width="200px" align="right"><label for=""><font color="0099FF"size="3px">Code</font><span></span></label></td>
<td align="left"><input type="text" id="code" name="code" value=" <?php echo ($addflag == 0) ? $get['loan'] : ""; ?>" class="form-input-code" readonly />
</tr>
<tr>
<td width="200px" align="right"><label for=""><font color="0099FF" size="3px">Employee Name </font><span></span></label>
</td>
<td align="left"><select data-placeholder="Employee Name" style="width:332px;" id="cmbemployee" name="cmbemployee" class="chzn-select-deselect" onchange="Expedisi(this)""/>
<option value="<?php echo ($addflag == 0) ? $gete['accode'] : ""; ?>"><?php echo ($addflag == 0) ? $gete['name'] : ""; ?></option>
<?php
$mown = mysql_query("SELECT * FROM accmast WHERE grpcode='044'") or die(mysql_error());
while($trow = mysql_fetch_array($mown))
{
echo "<option value=$trow[accode]>$trow[name]</option>";
}
?>
</select>
</td>
</tr>
you can no get value of select element in js!
<script type="text/javascript">
function Expedisi(t) {
var y = document.getElementById("code");
y.value = t.options[t.selectedIndex].innerHTML
}
</script>
Place single quotes ('')around the value.
while($trow = mysql_fetch_array($mown))
{
echo "<option value='{$trow[accode]}'>{$trow[name]}</option>";
}
Related
I have a database, golf_add.php and ajax_price.php Files.
So I can not do this:
After I choose values from form like > From | To | Transfer Type | Golf Date option box fields, I want these fields' values are compared and select the appropriate data from database (for golf price value) into Golf Price textBox.
For example:
From: XXX Otel (id=15)To: YYY Place(id=25)Transfer Type: Shuttle (id=4)Golf Date: 2015/08/05
After I choose these values from form I want to click refresh button OR after I selected the Golf Date last step its automatically must get only price from correct row according to my selection as above..
You can preview my form here :
golf_add.php code:
<!-- OTHER CODES ... -->
<script>
function refreshforprice() {
jQuery.ajax({
type: 'GET',
url: 'ajax_price.php',
data: 'tid='+jQuery('#op_transfer_type_id').val()+'&p='+jQuery('#operation_pax').val()+'&p2='+jQuery('#operation_pax2').val()+'&v=1',
cache : false,
success: function(sonuc){
sonucx = sonuc.split(';');
jQuery('#sold_tour_price_auto').val(sonucx[0]+'.00');
jQuery('#xprice1').html('* '+sonucx[1]+'.00 €');
jQuery('#xprice2').html('* '+sonucx[2]+'.00 €');
}
});
}
</script>
<form method="POST" action="golf_add.php" name="adminForm" id="adminForm">
<table class="adminlist">
<thead>
<tr>
<th> GOLF DETAILS </th>
</tr>
</thead>
</table>
<table class="adminlist">
<tbody>
<?PHP $i = 0; ?>
<tr class="<?php $i++; $m=$i%2; if($m=='1') echo "row0"; else echo "row1";?>">
<td align="right"><b>From</b></td>
<td id="fromarea">
<select size="1" name="operation_pickup_from" id="operation_pickup_from">
<option value="-1" disabled selected> --- Select Pick Up Point --- </option>
<?php
$strSQL2 = "SELECT * FROM pickup_points_From WHERE region_id='".$regionidx."' soldtours='1' ORDER BY pickup_point_name ASC";
$resultSQL2 = mysql_query($strSQL2);
$ks = mysql_num_rows($resultSQL2);
for ($z=0; $z<$ks; $z++) {
$rowSQL2 = mysql_fetch_array($resultSQL2);
?><option value="<?=$rowSQL2['pickup_point_id']?>"><?=$rowSQL2['pickup_point_name']?></option><?
}
?>
</select>
</td>
</tr>
<tr class="<?php echo "row1";?>">
<td align="right"><b>To</b></td>
<td id="fromarea">
<select size="1" name="operation_pickup_to" id="operation_pickup_to">
<option value="-1" disabled selected> --- Select Drop Point --- </option>
<?php
$strSQL3 = "SELECT * FROM pickup_points_To WHERE region_id='".$regionidx."' AND soldtours='1' ORDER BY drop_point_name";
$resultSQL3 = mysql_query($strSQL3);
while($rowSQL3 = mysql_fetch_array($resultSQL3)) {
?>
<option value="<?=$rowSQL3['drop_point_id']?>"><?=$rowSQL3['drop_point_name']?></option>
<? } ?>
</select>
</td>
</tr>
<tr class="<?php $i++; $m=$i%2; if($m=='1') echo "row0"; else echo "row1";?>">
<td align="right"><b>Transfer Type</b></td>
<td id="tourtypes">
<select size="1" name="op_transfer_type_id" id="op_transfer_type_id">
<option value="-1" disabled selected> --- Select Transfer Type --- </option>
<?php
$strSQL2 = "SELECT * FROM operation_transfer_types WHERE op_transfer_type_id IN (4,10) ORDER BY op_transfer_type_name";
$resultSQL2 = mysql_query($strSQL2);
while($rowSQL2 = mysql_fetch_array($resultSQL2)) {
?><option value="<?=$rowSQL2['op_transfer_type_id']?>"><?=$rowSQL2['op_transfer_type_name']?></option><?
}
?>
</select>
</td>
</tr>
<tr class="<?php $i++; $m=$i%2; if($m=='1') echo "row0"; else echo "row1";?>">
<td width="45%" align="right"><b>Golf Date</b>»</td>
<td width="55%"><input type="text" name="operation_date" id="operation_date" value="<?=$_GET['selected_day']?>" size="10" class="datepicker" autocomplete="off"> <input type="text" name="operation_time" id="operation_time" size="5" class="timepicker" autocomplete="off">«<b>Golf Time</b></td>
</tr>
<tr class="<?php $i++; $m=$i%2; if($m=='1') echo "row0"; else echo "row1";?>">
<td align="right"><b>Adult</b></td>
<td><input type="text" name="operation_pax" id="operation_pax" size="5" value="1" onkeypress="return OnlyDigits(event);"
onblur="OnlyDigits(event,false)" autocomplete="off"> <span id="xprice1" style="color: green;">* 0.00 €. </span>
</tr>
<tr class="<?php $i++; $m=$i%2; if($m=='1') echo "row0"; else echo "row1";?>">
<td align="right" id="agex1"><b>06-12 Age</b></td>
<td><input type="text" name="operation_pax2" id="operation_pax2" size="5" value="0" onkeypress="return OnlyDigits(event);"
onblur="OnlyDigits(event,false)" autocomplete="off"> <span id="xprice2" style="color: green;">* 0.00 €. </span>
</td>
</tr>
<tr class="<?php $i++; $m=$i%2; if($m=='1') echo "row0"; else echo "row1";?>">
<td align="right"><b>Golf Price</b></td>
<td id="pricediv"><input type="text" name="sold_tour_price_auto" id="sold_tour_price_auto" size="8" class="bestupper"
value="0.00" onkeypress="return OnlyDigits(event,'.');" onblur="OnlyDigits(event,false)"> EUR
</td>
</tr>
</tbody>
</table>
</form>
<!-- OTHER CODES ... -->
ajax_price.php Code:
<?php
$tid = intval(#$_GET['tid']);
$p = intval(#$_GET['p']);
$p2 = intval(#$_GET['p2']);
$v = intval(#$_GET['v']);
$sql = "SELECT * FROM transfer_type WHERE transfer_id='".$tid."'";
$s = mysql_query($sql);
$ks = mysql_num_rows($s);
if ($ks > 0) {
$k = mysql_fetch_assoc($s);
$pprice = floatval($k['golf_price']);
if ($tid == 4) {
$price_pax = $p + $p2;
$price = ($price_pax * $pprice) + ($price_pax * 7);
}
else {
$price = ($pprice * $p) + ($pprice * $p2);
}
if ($v == 1) { echo $price.';'.$pprice.';'.$pprice; }
else { echo $price; }
?><?PHP
}
else {
if ($v == 1) { ?>0;0;0<?PHP }
else { ?>0<?PHP }
}
?>
I'm not too sure but I can't see where you are using the function refreshforprice() in your form, I have done similar using the function in a onchange in a <select> box.
eg <select id="something" name="something" onchange"function();">
I have some dropdown menus. If I select one of them I want to change the other's content with something that is reliable with what i selected. How can I do that ? With html and php.
For example I have one table
Year with id_year and year
Stuff with id_stuf and stuff
If I select an year in the first dropdown menu , in the other drodown menu will show only the stuff from that year .
This is my content with the dropdown menus
<div class="view">
<form name="tabel" method="post" action="insertexamen.php">
<table>
<tr>
<td>Data</td>
<td><input type="date" name="data" value="data" required="required"/><br></td>
</tr>
<tr>
<td>An</td>
<td>
<?php
$sql_year="SELECT * FROM an";
$rez_year = mysqli_query($link,$sql_year);
echo "<select name=\"year\" >";
while($year=mysqli_fetch_array($rez_year))
{
echo "<option value=\"".$year['id_an']."\">".$year['grupa']."</option>";
}
echo "</select>";
?><br>
</td>
</tr>
<tr>
<td>Materie</td>
<td>
<?php
$sql_mat="SELECT * FROM materii";
$rez_mat = mysqli_query($link,$sql_mat);
echo "<select name=\"mat\" >";
while($mat=mysqli_fetch_array($rez_mat))
{
echo "<option value=\"".$mat['id_mat']."\">".$mat['numemat']."</option>";
}
echo "</select>";
?><br>
</td>
</tr>
<tr>
<td>Profesor</td>
<td>
<?php
$sql_proff="SELECT * FROM profesor";
$rez_proff = mysqli_query($link,$sql_proff);
echo "<select name=\"proff\" >";
while($proff=mysqli_fetch_array($rez_proff))
{
echo "<option value=\"".$proff['id_prof']."\">".$proff['numep']." ".$proff['prenumep']."</option>";
}
echo "</select>";
?><br>
</td>
</tr>
<tr>
<td>Asistent</td>
<td>
<?php
$sql_profff="SELECT * FROM profesor";
$rez_profff = mysqli_query($link,$sql_profff);
echo "<select name=\"profff\" >";
while($profff=mysqli_fetch_array($rez_profff))
{
echo "<option value=\"".$profff['id_prof']."\">".$profff['numep']." ".$profff['prenumep']."</option>";
}
echo "</select>";
?><br>
</td>
</tr>
<tr>
<td>Sala</td>
<td>
<?php
$sql_room="SELECT * FROM sala";
$rez_room= mysqli_query($link,$sql_room);
echo "<select name=\"room\" >";
while($room=mysqli_fetch_array($rez_room))
{
echo "<option value=\"".$room['id_s']."\">".$room['salaa']."</option>";
}
echo "</select>";
?><br>
</td>
</tr>
<tr>
<td>Tip</td>
<td>
<?php
$sql_type="SELECT * FROM examen";
$rez_type= mysqli_query($link,$sql_type);
echo "<select name=\"type\" >";
while($type=mysqli_fetch_array($rez_type))
{
echo "<option value=\"".$type['id_tip']."\">".$type['tip']."</option>";
}
echo "</select>";
?><br>
</td>
</tr>
<tr>
<td><input name="submit" type="submit" value="Trimite"/></td>
<td><input name="reset" type="reset" value="Reset"/></td>
</tr>
</table>
Are you looking for something like that:
<html>
<title>dropdownlist</title>
<head>
<script language="Javascript" type="text/javascript" >
function choix(formulaire)
{
var j;
var i = form1.boite1.selectedIndex;
if (i == 0)
for(j = 1; j <3; j++)
form1.boite2.options[j].text="";
else{
switch (i){
case 1 : var text = new Array( "London","Manchester","Birmingham");
break;
case 2 : var text = new Array("Paris","Marseille","Lyon");
break;
case 3 : var text = new Array("Berlin","Munich","Francfort");
break;
}
for(j = 0; j<3; j++)
form1.boite2.options[j+1].text=text[j];
}
form1.boite2.selectedIndex=0;
}
</script>
</head>
<body>
<form name="form1">
<select name="boite1" onChange="choix(this.form)">
<option selected>country</option>
<option>England</option>
<option>France</option>
<option>Germany</option>
</select>
<select name="boite2">
<option selected>cities</option>
<option></option>
<option></option>
<option></option>
</form>
</select>
</body>
</html>
if you want absolutely to do it using only html and php you will need to use some ajax because php is serverside and html is slient side. so for what you asy I would recommend the code above
I am trying to develop just like a following siteenter link description here
Here when the user tries to purchase many items, his cart is displayed.And he can try to change the quantity of any item.When he changes the quantity of an item,the corresponding price of that item has to change automatically.It is done using jquery. I will provide my code here.
foreach( $_SESSION['r'] as $key=>$ar):
$cnt++;
?> <tr>
<td align="center"><?php echo $ar['Name']?></td>
<td align="center"><?php echo $ar['Price']?></td>
<td align="center"> // Quantity is given as dropdownlist.Each list has seperate select id that is generated dynamivally.such as qty1,qty2,etc.
<select class="myclass" name="qty" id='qty<?php echo $cnt;?>' onChange="get_price(this.value,<?php echo $ar['Price']?>,<?php echo $cnt;?>)">
<?php for ($i=1; $i<=100; $i++) {
$y="";
if( $i==$_SESSION['r'][$key]['Quantity']){
$y="selected";
}
echo "<option ";
echo "value=\"$i\" ".$y.">", $i, "</option>\n";
} ?>
</select>
</td>
<?php $x=$x+$ar['Quantity']; ?>
<td name="price"><span id="priceDisplay<?php echo $cnt;?>"><?php echo $ar['Total']; ?></span></td>
<input type='hidden' name='id' id="pid" value='<?php echo $ar['Id']; ?>'>
<input type='hidden' name='price' id="pprice" value='<?php echo $ar['Price'] ?>' class="input">
The next code is my jquery code
function get_price(val,price,cnt){
var price1 = val * price;
document.write(('<span id="priceDisplay"+cnt></span>\n'));
Here I am calculating the price when the quantity changes.But my problem is that I don't know how to display the calculated price in the appropriate column. variable cnt is the row id passed from php. Please help me.
<?php
session_start();
include('head.php');
?>
<!DOCTYPE HTML>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function get_price(val,price,cnt)
{
var price1 = val * price;
$("#priceDisplay"+cnt).html(price1);
</script>
<?php
if(empty($_SESSION['items'])){ ?>
<center><b><font color="red">There are no products in your cart!!</font> </b></center>
<?php
}
else
{
?>
<b><center><font color="green"> Your Shopping Cart!!</font></center> </b><br><br>
<form name="formview" action="ajaxview.php" method="post">
<?php $count=0; ?>
<table align="center" width="50%" cellpadding="1px" cellspacing="3px" border="1" bgcolor="lightblue">
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
<th>Remove</th>
</tr>
<?php
foreach( $_SESSION['r'] as $key=>$ar):
$cnt++;
?> <tr>
<td align="center"><?php echo $ar['Name']?></td>
<td align="center"><?php echo $ar['Price']?></td>
<td align="center">
<select class="myclass" name="qty" id='qty<?php echo $cnt;?>' onChange=get_price(this.value,<?php echo $ar['Price']?>,<?php echo $cnt;?>,) >
<?php for ($i=1; $i<=100; $i++) {
$y="";
if( $i==$_SESSION['r'][$key]['Quantity']){
$y="selected";
}
echo "<option ";
echo "value=\"$i\" ".$y.">", $i, "</option>\n";
} ?>
</select>
</td>
<?php $x=$x+$ar['Quantity']; ?>
<td name="price"><span id="priceDisplay<?php echo $cnt;?>"><?php echo $ar['Total']; ?></span></td>
<input type='hidden' name='id' id="pid" value='<?php echo $ar['Id']; ?>'>
<input type='hidden' name='price' id="pprice" value='<?php echo $ar['Price'] ?>' class="input">
<td><input type='checkbox' name='remove' value='Remove' onCheck="$(this).closest('tr').remove();">
<?php $tt[]=$ar['Total'];?>
</tr>
<?php
endforeach;
?>
</table>
</form>
<!--<table align="right">-->
<?php foreach($tt as $t)
{
$count=$count+$t;
}
?>
<br>
<br>
<b><center><div class="total"> Total:<span id="tot"><?php echo $count; ?></span></div></center></b>
<b><div class="cart">Your Cart:<span class="ycart"><?php echo $x; ?></span> </div></b>
Hope it helps,
function get_price(val,price,cnt){
var price1 = val * price;
document.getElementById('priceDisplay'+cnt).innerHTML =price1;
//$('#priceDisplay'+cnt).html(price1); //jquery
}
Using Jquery to acheive this,
$(document).ready(function() {
$(".myclass").change(function(){
var identifier = $(this).attr('id');
var Qty = $(this).val();
var Price = $("#price_"+identifier).val();//price value
var Total = Qty * Price;
$("#priceDisplay_"+identifier).html(Total);
GrandTotal();
});
GrandTotal();
});
function GrandTotal(){
var GrandTotal=0;
$(".myclass").each(function(){
var identifier = $(this).attr('id');
var Qty = $(this).val();
var Price = $("#price_"+identifier).val();//price value
var Total = Qty * Price;
GrandTotal += Total;
$("#priceDisplay_"+identifier).html(Total);
});
$("#GrandTotal").html(GrandTotal);
}
function RemoveCart(ob){
var IdForRemove =ob.value;
$.ajax({
type: "POST",
url: "RemoveCart.php",
dataType:'json',
data: { id: IdForRemove}
})
.done(function( data ) {
$("#GrandTotal").html(data.Grandtotal);
$("#"+IdForRemove).remove();
});
return false;
}
<table>
<?php
$cnt =0;
// session_start();
// $_SESSION['r'] = array('0'=>array('Name'=>'test 1','Price'=>'50.5','Id'=>'1', 'Quantity'=>'3'), '1'=>array('Name'=>'test 2','Price'=>'100','Id'=>'2', 'Quantity'=>'4'), '2'=>array('Name'=>'test 3','Price'=>'150','Id'=>'3', 'Quantity'=>'5'));
$CartR = $_SESSION['r'];
foreach($CartR as $key=>$ar):
$Identifier = 'qty_'.$cnt;
?>
<tr id="<?php echo $ar['Id']; ?>">
<td align="center"><?php echo $ar['Name']?></td>
<td align="center"><?php echo $ar['Price']?></td>
<td align="center"> // Quantity is given as dropdownlist.Each list has seperate select id that is generated dynamivally.such as qty1,qty2,etc.
<select class="myclass" name="qty" id='<?php echo $Identifier;?>' >
<?php for ($i=1; $i<=100; $i++) {
$y="";
if( $i==$ar['Quantity']){
$y='selected="selected"';
}
echo "<option value='".$i."' $y> $i</option>\n";
} ?>
</select>
</td>
<?php $x=$x+$ar['Quantity']; ?>
<td name="price"><span id="priceDisplay_<?php echo $Identifier;?>"><?php echo $ar['Total']; ?></span></td>
<input type='hidden' name='id' id="pid_<?php echo $Identifier;?>" value='<?php echo $ar['Id']; ?>'>
<input type='hidden' name='price' id="price_<?php echo $Identifier;?>" value='<?php echo $ar['Price'] ?>' class="input">
<td><input type="checkbox" onclick="RemoveCart(this)" value="<?php echo $ar['Id']; ?>"> Remove
</tr>
<?php $cnt++; endforeach; ?>
</table>
Grand Total: <div id="GrandTotal"></div>
Create new file "RemoveCart.php" and below lines into that page,
<?php session_start();
if(isset($_POST['id'])){
$toBeRemove =$_POST['id'];
$CartR =$_SESSION['r'];
foreach($CartR as $key=>$Cart){
if($Cart['Id']==$toBeRemove){
unset($_SESSION['r'][$key]);
}
}
$CartR = $_SESSION['r'];
$Grandtotal =0;
foreach($CartR as $key=>$Cart){
$Grandtotal += $Cart['Quantity'] * $Cart['Price'];
}
echo json_encode(array('Grandtotal'=> "$Grandtotal"));
}
?>
Replace this:
document.write(('<span id="priceDisplay"+cnt></span>\n'));
With this:
document.getElementById("priceDisplay"+cnt).innerHTML=price1;
Using Jquery:
$("#priceDisplay"+cnt).html(price1);
You want it in jquery. Use
$("#id").html("hello World");
Change the id to the id you want to use. And the text as well
When a user select the name using drop down list,the stock and price text field should automatically be filled.But it wont.
This is the code
<form action="insertout.php" method="post">
<center>
<table>
<tr>
<td width="116">Medicine name</td>
<td width="221">
<center>:
<select name="name" id="name">
<option>--- Choose Medicine ---</option>
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("arie");
$sql = mysql_query("SELECT * FROM tabelmedicine ORDER BY name ASC ");
if(mysql_num_rows($sql) != 0){
while($row = mysql_fetch_assoc($sql)){
echo '<option value="'.$row['price'].' && '.$row['price'].'">'.$row['name'].'</option>';
}
}
?>
</select >
</center>
</p>
</td>
</tr>
<tr>
<td>
<p>Price</p>
</td>
<td>
<p align="center">:<input type="text" name="price" id="price"value="<?php echo ('priceperunit'); ?>" onClick="checkprice()">
</p>
</td>
</tr>
<tr>
<td>
<p>Stock</p>
</td>
<td>
<p align="center">:<input type="text" name="stock" id="stock"value="<?php echo ('stock'); ?>" onClick="checkprice()">
</p>
</td>
</tr>
<script>
var select = document.getElementById('name');
var input = document.getElementById('price');
var input = document.getElementById('stock');
select.onchange = function(){
input.value = select.value;
}
</script>
i hope u guys can help.i've spent a week just to figured out the code.
Try this below code, below are some notes
Avoid using the Keywords like "name" in select box
Price and Stock Input element attribute are does not have spaced properly.
Avoid using Mysql_connect and start use PDO / MySQLi
Avoid presentational tags and start use css to acheive it like "text-align:center"
Currently its working as you expected without Ajax and its a quick workaround, I have added the value in a comma separated the both value by split function.
<form action="insertout.php" method="post">
<center>
<table>
<tr>
<td width="116">Medicine name</td>
<td width="221">
<center>:
<select name="name" id="name">
<option>--- Choose Medicine ---</option>
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("arie");
$sql = mysql_query("SELECT * FROM tabelmedicine ORDER BY name ASC ");
if(mysql_num_rows($sql) != 0){
while($row = mysql_fetch_assoc($sql)){
// echo '<option value="'.$row['price'].' && '.$row['price'].'">'.$row['name'].'</option>';
$option_value = $row['price'] . ',' . $row['stock'];
echo '<option value="'.$option_value.'">'.$row['name'].'</option>';
}
}
?>
</select >
</center>
</p>
</td>
</tr>
<tr>
<td>
<p>Price</p>
</td>
<td>
<p align="center">:<input type="text" name="price" id="price"value="<?php echo ('priceperunit'); ?>" onClick="checkprice()">
</p>
</td>
</tr>
<tr>
<td>
<p>Stock</p>
</td>
<td>
<p align="center">:<input type="text" name="stock" id="stock"value="<?php echo ('stock'); ?>" onClick="checkprice()">
</p>
</td>
</tr>
<script>
var select = document.getElementById('name');
//var input = document.getElementById('price');
//var input = document.getElementById('stock');
var price = document.getElementById('price');
var stock = document.getElementById('stock');
select.onchange = function(){
// input.value = select.value;
var price_stock = select.value.split(',');
price.value = price_stock[0];
stock.value = price_stock[1];
}
</script>
How about this.......
Main File
<?php
$medOptions = "";
mysql_connect( "localhost", "root", "");
mysql_select_db( "arie");
$sql = mysql_query( "SELECT * FROM tabelmedicine ORDER BY name ASC ");
if(mysql_num_rows($sql) !=0 ) {
while($row = mysql_fetch_assoc($sql)) {
$medOptions .= '<option value="' . $row['id'] . '">' . $row['name'] . '</option>\n';
}
}
?>
<form>
<table>
<tr>
<td class="label" width="55%">Medicine name</td>
<td width="45%">
<select name="med" id="med">
<option disabled="true" selected="true">--- Choose Medicine ---</option>
<?=$medOptions;?>
</select>
</td>
</tr>
<tr>
<td class="label">Price</td>
<td><input type="text" id="price" readonly="true" /></td>
</tr>
<tr>
<td class="label">Stock</td>
<td><input type="text" id="stock" readonly="true" /></td>
</tr>
</table>
CSS
table {
margin: 0 auto;
}
td {
text-align:center;
}
.label {
font-weight:bold;
}
Javascript
var select = document.getElementById('med');
// INSERT AJAX ROUTINE TO RETRIEVE PRICE AND STOCK LEVEL
var medPrice = document.getElementById('price');
var medStock = document.getElementById('stock');
select.onchange = function () {
medPrice.value = response.price;
medStock.value = response.stock;
};
I am currently working on an application based on JavaScript and PHP. In my app, I have a table and a textbox - when I enter data in the textbox, the table should show the particular value that I typed. My current implementation does not work as I am not sure how to complete the search component - can anyone help?
<table name="tablecheck" class="DataTable" id="results" >
<thead>
<tr ><th> </th>
<th> </th>
<th><center><b>COURSE CODE</b></center></th>
<th><center>COURSE NAME</center></th></tr>
</thead>
<?php if(isset($records)) : foreach ($records as $row) : ?>
<tbody>
<tr id="rowUpdate" class="TableHeaderFooter">
<td>
<?php echo anchor('coursemaster_site/delete/'.$row->id, 'Delete',array('onClick'=>"return confirm('ARE YOU WANT TO DELETE..?')")); ?>
</td>
<td>
<input type=checkbox name="editcustomer[] " id="editcustomer[]" value="<?php echo $row->id ?>" >
</td>
<td >
<input class="inputwide span2 " type="text" onblur="upper(this)" name="course_code_<?php echo $row->id ?>" id=" course_code_<?php echo $row->id ?>" value="<?php echo $row->course_code ; ?> " >
</td>
<td>
<input class="inputmedium span2" type="text" name="course_name_<?php echo $row->id ?>" id="course_name_<?php echo $row->id ?>" value="<?php echo $row->course_name ; ?>" >
</td>
</tr>
</tbody>
<?php endforeach ; ?>
<?php endif ; ?>
</table>
<form action="#" method="get" onSubmit="return false;">
<label for="q">Search Here:</label><input type="text" size="30" name="q" id="q" value="" onKeyUp="doSearch();" />
</form>
<script>
function doSearch() {
var rowContainsSearchTerm, fullname;
var q = document.getElementById("q");
var v = q.value.toLowerCase();
var rows = document.getElementsByTagName("tr");
var searchTermMoreThanTwoCharsLong = v.length > 2;
for ( var i = 1; i < rows.length; i++ ) {
fullname = concatInputValues(rows[i].getElementsByTagName("input"));
if (fullname) {
rowContainsSearchTerm = fullname.indexOf(v) > -1;
if (searchTermMoreThanTwoCharsLong && rowContainsSearchTerm) {
rows[i].style.backgroundColor = "#00F";
} else {
rows[i].style.backgroundColor = "";
}
}
}
}
function concatInputValues(inputs){
var inputContents = "";
for (var j = 0; j < inputs.length; j++) {
inputContents = inputContents + inputs[j].value;
}
return inputContents;
}
</script>
Have you considered using JQuery DataTables? The plugin has a really nice table view as well as automatically enabled search textbox, and should fit in easily with your JavaScript/PHP solution.
See example table below: