Develop Reference

How to hide/show td based on drop down menus

I have created a table having 5 or 6 td. The data in table is generated by 3 drop down menus with a Go button. When I set values in all the three drop downs, it shows me result in table.
But the problem is If i don't select a value in one or two of drop downs and set it to null, it should not show me that column in the table. I am trying it with javascript but i don't know how to do.
Here is my code for HTML:
$(document).ready(function() {
$("#go").click(function() {
var select1 = document.getElementById("select1").value;
var select2 = document.getElementById("select2").value;
var select3 = document.getElementById("select3").value;;
});
if (select1 == null) {
document.getElementByClass('select1td').style.display = none;
}
if (select2 == null) {
document.getElementByClass('select2td').style.display = none;
}
});
<select id="select1" name="select1" style="width: 190px; display: block;">
<option selected value="" disabled="disabled">Select an option</option>
<?php
$sql="SELECT DISTINCT name FROM tbl1 ";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "<option class='name' value=' " . $row['name'] ."'>" . $row['name'] ."</option>";
}
?>
</select>
<label>Lot Name</label>
<select id="select2" name="select2" style="width: 190px; display: block;">
<option selected value="" disabled="disabled">Select an option</option>
<?php
$sql="SELECT DISTINCT course FROM tbl1 ";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "<option class='course' value=' " . $row['course'] ."'>" . $row['course'] ."</option>";
}
?>
</select>
<!-- and also a third drop down menu-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="select1td">
<?php echo $row["name"]; ?>
</td>
<td class="select2td">
<?php echo $row["course"]; ?>
</td>
<td class="select3td">
<?php echo $row["reg"]; ?>
</td>
</table>

I changed your original javascript code to jquery. You can check empty values with if(myvalue). This works because javascript will see the value of an empty string as false. You can also do if(myvalue !== '') this checks if myvalue is not an empty string.
Also you wrote your if statements outside of the onclick event handler. Therefore the code was executed on the ready event.
$(document).ready(function() {
$("#go").on('click', function() {
$('#select1').val() ? $('.select1td').show() : $('.select1td').hide();
$('#select2').val() ? $('.select2td').show() : $('.select2td').hide();
$('#select3').val() ? $('.select3td').show() : $('.select3td').hide();
/* This is an alternative notation if you prefer this.
if ($('#select1').val()) {
$('.select1td').show();
} else {
$('.select1td').hide();
}
if ($('#select2').val()) {
$('.select2td').show();
} else {
$('.select2td').hide();
}
if ( $('#select3').val()) {
$('.select3td').show();
} else {
$('.select3td').hide();
}
*/
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value=''>no value</option>
<option value='something'>value</option>
</select>
<select id="select2">
<option value=''>no value</option>
<option value='something'>value</option>
</select>
<select id="select3">
<option value=''>no value</option>
<option value='something'>value</option>
</select>
<button id="go">Go</button>
<table>
<tr>
<td class="select1td">select1td</td>
<td class="select2td">select2td</td>
<td class="select3td">select3td</td>
</tr>
</table>

In JQuery you can use element.toggle();
But is ok with javascript(element.style.display).
I think i see your problem, you write:
document.getElementByClass('select1td').style.display=none; //wrong
to get an element that has a specific class you must do like that:
document.getElementsByClassName('select1td')[index].style.display=none;
When you select a class you are selecting more than one element, you select an array of elements even you have only 1 element in array.
That is why you must specify a index.
Remember that in arrays index starts from 0(for taking the first element you must select element with index 0 like that):
document.getElementsByClassName('select1td')[0].style.display=none;
Improvement!
You can have only one class for those 3 td elements.
<table>
<tr>
<td class="selecttd"><?php echo $row["name"]; ?></td>
<td class="selecttd"><?php echo $row["course"]; ?></td>
<td class="selecttd"><?php echo $row["reg"]; ?></td>
</table>
And you select each one like that:
document.getElementsByClassName('selecttd')[0.style.display=none;//for the first one
document.getElementsByClassName('selecttd')[0].style.display=none;//second
document.getElementsByClassName('selecttd')[0].style.display=none;//third
Another Improvement!
You can use document.querySelector() //with this you can select all kind of elements for example by tag name,class,id,:
document.querySelector("td");//select the first td
document.querySelectorAll(".class")[2];//selects the third element from class
document.querySelector("#id");//selects an element by id
Your javascript code ca be:
$(document).ready(function(){
$("#go").click(function(){
var select1=document.getElementById("select1").value;
var select2=document.getElementById("select2").value;
var select3=document.getElementById("select3").value;
;
});
if(select1==null){
document.querySelectorAll('selecttd')[0].style.display=none;
}
if(select2==null){
document.querySelectorAll('selecttd')[1].style.display=none;
}
});
</script>
And HTML:
<table>
<tr>
<td class="selecttd"><?php echo $row["name"]; ?></td>
<td class="selecttd"><?php echo $row["course"]; ?></td>
<td class="selecttd"><?php echo $row["reg"]; ?></td>
</table>
JQuery example:
$(document).ready(function(){
$("#go").click(function(){
var select1=$(#select1").val;
var select2=$(#select2").val;
var select3=$(#select3").val;
;
});
if(select1==null){
$('.selecttd')[0].toggle();
}
if(select2==null){
$('.selecttd')[1].toggle();
}
});
I hope this was helpful!
Good luck!

You can try this example: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
By the way, it is not recommended to use mysql* functions anymore. They are deprecated. Use mysqli* instead.

Populating table with select dropdown (from database)

As shown in the code below, I have a dropdown list, populated from table "tabela". Below it I have a table which I need it to be populated depending on the option select from the dropdown?
How can I do this?
<div class="box">
<?php
$pdo = new PDO('mysql:host=localhost;dbname=dbname; charset=utf8', 'user', 'pass');
$sql = "SELECT id, pref, nome FROM tabela GROUP BY pref,nome ORDER BY nome";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$users = $stmt->fetchAll();
?>
<select>
<?php foreach($users as $user): ?>
<option value="<?= $user['id']; ?>"><?= $user['pref']; ?> - <?= $user['nome']; ?></option>
<?php endforeach; ?>
</select>
<table class="gradienttable">
<thead>
<tr>
<th colspan="7" class="tabelas">tipo1</th>
</tr>
<tr>
<th>Tipo1</th>
<th>Modelo</th>
<th>Qtde</th>
<th>Tipos</th>
<th>Pessoas</th>
<th>Vazios</th>
<th>Porcent</th>
</tr>
</thead>
<tbody>
<?php
foreach ($dbh->query("SELECT *, (ocupacao)*100 as ocupacao1 FROM tabela WHERE prefixo=8510") as $row) {
printf(
"<tr onmouseover='this.style.fontWeight=700;' onmouseout='this.style.fontWeight=400;'>
<td style='padding:8px;'>%s - %s</td>
<td style='padding:8px;'>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
</tr>",
$row->pref, $row->nome, $row->model, $row->qtde, $row->tipos, $row->pessoas, $row->vazios, $ocupacao1 = round($row ->ocupacao1 * 100)/100 . '%');
}
?>
</tbody>
</table>
</div>

I think first of all you should change your foreach() statement into:
<?php foreach($users as $user) { ?>
<option value="<? echo $user['id']; ?>"><? echo $user['pref']; ?> - <?echo $user['nome']; ?></option>
<?php }; ?>
I find this a bit more clean and readable :)
Then you will need to enable the page to "filter" the rows by select - this can be done either by posting the select contents each time you change the select value (so basically you create a form that will submit itself every time you change what is in select - not very modern solution) or use AJAX to send the contents and retrieve the results.
If you decide to go second option (which I would highly recommend) you should take a look at some tutorials on changing page content basing on AJAX response. I would recommend to go to jQuery for that - since you should find quite some functions there that would help you out...

Using the way you are gathering the data you need to echo the results into the html.
<?php foreach ($dbh->query("SELECT *, (ocupacao)*100 as ocupacao1 FROM infografico WHERE prefixo=8510") as $row) { ?>
<tr onmouseover='this.style.fontWeight=700;' onmouseout='this.style.fontWeight=400;'>
<td><?php echo $row->pref; ?></td>
...
</tr>
<?php } ?>
It would most likely be better to gather the data you need in the table first and form your array as required, then loop through that array and echo into the table.

How to make autofill input text from a select dropdown box with multiple lines?

I am trying to have a function where a user can select items they want from a drop-down box, then the price will be displayed in an input box at its side.
I am now facing problem to have the same function in multiple lines. Code are as below:
<td class="formiterate" >
<select id="Employee_ID" name="id[]">
<option value="">Select one</option>
<?php
$st = $pdo->prepare("SELECT * FROM tbl_stock");
$st->execute();
$rowes = $st->fetchAll(PDO::FETCH_ASSOC);
foreach ($rowes as $rowe) {
?><option value="<?= $rowe ['id']; ?>"><?= $rowe ['stock_item']; ?> (<?= $rowe ['stock_brand']; ?>)</option><?php
}
?>
</select>
</td>
<td class="formiterate"><input type="text" name="Last_name[]" id="Last_name"></td>
As you can see, when you select from the Employee_ID, the item price will reflect in the Last_name[] input box.
Whilst the code works fine for a single row, I am not able to iterate the function for multiple row.
Below is my javascript:
$(function() { // This code will be executed when DOM is ready
$('#Employee_ID').change(function() { // When the value for the Employee_ID element change, this will be triggered
var $row = $(this); // We create an jQuery object with the select inside
$.post("getData.php", { Employee_ID : $row.val()}, function(json) {
if (json && json.status) {
$('#Last_name').val(json.lastname);
}
})
});
})
I have tried adding .closest(".rows") at var ($row)= $this, but noting happened.
Please help.
Thanks

An example for you (hard code example):-
abc.php:-
<?php
error_reporting(E_ALL); //check all type of errors
ini_set('display_errors',1);
$rowes = array(0=>array('id'=>1,'stock_item'=>'item1','stock_brand'=>'demo1'),1=>array('id'=>2,'stock_item'=>'item2','stock_brand'=>'demo2'),2=>array('id'=>3,'stock_item'=>'item3','stock_brand'=>'demo3'));
?>
<html>
<body>
<table>
<tr style= "float:left;width:100%">
<td class="formiterate" >
<select class="Employee_ID" name="id[]">
<option value="">Select one</option>
<?php
foreach ($rowes as $rowe) {
?><option value="<?= $rowe ['id']; ?>"><?= $rowe ['stock_item']; ?> (<?= $rowe ['stock_brand']; ?>)</option><?php
}
?>
</select>
</td>
<td class="formiterate"><input type="text" name="Last_name[]" class="Last_name"></td>
</tr>
<tr style= "float:left;width:100%">
<td class="formiterate" >
<select class="Employee_ID" name="id[]">
<option value="">Select one</option>
<?php
foreach ($rowes as $rowe) {
?><option value="<?= $rowe ['id']; ?>"><?= $rowe ['stock_item']; ?> (<?= $rowe ['stock_brand']; ?>)</option><?php
}
?>
</select>
</td>
<td class="formiterate"><input type="text" name="Last_name[]" class="Last_name"></td>
</tr>
</table>
</body>
<script src = "https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$(function() { // This code will be executed when DOM is ready
$('.Employee_ID').change(function() { // When the value for the Employee_ID element change, this will be triggered
var data = $(this).children(':selected').text();
console.log(data);
$(this).parent().next().find('.Last_name').val(data);
});
})
</script>
</html>
Output at my end (after selection from drop-down):- http://prntscr.com/chernw
Note:- put this code to a separate file and run. then you can understand what you have to do, and then change in your code accordingly.thanks.
In your case try like this:-
$(function() { // This code will be executed when DOM is ready
$('.Employee_ID').change(function() { // When the value for the Employee_ID element change, this will be triggered
var currentseletbox = $(this);
var data = $(this).children(':selected').text();
$.post("getData.php", { Employee_ID : $row.val()}, function(json) {
if (json && json.status) {
currentseletbox.parent().next().find('.Last_name').val(json.lastname);
}
});
});
})

Get value of selected option above

I am trying to make an order page to add multiple products through javascript. PHP/HTML code is:
<?php $module_row = 0; ?>
<tbody id="module-row<?php echo $module_row; ?>">
<tr>
<td><select name="prod[]"><?php foreach ($products as $product) { ?><option value="<?php echo $product['ID']; ?>"><?php echo $product['name']; ?></option></td><td><a onClick="addProd();">Add New</a></td>
</tr></tbody>
<?php $module_row++; ?>
And my Javascript code is:
var module_row = <?php echo $module_row; ?>;
function addProd() {
html = '<tbody id="module-row' + module_row + '">';
html += ' <tr>';
html += ' <td class="left"><select name="prod[]">';
<?php foreach ($products as $product) { ?>
html += ' <option value="<?php echo $product['ID']; ?>"><?php echo $product['name']; ?></option>';
<?php } ?>
html += ' </select></td></tr></tbody>';
$('#module tfoot').before(html);
module_row++;
Now I want to to show products array in later added rows to show products dropdown with out the products selected above. I have checked a lot of forums but could not find a solution to get the above selected value of dropdown. Any idea about this?

For enabling and disabling select options, something like this JS fiddle could help. Notice that it disables the possibility of selecting the same thing in multiple select boxes.
As for the code sample you posted, you're missing a PHP closing bracket (}) after your foreach.
Also, you can use <?= $var ?> as a more readable shortcut for <?php echo $var ?>
Try this:
<?php
$products = [
[
'ID' => 123,
'name' => 'product1',
],
[
'ID' => 456,
'name' => 'product2',
],
];
$module_row = 0;
?>
<tbody id="module-row <?= $module_row; ?>">
<tr>
<td>
<select name="prod[]">
<?php foreach ($products as $product) { ?>
<option value="<?= $product['ID']; ?>">
<?= $product['name']; ?>
</option>
<?php } ?>
</td>
<td>
<a onClick="addProd();">Add New</a>]
</td>
</tr>
</tbody>
<?php $module_row++; ?>

append a select box with same option but different name

How can I append a select box with same option and different name.
I have a loop, where my php reads a sql table, and for each row, it creates a option tag
this is the function to append:
$(function(){
$('#add').click(function(){
var select = $('span[id=combo]').html();
$('#allCombo').append('<br/><span id="combo">'+select+'</span>');
});
});
this is the select box:
<span id="allCombo">
<span id="combo" name="combo">
<select name="item">
<?php foreach ($items as $item) { ?>
<option value="<?php echo $item->item_id; ?>">
<?php echo $item->item_name; ?></option>
<?php } ?>
</select>
</span>
</span>
Can anyone help me.
thanks before.

$(function(){
$('#add').click(function(){
var select = $('#combo').html();
$('<br/><span id="combo">'+select+'</span>').appendTo('#allCombo').find.('select').attr('name', 'uniqueName');
});
});

Use item[] as name . PHP will convert this to an array, so the selected values are in an array stored at $_POST['item'].
But more important is to not duplicate IDs. I suggest to remove the inner span completely, as
you cannot have duplicate IDs and
span tags have no name attribute
so there is no need to keep this tag.
<span id="allCombo">
<select name="item[]">
<?php foreach ($items as $item): ?>
<option value="<?php echo $item->item_id; ?>">
<?php echo $item->item_name; ?>
</option>
<?php endforeach; ?>
</select>
</span>
The JS code would be:
$(function(){
$('#add').click(function(){
$('#allCombo')
.append('<br />')
.append($('#allCombo select').first().clone());
});
});

var newSelect = $('select[name=item]').clone().attr('name', 'newselect');
$('#allCombo').append(newSelect);

You can always use the clone method:
var new_combo $('span#combo').clone();
new_combo.attr('name', 'second_combo');
new_combo.attr('id', 'second_combo'); // for valid html
$('#allCombo').append(new_combo);