We Keep Coding

Populate text input field automatically based on dropdown selection mysqli

I've created a dropdown list that is populated by data from my mysql db and programmed using php. What I need to do is populate a text field based on the selection made in the dropdown. Unfortunately, my question differs from the others asked on this forum because most are simply typing all of their options into a html form. Mine are contained within a table and I do not want to save the content in the text field to my database...it will be used for user reference only.
I've read a plethora of forum posts on this site and numerous others and have tried using jquery, javascript, and ajax scripts, but for some reason the only thing I've been successful in getting to appear in the text field is the id of the corresponding item selected from the dropdown list. I think it is important to know that both fields come from the same table in the db, so I can't figure out why it is so difficult to automatically populate the field. I would like to use javascript because I want everything in this one file.
This is the code in the php form:
<?php
'<div id="trxdetailstable">';
echo '<table align="center" width="750px" cellspacing="0" border=".5px" ! important><tr>
<th>Movie Title</th><th>Category</th><th>Price</th></tr>';
echo '<td align="left" width="8%" height="25px">';
$ddlquery4 = "SELECT id, title, categoryname FROM dvd ORDER BY title ASC";
$ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");
echo '<select class="dropdown" name="dvdid" id="dvdid" size="1" onchange="updatecat()">';
while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){
$categoryname = $ddlrow4['categoryname'];
echo "<option data-categoryname='' value='".$ddlrow4['id']."'>" . $ddlrow4['title'] . "</option>";
} //End while statement
echo "</select>";
echo '</a></td>';
echo '<td align="left" width="10%">';
echo '<input required id="categoryname" name="categoryname" type="text" readonly="readonly">';
echo '</a></td>';
This is the code I currently have in the html head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is the code that is currently generating no results (text field is left blank after a dropdown item is selected):
$('#dvdid').change(function(e){
var optionChange = $('#dvdid option:selected').text();
$('#categoryname').val(optionChange);
});
</script>
And this is the code that actually gave me the primary key (id) for the item selected in the dropdown list (I want it to be the categoryname):
<script>
function updatecat(id){
if (id === "") {
$("input[name=categoryname]").val("");
} else {
$("input[name=categoryname]").val(id);
}
}
</script>
I have about 3 other scripts I've tried, but they all left the text (category) field blank.
Any advice would be appreciated. Please keep in mind all of my data is generated from a database not manually entered. Thanks.

You have repeated rows and do not use ID atrribute with them , you can use class like this :
$('select.dropdown').change(function(e){
var optionChange = $(this).find('option:selected').text();
$(this).closest("tr").find(".categoryname").val(optionChange);
});
and your php code should be something like this :
<?php
'<div id="trxdetailstable">';
echo '<table align="center" width="750px" cellspacing="0" border=".5px" ! important>
<tr>
<th>Movie Title</th>
<th>Category</th>
<th>Price</th>
</tr>';
echo '<tr>
<td align="left" width="8%" height="25px">';
$ddlquery4 = "SELECT id, title, categoryname FROM dvd ORDER BY title ASC";
$ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");
echo '<select class="dropdown" name="dvdid" id="dvdid" size="1" onchange="updatecat()">';
while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){
$categoryname = $ddlrow4['categoryname'];
echo "<option data-categoryname='' value='".$ddlrow4['id']."'>" . $ddlrow4['title'] . "</option>";
} //End while statement
echo "</select>";
echo '</a></td>';
echo '<td align="left" width="10%">';
echo '<input required class="categoryname" id="categoryname" name="categoryname" type="text" readonly="readonly">';
echo '</a></td></tr>';

For others using html/php and searching for a way to auto populate a text field based on the selection made in a dropdown fed from data held in their mysql db (and only use one file) here is what FINALLY worked for me:
In html head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
In html/php portion:
echo '<td align="left" width="8%" height="25px">';
$ddlquery4 = "SELECT id, title, categoryname FROM dvd ORDER BY title ASC";
$ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");
echo '<select type="text" class="dropdown" name="dvdid" id="dvdid" size="1" onchange="updatecat()">';
while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){
echo "<option value='".$ddlrow4['id']."' data-categoryname='".$ddlrow4['categoryname']."'>" . $ddlrow4['title'] . "</option>";
} //End while statement
echo "</select>";
echo '</a></td>';
echo '<td align="left" width="10%">';
echo '<input type="text" id="categoryname" name="categoryname" readonly="readonly" value="">';
echo '</a></td>';
In HTML area at end of file:
<script>
$('#dvdid').change(function() {
selectedOption = $('option:selected', this);
$('input[name=categoryname]').val( selectedOption.data('categoryname') );
});
</script>
I sincerely hope this prevents someone else from having to go the days of trial and error and endless searching and reading that I went through.

Cloning table row and adding it to end of table

I am trying to clone and append a table row when the user selects my add rows button. I have an empty hidden row that is used to clone. I can't seem to get it to work how I need it too.
I output my form with PHP and looks something like this:
$budgetRowCount = 0;
echo"<table id='selected_budget_table'>
<tr>
<th>Roofs</th>
<th>Roof Area</th>
<th>Recommendations</th>
<th>Amount</th>
<th>Remove</th>
</tr>";
echo "<tr id='new_budget_row0' style='display: none;'>
<td><input id='budget-roofs' name='budget-roofs[]' /></td>
<td><input id='budget-area' name='budget-area[]' /></td>
<td><input id='budget-recommendation' name='budget-recommendations[]' /></td>
<td><input id='budget-amount' name='budget-amount[]'/> </td>
</tr>";
while ($budgetInfoRow = mysqli_fetch_array($budgetResult)) {
if($budgetRowCount == 0){
echo "<tr id='selected_budget_row". $budgetRowCount ."'>";
echo "<td><input type='text' id='budget-roofs' name='budget-roofs[]' value='".$budgetInfoRow['budget_roofs']."'</td>";
echo "<td><input type='text' id='budget-roof-area' name='budget-roof-area[]' value='".$budgetInfoRow['budget_roof_area']."'</td>";
echo "<td><input type='text' id='budget-recommendation' name='budget-recommendation[]' value='".$budgetInfoRow['budget_recommendation']."'</td>";
echo "<td><input type='text' id='budget-amount' name='budget-amount[]' value='".$budgetInfoRow['budget_amount']."'</td>";
echo "</tr>";
$budgetRowCount++;
}
else{
echo "<tr id='selected_budget_row". $budgetRowCount ."'>";
echo "<td><input type='text' id='budget-roofs' name='budget-roofs[]' value='".$budgetInfoRow['budget_roofs']."'</td>";
echo "<td><input type='text' id='budget-roof-area' name='budget-roof-area[]' value='".$budgetInfoRow['budget_roof_area']."'</td>";
echo "<td><input type='text' id='budget-recommendation' name='budget-recommendation[]' value='".$budgetInfoRow['budget_recommendation']."'</td>";
echo "<td><input type='text' id='budget-amount' name='budget-amount[]' value='".$budgetInfoRow['budget_amount']."'</td>";
echo "<td><a href='#' class='removeRow' data-remove-row='budget_row". $budgetRowCount . "'>Remove</a></td>";
echo "</tr>";
$budgetRowCount++;
}
}
echo "</table>";
echo"<input type='button' value='+' id='addNewBudgetRow' class='addNewBudgetRow'/>";
And this is how I am attempting to clone my row and add it to my table:
$(function() {
var $removeIDVal = 0;
$(document.body).on('click', '.addNewBudgetRow', function () {
var $emptyBudgetTableRow = $("#new_budget_row0").clone();
$removeIDVal++
var $emptyBudgetTableRowClone = $emptyBudgetTableRow.clone();
var $newRowID = 'added_budget_row' + $removeIDVal;
$emptyBudgetTableRowClone.attr('id', $newRowID)
$emptyBudgetTableRowClone.children('td').last().after('<td>Remove</td>');
$(this).closest("fieldset").find("tbody").append($emptyBudgetTableRowClone);
$emptyBudgetTableRowClone.show();
});
});
I had an alert to check if the button was actually firing and my alert showed up no problem, however I can't seem to get it to clone and append properly and I have done this several times elsewhere with no issues. Where am I going wrong here?
How can I fix this so that my row gets cloned properly and added to the end of my table?

You are not selecting your table, since you have no <fieldset> or <tbody>. Select it by id.
Alos you were cloning new row twice and you have multiple same ids.
$(document.body).on('click', '.addNewBudgetRow', function () {
var $emptyBudgetTableRowClone = $("#new_budget_row0").clone();
$removeIDVal++
var $newRowID = 'added_budget_row' + $removeIDVal;
$emptyBudgetTableRowClone.attr('id', $newRowID)
$emptyBudgetTableRowClone.children('td').last().after('<td>Remove</td>');
$('#selected_budget_table').append($emptyBudgetTableRowClone);
$emptyBudgetTableRowClone.show();
});
});
$(function() {
var $removeIDVal = 0;
$(document.body).on('click', '.addNewBudgetRow', function () {
var $emptyBudgetTableRowClone = $("#new_budget_row0").clone();
$removeIDVal++
var $newRowID = 'added_budget_row' + $removeIDVal;
$emptyBudgetTableRowClone.attr('id', $newRowID)
$emptyBudgetTableRowClone.children('td').last().after('<td>Remove</td>');
// Select you table by id
$('#selected_budget_table').append($emptyBudgetTableRowClone);
$emptyBudgetTableRowClone.show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='selected_budget_table'>
<tr>
<th>Roofs</th>
<th>Roof Area</th>
<th>Recommendations</th>
<th>Amount</th>
<th>Remove</th>
</tr>
<tr id='new_budget_row0' style='display: none;'>
<td><input id='budget-roofs' name='budget-roofs[]' /></td>
<td><input id='budget-area' name='budget-area[]' /></td>
<td><input id='budget-recommendation' name='budget-recommendations[]' /></td>
<td><input id='budget-amount' name='budget-amount[]'/> </td>
</tr>
</table>
<input type='button' value='+' id='addNewBudgetRow' class='addNewBudgetRow'/>

I've put it up on jsFiddle and found + fixed some issues:
http://jsfiddle.net/lumpie/nprsdb2m/
$(function() {
var $removeIDVal = 0;
$(document.body).on('click', '.addNewBudgetRow', function () {
var $emptyBudgetTableRow = $("#new_budget_row0");
$removeIDVal++
var $emptyBudgetTableRowClone = $emptyBudgetTableRow.clone();
var $newRowID = 'added_budget_row' + $removeIDVal;
$emptyBudgetTableRowClone.attr('id', $newRowID)
$emptyBudgetTableRowClone.append('<td>Remove</td>');
$("#selected_budget_table").append($emptyBudgetTableRowClone);
// Logic to remove a row:
$emptyBudgetTableRowClone.find(".removeRow").click(function() {
$(this).parents("tr").remove();
});
$emptyBudgetTableRowClone.show();
});
});
Ah, just a minute too late, Rene Korss was slightly ahead of me.
But hey: I've included a little extra: logic to make the Remove button work :)

Post drop down value of selected checkboxes

I have an html table created dynmically in PHP.The table has checkbox,Name Price and quantity.The quantity is dropdown list.I want to know how to post all these values depending on selected checkbox.Here is small snipet.What I want is the user will select
checkbox and i want to post name,price and selected quantity to another page cart.php.
What i am having working right now is i am only able to post selected checkbox value by doing $_POST["checkboxes"].But i dont know to post value for those selected checkboxes.Please help..I am trying to learn PHP.
<form action="cart.php" name="myform" id="menuform" method="post" >
echo "<label>"."Appetizers"."</label>";
echo "<center>";
echo "<table class='appetizerstable'>";
echo "<thead>";
echo "<tr>";
echo "<th>";
echo "Select";
echo "</th>";
echo "<th>";
echo "Name";
echo "</th>";
echo "<th>";
echo "Price";
echo "</th>";
echo "<th>";
echo "quantity";
echo "</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($appetizers)) {
echo "<tr>";
echo "<td>" ."<input type='checkbox' name ='checkboxes[]' value=".$row['id'].">".
"</td>";
echo "<td>" ."<label name='foodname[]'>". $row['name']."</label>" . "</td>";
echo "<td>" ."<label name='foodprice[]'>". $row['price']."</label>" . "</td>";
echo "<td>"."<select id='quantity[] name='quantity[]'>".
"<option value='1'>1</option>".
"<option value='1'>2</option>".
"</select>".
"</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
echo "<center>";

You won't need to send the name and price values as you can always retrieve those from the database by knowing the id of that item when sending the form data. So we will be focusing on just the quantities and the id of the items checked.
The main problem with what you are trying to do is that the quantity[] form data and the checkboxes[] form data wont have the same amount of items in the array when the form is sent....unless you check off every item. What happens is checkboxes only gets data sent when the box is checked while quantity[] gets data sent when a select option is selected and by default one is always selected. So basically every quantity select data will get sent whether its checked or not. So it will be hard to determine which quantity array items belong to the checkboxes array items. But there is a solution....a complicated one but still a solution with just php.
Here is the new HTML
I cleaned it up a bit for readability
<form action="cart.php" name="myform" id="menuform" method="post" >
<label>Appetizers</label>
<center>
<table class="appetizerstable">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Price</th>
<th>quantity</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_array($appetizers)) : ?>
<tr>
<td>
<input type="checkbox" name ="checkboxes[]" value="<?php echo $row['id'] ?>">
</td>
<td>
<label><?php echo $row['name']; ?></label>
</td>
<td>
<label><?php echo $row['price']; ?></label>
</td>
<td>
<select id="quantity[]" name="quantity[]">
<option value="<?php echo '1-' . $row['id']; ?>">1</option>
<option value="<?php echo '2-' . $row['id']; ?>">2</option>
</select>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<center>
</form>
Ok so what changed...well take a look at the new quantity[] values. I have appended a dash followed by the row id. Now each value has a unique value and we have a way to associate the quantity value with the check box value. We will figure this out on the cart.php file next. Here is how to do that:
cart.php
<?php
if(isset($_POST['checkboxes']) && isset($_POST['quantity']) ) {
$checkboxes = $_POST['checkboxes'];
$quantities_unfiltered = $_POST['quantity'];
$quantities = array();
foreach($quantities_unfiltered as $unfiltered) {
$filtered = explode('-', $unfiltered);
// $filtered now equals a 2 item array
// $flitered[0] = the quantity value
// $filtered[1] = the id
// create an associative array for easy access to the quantity by using the id as the array key
$quantities[ $filtered[1] ] = $filtered[0];
}
// now we can figure out the quantity values for each checkbox checked
// test it out by echoing the values
foreach($checkboxes as $id) {
echo 'Item with id of ' . $id . ' was selected with a quantity of ' . $quantities[$id] . '<br>';
}
}
?>
Hope that helps you out a bit.
UPDATE
I added an if statement in the cart.php example and removed the foodprice[] and foodname[] from the name attributes as they don't send as POST data anyways as the html is not a form element. I got a little picky about that.

you can use the jquery to submit form when change on dropdown value
<select name="" id="" onchange="this.form.submit()">
..........
.........
</select>

How can I put a textbox inside a table data which rows have been appended/moved from another table?

My question might be confusing, basically I have two tables in my ordering, one which is connected to a mysql database displaying the items i have in stock and the other (empty) table is where all my selected items go.
pic: http://tinypic.com/r/o89pn5/8
Now, everytime i click the button beside each row on the top table, it transfers the rows to the lower table
pic: http://tinypic.com/view.php?pic=290sfw2&s=8#.U7LMjpSSzTo
Now notice on the lower table I have another column named "Quantity". Can anyone show me how to fill this column with textboxes? Thanks a lot to anyone who can help me. I'm just staring to learn Javascript/JQuery.
Please feel free to ask me more questions in case my question is not clear.
Code for the tables:
<!-- Table 1(inventory table) -->
<?php
$con=mysqli_connect("localhost","root","","purchasing");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM tbl_inventory");
echo "<table id='table1' class='inventory' border='3'>
<tr>
<th>Check</th>
<th>ID</th>
<th>Product Name</th>
<th>Price</th>
<th>Stock</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td> <button class='btn'>order</button> </td>";
echo "<td>" . $row['prod_id'] . "</td>";
echo "<td>" . $row['prod_name'] . "</td>";
echo "<td>" . $row['price'] . "</td>";
echo "<td>" . $row['stock'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
<br/><br/>
<!-- Table 2(ordered items table) -->
<table id="table2" class="inventory" border="3">
<tr>
<th>Check</th>
<th>ID</th>
<th>Product Name</th>
<th>Price</th>
<th>Stock</th>
<th>Quantity</th>
</tr>
<tbody>
</tbody>
</table>
The scripts:
<script>
$(".btn").click(function () {
// get the row containing this link
var row = $(this).closest("tr");
// find out in which table it resides
var table = $(this).closest("table");
// move it
row.detach();
if (table.is("#table1")) {
$("#table2").append(row);
}
else {
$("#table1").append(row);
}
// draw the user's attention to it
row.fadeOut();
row.fadeIn();
});
</script>

After this line:
$("#table2").append(row);
just append textbox in last tr last td like this:
$("#table2").find("tr:last").find("td:last").append('<input type="text" class="quantity" />');

JQuery gives you a few different ways to dynamically add elements to the page. In this case, if you wanted to add a text input to a td element you could do something simple like this:
<script>
$('table#table2 td.quantity').append('<input type="text" name="quantity" id="quantity" value="0" />");
</script>
You can also build elements using various JQuery methods and then append the the JQuery object directly:
<script>
var inputObj = $('<input />');
inputObj.attr('type','text').val('0').attr('name','quantity').attr('id','quantity');
$('table#table2 td.quantity').append( inputObj );
</script>

Hopefully, this may work, but it won't remember whichever value has been put in the text box if a user removes the row from #table2 and put it back later on.
if (table.is("#table1")) {
row.append('<td><input type="text" class="quantity" /></td>');
$("#table2").append(row);
}
else {
row.find('td:last').remove();
$("#table1").append(row);
}
If you have good html5 support, you should be able to use inputs of type number instead of a plain text box.
As an extra, you probably want to have the fadeout/fadein happen around the row move. You may implement it as follow:
var row = $(this).closest('tr');
var table = $(this).closest('table');
row.fadOut(300, function(){
row.detach();
if (table.is("#table1")) {
row.append('<td><input type="text" class="quantity" /></td>');
row.find('.btn').html('remove');
$("#table2").append(row);
}
else {
row.find('td:last').remove();
row.find('.btn').html('order');
$("#table1").append(row);
}
row.fadeIn(300);
});

Store updated forms as an array w/jQuery

I am currently building an internal tool for viewing and editing SQL-like tables via the web. I have some PHP and html written that generates these tables and jQuery written that does this, so far:
Delete Rows
Add New Rows
Output form value after entry
The ultimate goal, of course, is to generate a SQL statement using INSERT, UPDATE, DELETE, etc on the modified data. I have a grasp on how to concatenate the results into such a statement, but could use help targeting columns for it.
My main concern is modifying the form value output function so that I can store any updated entries in an array and output them as a CSV string. I've read about .each, .map, .push, and .serializeArray. I'm not sure exactly how to use/combine these methods to accomplish the desired result. Here are some code snippets:
The current jQuery:
$('#add_row').on('click', function(){
$('<tr><td id="data"><input class ="new_row"></td><td id="data"><input class ="new_row"></td><td id="data" style="text-align:center;"><input class ="new_row"></td><td id = "Delete_Button"><button class="rmv_row">-</button></td></tr>').appendTo('#SQLdata');
});
$("table").on('keyup', 'input', function(){
$('#output').text($(this).val());
});
$('table').on('click', '.rmv_row', function(){
$(this).closest('tr').remove();
});
});
and the PHP/HTML:
<table id="SQLdata">
<tr style="background-color: margin-left:#6b685c;">
<td style="background-color: margin-left:#6b685c; font-family:tahoma,arial,verdana,sans-serif"; colspan="3">
<form style="color:black;" method="post" action="WebEventsStructureColumnTool.php">
Select your table name:
<select method="post" name="table_name" id="picker">
<option>Removed For Security</option>
</select>
<input type="submit" value="Go" name="submit">
</form>
</td>
<td><button id="add_row">Add a Row</button></td>
</tr>
$tableName = $_POST['table_name'];
$statementObject = $pdo->prepare("SELECT a, b, c FROM tab WHERE _id =?");
$statementObject->bindParam(1, $tableName, PDO::PARAM_STR);
$statementObject->execute();
$statementObject->bindColumn('a', $Col1);
$statementObject->bindColumn('b', $Col2);
$statementObject->bindColumn('c', $Col3);
while ($statementObject->fetchAll(PDO::FETCH_BOUND)){
// Gets an array from the CSVs in the column :
$Column1 = explode(",", $Col1);
$Column2 = explode(",", $Col2);
$Column3 = explode(",", $Col3);
}
//Fetches the total number of values from each exploded array:
$Count1 = count($Column1);
$Count2 = count($Column2);
$Count3 = count($Column3);
//Establishes the total length/height of the table:
$largest = $Count1;
if ($Count2 > $largest){
$largest = $Count2;
}
if ($Count3 > $largest){
$largest = $Count3;
}
echo '
<tr>
<th>a</th>
<th>b</th>
<th style="text-align: center">c</th>
<th>delete row</th>
</tr>';
for($i = 0; $i < $largest; $i++){
$tableRows[] =
"<tr>
<td id='data'>
<input type='text' value='" . $Column1[$i] . "'>
</td>" .
"<td id='data'>
<input type='text' value='" . $Column2[$i] . "'>
</td>" .
"<td id = 'data' style='text-align:center;'>
<input type='text' value='". $Column3[$i]. "'>
</td>
<td id = 'Delete_Button'><button class='rmv_row'>-</button></td>";
}
foreach ($tableRows as $row){
echo $row;
}
echo '</table><div><table><tr id="output" colspan="4"></tr></table>'
If anyone also has advice/recommendations on existing code, feel free to criticize. I am a young developer just starting out and could use all the help I can get. Thanks!
I added this bit this morning and am now successfully getting CSVs:
var string = new Array()
function updateString(){$('#output').text(string);}
$('input').each(function(){
string.push($(this).val());
});
Working on creating three different arrays for each data manipulation option and limiting printing to conditionals.