I have a javascript function to choose the selected option to chnage the content of a table cell :
<script>
function getValue(selValue) {
if(selValue == "Apple")
document.getElementById("fruittype").innerHTML = "A";
if(selValue == "Banana")
document.getElementById("fruittype").innerHTML = "B";
if(selValue == "Orange")
document.getElementById("fruittype").innerHTML = "C";
}
</script>
And below is my php function that I am calling :
<?php
function retainFormOnLoad($fruit)
{
echo "<form d='form1' name='form1' method='post' >";
echo "<table>";
echo "<tr>
<td>Congress Database</td>
<td style='text-align: center;'>
<select name='fruit' id='fruit' onchange='getValue(document.getElementById('fruit').value)'>
<option value='-1' selected disabled>Select your option</option>
<option value='Apple' ".(($fruit=='Apple')?'selected':'')." >Apple</option>
<option value='Banana' ".(($fruit=='Banana')?'selected':'')." >Banana</option>
<option value='Orange' ".(($fruit=='Orange')?'selected':'')." >Orange</option>
</select>
</td>
</tr>";
echo "<tr>
<td id='fruittype'>A</td>
<td>Always Good!</td>
</tr>";
echo "<tr><td colspan='2'><input type='reset' value='Clear' onclick='reset()'></td></tr>
</table></form>";
}
?>
When I call the above function, the default values of form fields are set but the onchange and onclick javascript functions do not work. Where am I going wrong? Please help
(***And I have to use PHP only to echo the form)
Related
I want to retrieve the value of selected item while it is inside a loop
to print it in javascript (alert(value)). I can't do this document.getelementbyid because it is inside a loop and the id will be repeated many times.
<?PHP
foreach ($res->fetchAll() as $row) {
?>
<tr>
<td>
<?php echo $row['id']; ?>
<input type="text" hidden value="<?php echo $row['id']; ?> " id="idartwork">
</td>
<td>
<?php echo $row['name']; ?>
</td>
<td>
<?php echo $row['creation_date']; ?>
</td>
<td>
<?php echo $row['artist']; ?>
</td>
<td>
<?php
if ($row['gallery'] == "") {
?>
<select id="selectname">
<option value=""></option>
<option value="ghaya gallery">ghaya gallery</option>
<option value="selma gallery">selma gallery</option>
</select>
<input type="button" value="affecter" onclick="affecter()">
<input type="text" hidden value="<?php echo $row['gallery']; ?> " id="inputgallery">
<!-- <input type="text" hidden value="--><?php //echo $row['id']; ?><!-- " id="idartwork">-->
<?php
} else {
echo $row['gallery'];
?>
<?php
}
?>
</td>
what I want to do is take the value of item select and put it in affecter() so I could print it
Use an $i variable with your foreach loop. Then add that $i to the end of each ID name, then increase the $i at the end of each loop. That way, when the loop creates the next element, each one will have a unique ID. Then you can use getElementByID in JavaScript.
<?php
$i = 0;
foreach ($res->fetchAll() as $row) { ?>
...
<select id="selectname<?php echo $i; ?>">
...
<input type="button" value="affecter" onclick="affecter(<?php echo $i; ?>)">
<?php $i++;
} ?>
Now your selects will have a unique ID of selectname0, selectname1, etc.
And your JavaScript onclick function will know the $i number of that element.
Then your JavaScript function becomes: function affecter(i)
and add i to your getElementByID("selectname"+i)
Add a unique identifier to the id of each of your select objects. This could be done even easier by just applying a .on('click' listener directly to the select element using jQuery, but here is the direct answer to your question:
function affecter(id)
{
var e = document.getElementById(id);
var itemValue = e.options[e.selectedIndex].value;
alert(itemValue);
}
<?PHP
foreach ($res->fetchAll() as $row)
{
?>
<tr>
<td>
<?php
// The `id` field should be a proper identifier so we will use it
echo $row['id'];
?>
<input type="text" hidden value="<?php echo $row['id']; ?> " id="idartwork">
</td>
<td>
<?php echo $row['name']; ?>
</td>
<td>
<?php echo $row['creation_date']; ?>
</td>
<td>
<?php echo $row['artist']; ?>
</td>
<td>
<?php
if ($row['gallery'] == "")
{
// Add a unique identifier to the end of each id
echo '<select id="selectname'.$row['id'].'">';
?>
<option value=""></option>
<option value="ghaya gallery">ghaya gallery</option>
<option value="selma gallery">selma gallery</option>
</select>
<?php
// Send the id to the function affecter()
echo '<input type="button" value="affecter" onclick="affecter(\'selectname'.$row['id'].'\')">
<input type="text" hidden value="'.$row['gallery'].'" id="inputgallery">';
}
else
{
echo $row['gallery'];
?>
Notes:
Duplicate ID are bad, use class instead. But that's not the point of this answer.
Steps to get selected value:
change the html to get the context (learn more about this).
onclick="affecter(this)"
get parent node of that input box,
const parentNode = element.parentNode;
get the select element,
const e = parentNode.querySelector("#selectname");
const selectedName = e.options[e.selectedIndex].value;
// const selectedName = e.value; // some prefers this way
Use it.
alert(selectedName);
function affecter(element) {
const parentNode = element.parentNode;
const e = parentNode.querySelector("#selectname");
const selectedName = e.options[e.selectedIndex].value;
parentNode.querySelector("b span").innerHTML = selectedName;
}
tr td {
display: table;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
<select id="selectname">
<option value=""></option>
<option value="ghaya gallery">ghaya gallery</option>
<option value="selma gallery" selected>selma gallery</option>
</select>
<input type="button" value="affecter" onclick="affecter(this)">
<b>selected: <span></span></span>
</td>
</tr>
<tr>
<td>
<select id="selectname">
<option value=""></option>
<option value="ghaya gallery">ghaya gallery</option>
<option value="selma gallery" selected>selma gallery</option>
</select>
<input type="button" value="affecter" onclick="affecter(this)">
<b>selected: <span></span></span>
</td>
</tr>
</table>
</body>
</html>
I have two dropdown list once is about the area another one is the name.In first dropdown list i have set a cookie to get the area which is originally get from sql database.Now the second dropdown list is to get the username.Therefore once the area is change, the second dropdown will get different name according to the first dropdown list .The area cookie is L,P,W ,how do i manage to change the different area to get different name ?
<form id="form" >
<table cellspacing="5" cellpadding="1" border="0" >
<tr>
<td> Sales Area
<select >
<?php
$sarea = explode(",",$_COOKIE['cooAreaCode']);
foreach($sarea as $item){
?>
<option id="slct" value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option>
<?php
}
$sql = "SELECT StaffName FROM tblStaff WHERE AreaCode= '$item'";
$rs = odbc_exec($link,$sql);
while ($row = odbc_fetch_array($rs)) {
$porr[] = $row;
}
odbc_free_result($rs);
odbc_close($link);
?>
</select>
</td>
<td> Staff Name
<select name="sales_staff_s">
<?php
for($i=0; $i < count($porr);$i++) {
$staff = explode(",",$porr[$i]['StaffName'] );
foreach($staff as $itm){
?>
<option value="<?php echo strtolower($itm); ?>"><?php echo $itm; ?></option>
<?php
}
}
?>
</select>
</td>
</tr>
</form>
1) Add onchange event to your first dropdown list:
<td>
<select name="sales_area" id="sales_area" onchange="getSalesName();">
<?php
$sarea = explode(",",$_COOKIE['cooAreaCode']);
foreach($sarea as $item){ ?>
<option id="slct" value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option>
<?php } ?>
</select>
</td>
<td>
<div id="sales_area_options">
</div>
</td>
2) You need to use ajax to populate the options for your second dropdown list by passing the selected option from your first dropdown list. The JavaScript function:
function getSalesName() {
var sales_area = document.getElementById("sales_area").value;
$.ajax({
url: website_url + "/ajax/get_sales_name.php",
type: "POST",
async: true,
dataType: 'json',
data: {'sales_area': sales_area},
success: function(data) {
var opts = '<select name="sales_staff_s">';
$(data).each(function(index, val) {
opts += '<option value="'+val.id+'">'+val.name+'</option>';
});
opts += '</select>';
$("#sales_area_options").html(opts);
}
});
}
3) Your SQL queries and exploding the values for the second dropdown list should be in the new PHP file:
$item = $_POST['sales_area'];
$sql = "SELECT StaffName FROM tblStaff WHERE AreaCode= '$item'";
...
I have a table inside a modal that was echoed via PHP. I add a class that whenever the value does not match, the said class will be hidden. The problem is that when the focus is lost in the modal, the class returns to be hidden. Here is excerpt from my php code:
echo "<tr class='options1'>
<td><label class='control-label'>Section:</label></td>
<td><select class='form-control' name='cmbsection' id='cmbsection'>
<option value='".$val['Section']."'>".$val['Section']."</option>";
$section_code = array();
$section_code[] = $val['Section'];
foreach($data['sectionlist'] as $value)
{
if(!in_array($value['sectionName'],$section_code))
{
echo "<option value='".$value['sectionName']."'>".$value['sectionName']."</option>";
}
}
echo "</select>
</td>
<td><label class='control-label'>Line:</label></td>
<td><select class='form-control' name='cmbline' id='cmbline'>";
$line_code = array();
$line_code[] = $val['Line'];
echo "<option value='".$val['Line']."'>".$val['Line']."</option>";
foreach($data['linelist'] as $value)
{
if(!in_array($value['lineName'],$line_code))
{
echo "<option value='".$value['lineName']."'>".$value['lineName']."</option>";
}
}
echo "</select>
</td>
</tr>
and here is the jquery code:
$(document).on('focus','#modalEditEmployees',function(){
$('tr.options1').hide();
$('#cmbdept3').on('change',function(){
if($('#cmbdept3 option:selected').text() == "SEWING"){
$('tr.options1').show();
}
else
{
$('tr.options1').hide();
}
});
});
Please note that modalEditEmployees is the name of the modal.
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>
I am trying to get alert on change of select box option.
Here, i added a css class name on each selectbox while iterating it in the loop, and finally i called the jquery function with class selector.
But i do not know why its not showing alert on change of selectbox dropdown. Please help me to solve this problem
<table style="border:1px solid red;" width="650px">
<tr style="border:1px solid red;">
<td">Status</td>
</tr>
<?php
$qry = "select *from tracker group by orderno";
$res = mysql_query($qry) or die(mysql_error());
while($data = mysql_fetch_array($res))
{
?>
<tr style="border:1px solid red;">
<td ><label onclick="show(this.id)" id=<?php echo $data['orderno'];?> > <?php echo $data[1]; ?></label></font></td>
<td ><?php echo $data['customername']; ?></td>
<td align="center" style="border:1px solid red;"><?php echo $data['noofbooks']; ?></td>
<td ><?php echo $data['address']; ?></td>
<td ><?php echo $data['mobileno']; ?></td>
<td align="center" style="border:1px solid red;">
<select name="status" class="selectboxid">
<?php
if($data['status'] == "despatch")
{
echo '<option name="despatched" selected="selected" value="despatched"> Despatched </option>';
}
else
{
echo '<option name="despatched" value="despatched"> Despatched </option>';
}
if($data['status'] == "Pending")
{
echo '<option name="pending" selected="selected" value="pending"> pending </option>';
}
else{
echo '<option name="pending" value="pending"> pending </option>';
}
if($data['status'] == "deliver")
{
echo '<option name="despatched" selected="selected" value="despatched"> Despatched </option>';
}
else
{
echo '<option name="despatched" value="despatched"> Despatched </option>';
}
if($data['status'] == "partial")
{
echo '<option name="partial" selected="selected" value="partial"> Partial </option>';
}
else
{
echo '<option name="partial" value="partial"> Partial </option>';
}
?>
</select>
</td>
</tr>
<?php
}
?>
</table>
And my jquery code is;
<script>
$(".selectboxid").change(function() {
alert("hi");
});
</script>
Maybe you bind event too soon (before DOM is loaded). Just put jQuery function in jQuery(function(){ }) like code below.
for optional you should use on instead of change, its a recommend style.
jQuery(function(){
$(".selectboxid").on('change', function() {
alert("hi");
});
});
use this, dont need $(document).ready...
<script>
$(document).on("change",".selectboxid",function(){
alert("hi");
});
</script>