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..
Related
<tr>
<td>Credit Account No: </td>
<td><select name="debitacc">
<?php
$sql = "SELECT * FROM account";
$res = mysqli_query($conn, $sql);
$count = mysqli_num_rows($res);
if($count>0)
{
while($row=mysqli_fetch_assoc($res))
{
$code = $row['code'];
$id = $row['id'];
?>
<option value="<?php echo $id;?>"><?php echo $code; ?></option>
<?php
}
}
else
{
echo "<option value='0'>No Account.</option>";
}
?>
</select>
</td>
<td>Account Name: </td>
<td><input type="text" name="creditaccname" placeholder="Enter Your Account Name"></td>
</tr>
I have saved my an account in phpMyAdmin
id code name
1 1234 bank charge
2 9988 CIMB
How do I if select the code 1234 will automatic echo in <td> Acc name of the code
It's easy to store the code name value as a data-attribute in the option, and then reference it at the time of selection using a change event.
function showAccName(v) {
let name = document.querySelector('select[name=debitacc] option:checked').dataset.name;
document.querySelector('#accName').innerHTML = name ? `Code Type: <strong>${name}</strong>` : '';
}
<table><tr>
<td>Credit Account No: </td>
<td>
<select name="debitacc" onchange='showAccName(this.value)'>
<option value='0'>No Account.</option>
<option value='1' data-name="bank charge">1234</option>
<option value='2' data-name="CIMB">9988</option>
</select>
</td>
<td>Account Name: </td>
<td><input type="text" name="creditaccname" placeholder="Enter Your Account Name"></td>
</tr></table>
<div id='accName'></div>
Code concept sample: Generate HTML/JabaScript like the following
<select name="DebitAccount" onchange="document.getElementById('AccountName').innerHTML = this.options[this.selectedIndex].getAttribute('AccountName');">
<option value="AccountID" AccountName="AccountName">AccountCode</option>
...
</select>
Account name: <span id="AccountName"></span>
DISCLAIMER: There are JavaScript conformation concerns regarding inline JavaScript usage and proper HTML definition. You should follow them accordingly, I just wanted to help here with the concept.
How can I get the value of my radio button and used it to my SQL statement. I created a script but not working :(
Expected result:
I want my dropdown dependent on the value of radio button
script:
<tr>
<td><br><input type="radio" name="lockin" value="1" checked /> Yes </td>
<td><br><input type="radio" name="lockin" value="0"/>No </td>
</tr>
<tr>
<td ><br>Reason for Disconnection</td>
<td><br>
<select id="reasondd" name="R" onChange="change_reason()" width="40" >
<option id="mySelect" value="" selected="selected" >Select</option>
<?php
if(isset($_POST['lockin'])) {
if($_POST['value'] == 1) {
$WhereC= 1;
} elseif($_POST['value'] == 0) {
$WhereC=0;
}}
$res=mysqli_query($link,"SELECT DISTINCT discon_reason FROM note_gen2 where lock_in_stat = '$WhereC' order by discon_reason asc");
while ($row=mysqli_fetch_array($res)) {
?>
<option value="<?php echo $row['discon_reason'];?>"><?php echo $row["discon_reason"]; ?></option>
<?php } ?>
</select>
</td>
</tr>
In this, there is no $WhereC.
$res=mysqli_query($link,"SELECT DISTINCT discon_reason FROM note_gen2 where lock_in_stat = '$WhereC' order by discon_reason asc");
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.
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 html select dropdown list in my view
<?php $level = $this->escapeHtml($user->level); ?>
<?php if ($level == 1): ?>
<option value="1" selected ="selected">Administrator</option>
<option value="2" <?php IsSelected($level,2); ?>> Manager</option>
<option value="3" <?php IsSelected($level,3); ?>>HR Staff</option>
<?php elseif ($level == 2): ?>
<option value="1" <?php IsSelected($level,1); ?>>Administrator</option>
<option value="2" selected ="selected">Manager</option>
<option value="3" <?php IsSelected($level,3); ?>>HR Staff</option>
<?php elseif ($level == 3): ?>
<option value="1" <?php IsSelected($level,1); ?>>Administrator</option>
<option value="2" <?php IsSelected($level,2); ?>>Manager</option>
<option value="3" selected ="selected">HR Staff</option>
<?php endif; ?>
</select>
What I want is that everytime I select on my dropdown, it must update the level column in my user table in database.
I have tried using onchange event of javascript
<script type='text/javascript'>
function changeLevel(level){
var user_id = level.value;
$.ajax({
type: 'GET',
url: '/editLevel/'+user_id,
cache: false,
success: function(response) {
$("#test").html(response);
}
});
alert(user_id);
}
</script>
but it fails on calling the parent url.
this outputs http://localhost/ijm/public/%7B%7BURL()%7D%7D/editLevel/2
instead of http://localhost/ijm/public/user/editLevel/2
aside from that, how can I update my user table from that javascript function?
this is my function in userController
public function editLevelAction()
{
//return $this->$view;
$id = (int) $this->params()->fromRoute('id', 0);
$data = array(
'level' => $level
);
$this->update('user', $data, 'id = ' .'39');
//return $this->redirect()->toRoute('user');
}
what should i need to do for this to work? Thanks in advance.
Here now is the whole code.
<?php
$title = "Manage Users ";
$this->headtitle($title);
$identity = $this->identity()->level;
?>
<!-- these should be between the <head> tags, but make sure they are at least after the head if they can't be in the head-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="page-header">
<h1><?php echo $this->escapeHtml($title); ?><small>User list</small></h1>
</div>
<ul class="nav nav-tabs">
<li class="pull-right"><i class="icon-plus"></i> Add new user</li>
</ul>
<?php if (count($users)): ?>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Level</th>
<th></th>
</tr>
</thead>
<?php foreach ($users as $user): ?>
<tr>
<td><?php echo $this->escapeHtml($user->first_name . ' ' . $user->last_name); ?></td>
<td><?php echo $this->escapeHtml($user->email); ?></td>
<td>
<div id="test"></div>
<?php $level = $this->escapeHtml($user->level); ?>
<select name="level" id= "level" onchange="changeLevel(this)">
<option value="1" <?php IsSelected($level,1); ?>>Administrator</option>
<option value="2" <?php IsSelected($level,2); ?>> Manager</option>
<option value="3" <?php IsSelected($level,3); ?>>HR Staff</option>
</select>
</td>
<td style="text-align: right;">
<i class="icon-remove icon-white"></i>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php else: ?>
<h3>There are no registered users available.</h3>
<?php endif; ?>
<script type='text/javascript'>
function changeLevel(level){
var user_id = level.value;
$.ajax({
type: 'GET',
url: '/editLevel/'+user_id,
cache: false,
success: function(response) {
$("#test").html(response);
alert(user_id);
}
});
}
</script>
Try using AJAX (here is jQuery). This is just a quick example based on yours:
jQuery Hosted Libraries
<!-- jQUERY Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
Form: Select
<!-- Just a div to display results if you want to -->
<div id="test"></div>
<form>
<?php
// Here is just a quick function to help fix your redundant
// select check. This could probably be done better, but you
// don't need to echo out all 3 sets of options 3 times
function IsSelected($value = 1,$level = 1) {
echo ($value == $level)? 'selected="selected"':"";
}
$level = $this->escapeHtml($user->level); ?>
<select name="level" id= "level" onchange="changeLevel(this)">
<option value="1"<?php IsSelected($level,1); ?>>Administrator</option>
<option value="2"<?php IsSelected($level,2); ?>>Manager</option>
<option value="3"<?php IsSelected($level,3); ?>>HR Staff</option>
</select>
</form>
jQuery AJAX
<script type='text/javascript'>
function changeLevel(level){
var user_id = level.value;
$.ajax({
type: 'GET',
url: '/editLevel/'+user_id,
cache: false,
success: function(response) {
$("#test").html(response);
}
});
}
</script>