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.
Related
Is there any way to filter my dynamic table using two dropdown? As for now, I only able to filter using only one dropdown. I cannot seem to find the right way so I'm gonna post my original code that successfully filter using one dropdown (because there are too many error in the latest code using two filter). Hope you can give me suggestions on how to solve this.
view.php
<?php
require "../model/model.php";
$month=$_GET['month'];
$sys = getSys(1)->fetch_assoc();
?>
<body>
<div class="row">
<table border="0">
<tr><td>
<select required class="form-control" name="month" id="month">
<option value="">-- Choose Month--</option>
<? echo getDropDownMonth($month) ;?>
</select>
</td></tr>
</table>
<table width="100%" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th width="5%">No.</th>
<th width="20%">Date</th>
<th width="20%">Stock Code</th>
<th width="20%">Price(RM)/KG</th>
<th width="20%">QUANTITY(KG)</th>
<th width="20%">TOTAL(RM)</th>
</tr>
</thead>
<?
$i=1;
$raw = getRawMaterialListCode($month);
while($list_raw_material = $raw->fetch_assoc()) {
?>
<tr class="odd gradeX">
<td><?php echo $i; ?></td>
<td><?php echo $list_raw_material['date_received']; ?></td>
<td><?php echo $list_raw_material['stock_code'].' - '.$list_raw_material['stock_name']; ?></td>
<td><?php echo $list_raw_material['raw_price']; ?></td>
<td><?php echo $list_raw_material['in_per_kg']; ?></td>
<td><?php echo $list_raw_material['total_price']; ?></td>
</tr>
<?php $i++; } ?>
</table>
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
$("#month").change(function(){
var selected_month=$(this).val();
sendType(selected_month);
});
});
function sendType(type)
{
window.location.href="view.php?month="+type;
}
</script>
</body>
model.php
function getRawMaterialListCode($month) {
$conn=db();
$sql = "
SELECT a.*
, c.stock_code
, c.stock_name
FROM avsb_raw_material a
LEFT
JOIN avsb_stock c
ON a.stock_code = c.stock_code
WHERE MONTH(a.date_received) = '$month'
ORDER
BY a.date_received
";
$result = $conn->query($sql);
return $result;
}
Supposedly I'm trying to add second dropdown as filter here:
<div class="row">
<table border="0">
<tr><td>
<select required class="form-control" name="month" id="month">
<option value="">-- Choose Month--</option>
<? echo getDropDownMonth($month) ;?>
</select>
**<select required class="form-control" name="stock_code" id="stock_code">
<option value="">-- Choose Stock--</option>
<? echo getDropDownStock($stock_code) ;?>
</select>**
</td></tr>
</table>
and the new model.php
function getRawMaterialListCode($month,$stock_code) {
$conn=db();
$sql = "
SELECT a.*
, c.stock_code
, c.stock_name
FROM avsb_raw_material a
LEFT
JOIN avsb_stock c
ON a.stock_code = c.stock_code
WHERE MONTH(a.date_received) = '$month'
AND a.stock_code = '$stock_code'
ORDER
BY a.date_received
";
$result = $conn->query($sql);
return $result;
}
Thanks in advance.
EDIT: These code are the closest one I try that did not have any error but the data still not display when filtering using two dropdown.
The url that i get :
http://localhost/stockcontrolsystem/view/view.php?month=10&stock_code=[object%20HTMLSelectElement]
view:
<?
$i=1;
$raw = getRawMaterialListCode($stock_code,$month);
while($list_raw_material = $raw->fetch_assoc()) {
?>
function:
$(document).ready(function() {
$("#month").change(function(){
var selected_month=$(this).val();
reloadMonth(selected_month);
});
$("#stock_code").change(function(){
if($("#month").val()==''){
alert('SELECT MONTH!');
$("#stock_code").val('');
}else{
var selected_stock=$(this).val();
var month = $("#month").val();
reloadStock(selected_stock,month);}
});
});
function reloadMonth(month){
//console.log(month);
location.href = "view.php?month="+month;
}
function reloadStock(selected_stock,month){
//console.log(obj);
location.href = "view.php?month="+month+"&stock_code="+stock_code;
}
ANSWERED! I try inserting what i found here and there and I finally SOLVED it.
$(document).ready(function() {
$("#month").change(function(){
var selected_month=$(this).val();
reloadMonth(selected_month);
});
$("#stock_code").change(function(){
if($("#month").val()==''){
alert('SELECT MONTH!');
$("#stock_code").val('');
}else{
var selected_stock=$(this).val();
var month = $("#month").val();
reloadStock(selected_stock,month);}
});
});
function reloadMonth(month){
//console.log(month);
location.href = "view.php?month="+month;
}
function reloadStock(selected_stock,month){
//console.log(obj);
location.href = "view.php?month="+month+"&stock_code="+selected_stock;
}
I want to display the data selection based on the retrieval of the foreach using chosen jquery, I have added remove () and chosen () and the chosen format does not work, how do I remove and update the chosen, is my syntax wrong? please help ... sorry if something unclear can be asked to me ..
This is my syntax for chosen
$('#acctAccessed').change(function(){
$('#acctAccessed').find('option').remove();
var opt = '';
<?php foreach ($data_from_ctr['account'] as $data) :?>
$('#acctAccessed').append('<option value="'<?php echo $data['idMst'] ?>'">'<?php echo $data['giroOB']; ?>'</option>');
<?php //endforeach ?>;
$(".chosen-select").trigger("chosen:updated");
});
This is a table format that I want to make chosen
<tr class="odd">
<td width="150"><strong>Account Access</strong></td>
<td width="10">:</td>
<td colspan="2">
<select id="acctAccessed" name="acctAccessed[]" multiple="multiple" class="chosen-select" style="width:350px;" data-placeholder="Select account">
</select>
<input id="chkall" type="checkbox" >Select All</input>
</td>
$('#acctAccessed').change(function(){
$('#acctAccessed').empty()
var opt = '';
<?php foreach ($data_from_ctr['account'] as $data) :?>
$('#acctAccessed').append('<option value="'<?php echo $data['idMst'] ?>'">'<?php echo $data['giroOB']; ?>'</option>');
<?php //endforeach ?>;
//$(".chosen-select").trigger("chosen:updated");
$("#acctAccessed").val($("#acctAccessed option:first").val());
});
try it
Please try this. I have rearrange your code and do some changes.
$('#acctAccessed').change(function(){
var opt = '';
<?php foreach ($data_from_ctr['account'] as $data) :?>
opt += '<option value="'<?php echo $data['idMst'] ?>'">'<?php echo $data['giroOB']; ?>'</option>';
<?php endforeach; ?>;
$('#acctAccessed').html(opt);
$(".chosen-select").trigger("chosen:updated");
});
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);
}
});
});
})
I have a drop down in PHP. I have some fields from database. Now I have an edit button besides that dropdown in which i want to pass the id the of selected option in dropdown! How can I do this?
<tr>
<td>Base INI File</td>
<td>
<select required name="base_ini_id" id="base_ini_id" class="form-control">
<option value="">Select</option>
<?php foreach($base as $value) { ?>
<option id="emp" class="specialLink" value="<?php echo $value->base_ini_filename;?>"><?php echo $value->base_ini_filename;?></option>
<?php } ?>
</select>
</td>
<?php foreach($customs as $custom) ?>
<td>
<?php echo btn_edit('customer/upload_ini/edit_ini_old/' . $custom->id); ?>
</td>
>
</tr>
Looks like this :
As you can see I have a button in a td besides the dropdown and I want to link that to the id of the selected option from dropdown using AJAX or jQuery. I have no knowledge of AJAX, but due to requirement I have to implement this.
Try this Code. I call sample url from your recruitment. Change as it yours
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<td>
<select required name="base_ini_id" id="base_ini_id" class="form-control">
<option value="">Select</option>
<?php foreach($base as $value) { ?>
<option id="emp" class="specialLink" value="<?php echo $value->id;?>"><?php echo $value->base_ini_filename;?></option>
<?php } ?>
</select>
</td>
<td>
<a id="edit_link" href=""><button>Edit</button> </a>
</td>
<script type="text/javascript">
$(document).ready(function()
{
$('#base_ini_id').change(function() {
var id=$("#base_ini_id").val();
$("#edit_link").attr("href", "customer/user/edit/"+id);
});
});
</script>
I suggest you don't use id because there may be multiple records in table. For your knowledge id is unique, however you can use class for that.
<tr>
<td>Base INI File</td>
<td>
<select required name="base_ini_id" class="form-control base_ini_id">
<option value="">Select</option>
<?php foreach($base as $value) { ?>
<option id="emp" class="specialLink" value="<?php echo $value->base_ini_filename;?>"><?php echo $value->base_ini_filename;?></option>
<?php } ?>
</select>
</td>
<td>
<span onclick="btn_edit(this);">Edit</span>
</td>
</tr>
Use following JavaScript function to get the selected option
<script type="text/javascript">
function btn_edit(control)
{
var selected_option = $(control).parent().prev().find('.base_ini_id').val();
// Use selected option variable to pass data in your php file
$.ajax({
type: "post",
url: "customer/upload_ini/edit_ini_old/"+selected_option ,
cache: false,
success: function(change)
{
// Do here what you want...
}
});
}
</script>
Here parent() funtion returns parent element of $(control) element.
prev() function return previous element of particular element.
find() function finds class, id or element from specified element.
You can get selected option value in selected_option variable
hope you got me !!
UPDATE
Use following code
<tr>
<td>Base INI File</td>
<td>
<select required onchange="option_change(this);" name="base_ini_id" class="form-control base_ini_id">
<option value="">Select</option>
<?php foreach($base as $value) { ?>
<option id="emp" class="specialLink" value="<?php echo $value->base_ini_filename;?>"><?php echo $value->base_ini_filename;?></option>
<?php } ?>
</select>
</td>
<td>
<a href = "" class="edit_link">Edit</span>
</td>
</tr>
<script type="text/javascript">
function option_change(select)
{
var selected_val = $(select).val();
var link = "customer/upload_ini/edit_ini_old/"+selected_option;
$(select).parent().next().find('.edit_link').attr('href', link);
}
</script>
This will update the href attribute of edit anchor after option change. If you click on edit without select option page will refresh only you can manage something as you want there..
I am creating a Data table with following code
<?php
foreach($redeemSales as $sale)
{
?>
<tr class='clickableRow<?php echo $isRead ? '' : ' newrow' ?>' href='#'>
<td><form><input type="checkbox" id="userSelection" name="userslection" ></form></td>
<td><?php echo $sale["ring"];?></td>
<td><?php echo formatFullDate($sale["soldDate"]) ?></td>
<td><?php echo $sale["saleType"]; ?></td>
<td>
<div class="col-lg-8">
<select name="type" id="redeemOptions" class="form-control">
<option value="None">None</option>
<option value="CD">(CD)</option>
<option value="Amex">American Express Card (Amex)</option>
</select>
</div>
</td>
</tr>
<?php }?>
I want to make it so if anyone change the option to any oe of CD Or Amex, it will set the selection to its row as checked.
jAVAScript code is here
<script language="javascript">
$(document).ready(function(e)
{
$('#redeemOptions').change(function(){
if($('#redeemOptions').val() == 'None')
{
document.getElementById("userSelection").checked = false;
}
else
{
document.getElementById("userSelection").checked = true;
}
});
});
</script>
As you can see that there is a for loop, so its rows getting added in a table. The above method works only for first row. If i change the options, it will set selection to Checked. But after first rows, no other row is showing that behavior. It is probably something to do with id of the elements.
How can one find out a solution so that other rows show same behavior. Secondly, if I have to get the ids or values of all rows that are "Checked" how will i do it in php
the problem is that an id has to identify one single element on the page, and you are generating multiple items with the same id. Change your select to something like the following:
<select name="type" class="form-control redeemOptions">
And then change your javascript function to the following, to take advantage of the fact that "this" will equal the object that the change event is being fired from:
$('.redeemOptions').change(function(){
var menuChanged = $(this),
parentForm = menuChanged.closest('form'),
correspondingCheckbox = parentForm.find('input[name=userSelection]');
if(menuChanged.val() == 'None')
{
correspondingCheckbox[0].checked = false;
}
else
{
correspondingCheckbox[0].checked = true;
}
});
Finally, remove the id="userSelection" from the checkbox and just leave the name. It won't hurt the functionality but it is technically invalid because again you can only have one element of a given id on the page.
As I can see for every $sale in $redeemSales you have a checkbox having id "userSelection" and a select box having id "redeemOptions". I advise you to use unique ids. So append $i=0...$i++ to the ids of both.
For Row 1: userSelection0 redeemOptions0
For Row 2: userSelection1 redeemOptions1
and so on..
In Select tag, use onchange event :-
<select name="type" id="redeemOptions<?php echo $i; ?>" class="form-control" onchange="foo(<?php echo $i; ?>)">
And write a javascript function :-
<script language="javascript" type="text/javascript">
function foo(id)
{
if($('#redeemOptions'+id).val() == 'None')
{
document.getElementById("userSelection"+id).checked = false;
}
else
{
document.getElementById("userSelection"+id).checked = true;
}
}
</script>