Basically, I have a table with two column: 'Kode Barang' (Item ID) and 'Nama Barang' (Name of Item). The first column is a dropdown option which it's data get populated dynamically from another table. If a user select an Item ID, then the second column will automatically show the name of the item.
Let's say that I've only two row as this code below:
<HTML>
<table id="theTable" border="1">
<thead>
<tr>
<th> Kode Barang </th>
<th> Nama Barang </th>
<tr>
</thead>
<tbody>
<tr>
<td type="text" name="kode_barang" id="kode_barang"/readonly>
<?php
mysql_connect("localhost","root","");
mysql_select_db("skripsi_1");
$result = mysql_query("select * from input_data_barang");
$jsArray = "var kode_barang = new Array();\n";
echo '<select name="kode_barang" onchange="changeValue(this.value)">';
echo '<option></option>';
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row['kode_barang'] . '">' . $row['kode_barang'] . '</option>';
$jsArray .= "kode_barang['" . $row['kode_barang'] . "'] = {name:'" . addslashes($row['nama_barang']) . "',desc:'".addslashes($row['nama_barang'])."'};\n";
}
echo '</select>';
?>
</td>
<td><input type="text" name="nama_barang" id="nama_barang"/readonly>
<script type="text/javascript">
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('kode_barang').value = kode_barang[id].name;
document.getElementById('nama_barang').value = kode_barang[id].desc;
};
</script>
</td>
</tr>
<tr>
<td type="text" name="kode_barang" id="kode_barang"/readonly>
<?php
mysql_connect("localhost","root","");
mysql_select_db("skripsi_1");
$result = mysql_query("select * from input_data_barang");
$jsArray = "var kode_barang = new Array();\n";
echo '<select name="kode_barang" onchange="changeValue(this.value)">';
echo '<option></option>';
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row['kode_barang'] . '">' . $row['kode_barang'] . '</option>';
$jsArray .= "kode_barang['" . $row['kode_barang'] . "'] = {name:'" . addslashes($row['nama_barang']) . "',desc:'".addslashes($row['nama_barang'])."'};\n";
}
echo '</select>';
?>
</td>
<td><input type="text" name="nama_barang" id="nama_barang"/readonly>
<script type="text/javascript">
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('kode_barang').value = kode_barang[id].name;
document.getElementById('nama_barang').value = kode_barang[id].desc;
};
</script>
</td>
</tr>
</table>
</HTML>
The first row works perfectly. The problem is in the second row. If I select an option from the dropdown, then name of the item doesn't appear in the second row, but appear in the first row instead. Would anybody please show me how to fix this? Thank you.
You are appending your values using:
document.getElementById('kode_barang').value = kode_barang[id].name;
document.getElementById('nama_barang').value = kode_barang[id].desc;
The problem is, that there is an Element with the ID kode_barang/nama_barang in BOTH rows. So you have 2 Elements for the ID's. Javascript appereantly just decides only to take the first one. Just rename them in the second row to "kode_barang2" and "nama_barang2" and when setting the values change the names too:
document.getElementById('kode_barang2').value = kode_barang[id].name;
document.getElementById('nama_barang2').value = kode_barang[id].desc;
Related
I'm making something for a stocktake.
I have a form that generates with 4 fields. item_code, item_name, packing, quantity
<form action="goods.php" method="post">
<table>
<!-- Headers -->
<tr>
<td><b>Item Code</b></td>
<td><b>Description</b></td>
<td><b>Packing</b></td>
<td><b>Quantity</b></td>
</tr>
<?php
for ($i = 0; $i <= 50; $i++) {
?>
<tr>
<td>
<INPUT TYPE="TEXT" NAME="item_code[<?php echo $i; ?>]" SIZE="6" VALUE="
<?php
if (!empty($_POST["item_code"][($i)])) {
echo $_POST["item_code"][($i)];
}
?>"></td>
<td><?php
if (!empty($_POST["item_code"][($i)])) {
$result = FetchData($_POST["item_code"][($i)]);
echo $result['category'];
}
?>
</td>
<td>
<?php
if (!empty($_POST["item_code"][($i)])) {
echo $result['item_name'];
}
?></td>
<td>
<?php
if (!empty($_POST["item_code"][($i)])) {
echo $result['packing'];
}
?></td>
<td><INPUT TYPE="TEXT" NAME="quantity[<?php echo $i; ?>]" SIZE="5" VALUE="
<?php
if (!empty($_POST["quantity"][($i)])) {
echo $_POST["quantity"][($i)];
} else {
echo "";
}
?>"></td>
A js function for the button
<script>
function fillForm(value) {
document.getElementById('value').innerHTML = value;
}
</script>
and a list that is generated with 3 fields. item_code, item_name, packing
<?php
$dbh = dbh_get();
$sql = 'SELECT * FROM goods as goods(item_code, sort) order by human_sort(goods.item_code)';
$v = array();
$stmt = $dbh->prepare($sql);
$stmt->execute();
while (true) {
$r = $stmt->fetch();
if (is_bool($r)) break;
print '
<tr>
<td class="buttonL" id="<php ' . $r['item_code'] . ' ?>" onclick="fillForm()">' . $r['item_code'] . '</td>
<td>' . $r['item_name'] . '</td>
<td>' . $r['packing'] . '</td>
</tr>' . "\n";
}
dbh_free($dbh);
?>
}
I want to put a button on each list row and when it's clicked it populates the first three fields in the form, leaving quantity to be filled out. Then when another is clicked it populates the next form row etc,. It's working fine manually entering from the list, but the list is nearly 5000 items so it's a hassle to keep searching then scrolling up and entering the values.
I don't see how to do this with PHP so I assume I need a javascript function, which is where I'm lost. Let me know if you need more info.
I have an SQL-database with many tables. Now I would like to create an input-form to be able to get data into the db without writing the entire sql-code every time. And this should work as follows:
All table names are listed in a drop-down menu. After having selected a table name, a new table with 4 columns is created automatically:
The first column of this table simply contains an increasing number.
The second column contains the field-names of the selected table.
In the third column there are empty input fields to enter the values for the database. Only in the third line (=product name) there is a drop-down menu with all product names from the main-table of the db.
The fourth column contains the data type (e.g. int or varchar)
All tables in the database have the same structure in the first 3 columns: the first column contains the table-id, the second column the foreign-key (=master_id) and the third column the product_name.
Up to this point, the script works well with the following 2 php-files (javasql.php and getuser.php):
javasql.php:
enter code here
<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="" class="optdrugs">please select</option>
<?php
include("files/zugriff.inc.php"); // database Access
$sql = "SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE
TABLE_TYPE = 'BASE TABLE' AND TABLE_SCHEMA = 'product'";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_assoc($result)) {
echo '<option class="optdrugs" value="'. $row['TABLE_NAME'] . '">' .
$row['TABLE_NAME']. '</option>';
echo '<br>';
}
?>
</select>
</form>
<br>
<div id="txtHint"><b>Bitte Tabelle auswählen:</b>
<br>
<?php
if (isset($_POST["submit"])) {
$sent = $_POST['sent'];
$q = $_POST['tablename'];
$column_passed = unserialize($_POST['column']); // content of array
$column is passed from getuser.php
foreach ($_POST["insertvalue"] as $key => $value) {
echo $value . "<br>";
$werte[] = "'$value'";
}
$sql="INSERT INTO $q ($column_passed) VALUES (" .
implode(", ", $werte) . ")"; // data entry
mysqli_query($db, $sql);
if (mysqli_affected_rows($db) > 0) {
echo "<h3 style='color:blue'>successful</h3>";
} else {
echo "<h3 style='color:red'>not
successful</h3>";
}
}
?>
</div>
</body>
</html>
enter code here
getuser.php:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<form id="formdatabase" name="formdatabase" action="javasql.php"
method="post">
<input type="hidden" name="sent" value="yes">
<?php
$q = strval($_GET['q']);
$con = mysqli_connect('localhost','root','','product');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM $q";
$result = mysqli_query($con,$sql);
$numcols = mysqli_num_fields($result); // gets number of columns in result table
$field = mysqli_fetch_fields($result); // gets the column names from the result table
$data_type_array = array(
1=>'tinyint',
2=>'smallint',
3=>'int',
4=>'float',
5=>'double',
7=>'timestamp',
8=>'bigint',
9=>'mediumint',
10=>'date',
11=>'time',
12=>'datetime',
13=>'year',
16=>'bit',
252=>'text',
253=>'varchar',
254=>'char',
246=>'decimal'
);
$data_type_array = array_flip($data_type_array);
echo "<table>";
echo "<tr>";
echo "<th>" . 'Nr' . "</th><th>" . 'Column names' . "</th>
<th>" . 'Values for db-entry' . "</th><th>" . 'Type' . "</th>";
echo "</tr>";
echo "<tr>";
$nr = 1;
for($x=0;$x<$numcols;$x++):?>
<td><?= $nr; ?></td>
<td><?= $field[$x]->name; ?></td>
<?= $column[] = $field[$x]->name; ?>
<td>
<?php
if ($field[$x]->name == 'Name') { // if-Beginn
?>
<select name="insertvalue[<?= $x; ?>]" id="insertvalue<?=
$x; ?>" size="1" onchange = "javascript:getSelectedRow()">
<?php
include("files/zugriff.inc.php");
$sql = "SELECT * FROM product_main ORDER BY Name";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_assoc($result)) {
echo '<option class="optdrugs" value='. $row['Name'] . '>' .
$row['Name'] . '</option>';
echo '<br>';
}
?>
</select>
<?php
$name_option = "";
} else {
$name_option = "<input type='text' id='insertvalue" . $x . "'
name='insertvalue[" . $x . "]' size='50'>";
echo $name_option;
}
?>
</td>
<?php
$key = array_search($field[$x]->type, $data_type_array);
if($key !== false){
echo "<td>" . $key . "</td>";
}else{
echo "<td>" . $field[$x]->type . "</td>";
}
?>
<td><?= $field[$x]->type; ?></td>
<?= $nr = $nr + 1; ?>
</tr>
<?php endfor;
echo "</table>";
mysqli_close($con);
?>
<input type="hidden" name="tablename" value="<?= $q; ?>">
<input type="hidden" name="column" value="<?php echo htmlentities
(serialize($column)); ?>">
<input type="submit" value="Enter values" name="submit">
</form>
</body>
</html>
Since I need the master_id (= foreign key) in addition to the product-name for database entry, I would like to extend my script, so that the respective master_id is automatically sent to the input field in line 2, when a product-name is selected in line 3 ... without clicking a button. I tried to do this with javascript but it didn´t work. As far as I know, the solution would be to use AJAX but unfortunately, I am not very used to AJAX.
I would be more than happy, if someone could help me to solve this problem!
I would like to create a master - detail in php and javascript with two tables:
The First table is loaded from a database and it contains some categories.
When i click on a row in the first table I would like to view in a second table all subcategories of a selected category.
I have try with this but I'm not able to create the query for the subcategories table.
<div class="uk-grid">
<!-- First Table - List of Categories -->
<div class="uk-width-1-2" id="Gruppi" >
<div class="uk-panel uk-panel-box">
<h2>Gruppi</h2>
<?php
// Connessione al db
$con = mysqli_connect('localhost','root','','conti');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT Gruppo, Tipo FROM gruppi";
$result = mysqli_query($con,$sql);
echo "<section class=\"wrapper style5\">
<table id=\"table_gruppi\" class=\"uk-table uk-table-hover uk-table-striped uk-table-condensed\" > <thead> <tr>
<th>Gruppo</th>
<th>Entrata</th>
</tr>
</thead>
<tbody>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['Gruppo'] . "</td>";
// Checkbox al posto di 1 o 0
if ($row["Tipo"]=='1') {
echo "<td> <input checked=\"\" type=\"checkbox\" disabled> </input> </td>";
} elseif ($row["Tipo"]=='0') {
echo "<td> <input type=\"checkbox\" disabled> </input> </td>";
}
echo "</tr>";
}
echo "</table></section>";
mysqli_close($con);
?>
</div>
</div>
<!-- Second Table - List of Subcategories -->
<div class="uk-width-1-2"><div class="uk-panel uk-panel-box"><h2>Sottogruppi</h2>
<p id="click-response"></p>
<?php
// Connessione al db
$con = mysqli_connect('localhost','root','','conti');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT Sottogruppo FROM sottogruppi WHERE Gruppo = ";
$result = mysqli_query($con,$sql);
echo "<section class=\"wrapper style5\">
<table id=\"table_gruppi\" class=\"uk-table uk-table-hover uk-table-striped uk-table-condensed\" > <thead> <tr>
<th>Sottogruppo</th>
</tr>
</thead>
<tbody>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['Sottogruppo'] . "</td>";
echo "</tr>";
}
echo "</table></section>";
mysqli_close($con);
?>
</div></div>
<script type="text/javascript">
function onRowClick(tableId, callback) {
var table = document.getElementById(tableId),
rows = table.getElementsByTagName("tr"),
i;
for (i = 0; i < rows.length; i++) {
table.rows[i].onclick = function (row) {
return function () {
callback(row);
};
}(table.rows[i]);
}
};
onRowClick("table_gruppi", function (row){
var value = row.getElementsByTagName("td")[0].innerHTML;
document.getElementById('click-response').innerHTML = value + " clicked!";
console.log("value>>", value);
var sql_sottogruppi = "SELECT Sottogruppo FROM sottogruppi WHERE Gruppo = '" + value + "'"
});
</script>
I need some help or example.
thank you so much!
My code retrieves some values from database and displays in a table. Before each row I am placing a checkbox such that when it is checked that value can be stored in database. Each row contains four columns. It may retrieve several rows. If I select few rows then these rows should be store into database.
<table border='0' align="center">
<tr class="db_table_tr3" >
<th class="db_table_th3" > </th>
<th class="db_table_th3" >Course Code</th>
<th class="db_table_th3" >Course Name</th>
<th class="db_table_th3" >Instructor</th>
<th class="db_table_th3" >Credit</th>
</tr>
<?php
$query = "select *from course_details WHERE branch='$branch' AND sem='$sem'";
$run = mysql_query($query) or die($query."<br/><br/>".mysql_error());
$num = mysql_numrows($run);
while($row = mysql_fetch_assoc($run)){
echo "<tr >";
echo '<td><input type="checkbox" name="ticked[]" value="' . $row['course_codes'] . '"></td>';
// echo "<td>" . $row['usn'] . "</a>" . "</td>";
echo "<td>" . $row['course_codes'] . " </td>";
echo "<td>" . $row['course_names'] . " </td>";
echo "<td>" . $row['course_instructors'] . " </td>";
echo "<td>" . $row['course_credits'] . " </td>";
}
echo "</tr>";
now i want to store the first column as follows
$ch1=$_POST['ticked'];
if(isset($_POST['submit'])){
for($i=0; $i<sizeof(ch1); $i++){
here is the query
}
}
does the above code is correct. how to store values of all columns in different tables.
Instead of putting a value for 'course_codes' in checkbox use 'course_details' table primary key. So you can retrieve data according to the primary key on a post page and insert a record as per your requirement. Secondly you can make an array of hidden variables and do the insertion part
I'm retrieving data from mysql like this structure =>
echo "<table id='postI" . $chat_row['id'] . "'>";
echo "<tr>";
echo "<td><p class='post_author'>" . $chat_row['user_name'] . "</p><a href='javascript: void(0)' class='edit_post_a'><div class='edit_post'></div></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><p class='posted_on'>" . $chat_row['posted_on'] . "</p></td>";
echo "</tr>";
echo "<tr>";
echo "<td><br></td>";
echo "</tr>";
echo "<tr>";
echo "<td><p class='posted_msg'>" . $chat_row['message'] . "</p></td>";
echo "</tr>";
echo "</table>";
and I can get the table id with this expression =>
$(".edit_post_a").bind("click",function(){
var tb_id = $(this).closest("table").attr("id"); // works , gets the id of the table
alert($(tb_id + ".posted_msg").text()); // don't work, gets nothing , just alert box
});
My problem is that want to know text of the third p, what I've tried =>
alert($("#" +tb_id + ".posted_msg").text());
alert($("#" +tb_id).find("p").last().text());
alert($("#" +tb_id + " p:nth-child(3)").text());
nothing works , get empty alert box , I've no idea whats wrong ? how can I fix it ? thanks
HTML code =>
<table id='postI245'>
<tr>
<td><p class='post_author'>USER</p><a href='javascript: void(0)' class='edit_post_a'><div class='edit_post'></div></a>
</td>
</tr>
<tr>
<td><p class='posted_on'>DATE</p></td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td><p class='posted_msg'>MSG</p></td>
</tr>
</table>
and so on ...
Your selector selects nothing, you should add # for selecting an element by id.
var txt = $('#'+tb_id + " .posted_msg").text();
or:
var txt = $(this).closest("table").find("p:eq(2)").text()