jquery event focus alternatives - javascript

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.

Related

Error: Uncaught ReferenceError: onChangeAssignedGroup is not defined at HTMLSelectElement.onchange

I've been having issues trying to call a php script via javascript when the user changes a value in the "Assigned To Group" selection. Which is ultimately supposed to change the option list of, a not yet created, "Assign to User" selection.
I keep getting an error saying that it doesn't recognize the function's name. When I tried running a simple value change and alert to verify it could get the values, it recognized it and it updated accordingly. When I added the Ajax command is when it started not recognizing it. I'm sure I'm probably just using incorrectly, somehow, sense I've never used ajax before. But from the samples I've seen, it seems fairly straight forward.
Error: Uncaught ReferenceError: onChangeAssignedGroup is not defined at HTMLSelectElement.onchange
<?php
include('classes/class.User.php');
include('classes/class.Role.php');
include('classes/class.User_Role.php');
include('constants.php');
session_start();
?>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function onChangeAssignedGroup() {
var new_assigned_to_role_id = document.getElementById("option_list_assigned_to_role_id").value;
document.getElementById("assignedGroupId").innerHTML = "You selected: " + new_assigned_to_role_id;
alert(new_assigned_to_role_id);
$.ajax({
method: "POST",
url: "ticket_details.php",
data:{
ticket_id:$_POST['ticket_id'];
creator_user_id:$_POST['creator_user_id'];
creator_user_name:$_POST['creator_user_name'];
status:$_POST['status'];
priority:$_POST['priority'];
title:$_POST['title'];
assigned_to_role_id:new_assigned_to_role_id;
assigned_to_role_name:"";
assigned_to_user_id:$_POST['assigned_to_user_id'];
assigned_to_user_name:$_POST['assigned_to_user_name'];
},
success: function () {
alert('form was submitted');
}
});
}
</script>
</head>
<body>
<p>Return to Tickets</p>
<?php
if(isset($_POST['submit']) or isset($_POST['submit_new_comment']) or isset($_POST['submit_update_ticket'])){
$ticket_id = $_POST['ticket_id'];
$creator_user_id = $_POST['creator_user_id'];
$creator_user_name = $_POST['creator_user_name'];
$status = $_POST['status'];
$priority = $_POST['priority'];
$title = $_POST['title'];
$assigned_to_role_id = $_POST['assigned_to_role_id'];
$assigned_to_role_name = $_POST['assigned_to_role_name'];
$assigned_to_user_id = $_POST['assigned_to_user_id'];
$assigned_to_user_name = $_POST['assigned_to_user_name'];
//connect to database
include("database_connection.php");
//handle update to ticket
if(isset($_POST['submit_update_ticket'])){
$update = $mysqli->query("UPDATE `ticket` SET `status` = '$status', `priority` = '$priority',
`assigned_to_role_id` = '$assigned_to_role_id', `assigned_to_role_name` = '$assigned_to_role_name',
`assigned_to_user_id` = '$assigned_to_user_id', `assigned_to_user_name` = '$assigned_to_user_name'
WHERE `ticket`.`id` = $ticket_id");
if(!$update){
echo"<p>".$mysqli->error."</p>";
}
}
//handle new comment
if(isset($_POST['submit_new_comment'])){
$new_comment = $_POST['new_comment'];
$current_id = $_SESSION['user']->getId();
$current_username = $_SESSION['user']->getUsername();
//sanitize data
$new_comment = $mysqli->real_escape_string($new_comment);
unset($_POST['submit_new_comment']);
//insert new comment into database.
$insert = $mysqli->query("INSERT INTO ticket_comment (ticket_id, user_id, user_name, text) VALUES ('$ticket_id', '$current_id', '$current_username', '$new_comment')");
if(!$insert){
echo"<p>".$mysqli->error."</p>";
}
}
//include arrays for converting values returned
include("value_maps.php");
echo "<p id='assignedGroupId'></p>";
echo "<p>role id:".$assigned_to_role_id."</p>";
echo "<p>role name:".$assigned_to_role_name."</p>";
if(in_array($assigned_to_role_id,$_SESSION['user']->getRoles())){
echo "<p>you have this role.</p>";
} else {
echo "<p>you don't have this role.</p>";
}
print_r($_SESSION['user']->getRoles());
echo"
<form action='' method='post'>
<input type='hidden' name='ticket_id' value='$ticket_id'>
<input type='hidden' name='creator_user_id' value='$creator_user_id'>
<input type='hidden' name='creator_user_name' value='$creator_user_name'>
<input type='hidden' name='title' value='$title'>
<input type='hidden' name='assigned_to_role_id' value='$assigned_to_role_id'>
<input type='hidden' name='assigned_to_role_name' value='$assigned_to_role_name'>
<input type='hidden' name='assigned_to_user_id' value='$assigned_to_user_id'>
<input type='hidden' name='assigned_to_user_name' value='$assigned_to_user_name'>
<table border='0' align='center' cellpadding='5'>
<tr>
<th>Ticket ID</th>
<th>Title</th>
<th>Status</th>
<th>Priority</th>
<th>Assigned To Group</th>
<th>Assigned To User</th>
</tr>
<tr>
<td>$ticket_id</td>
<td>$title</td>";
if(in_array($assigned_to_role_id,$_SESSION['user']->getRoles()) or in_array(ROLE_ID_ADMIN,$_SESSION['user']->getRoles())){
echo "<td><select name='status'>";
$status_index = 0;
foreach($status_array as $status_choice){
if($status == $status_index){
echo "<option value='". $status_index."' selected>". $status_choice ."</option>";
} else {
echo "<option value='". $status_index."'>". $status_choice ."</option>";
}
$status_index++;
}
echo "</select></th>";
echo "<td><select name='priority'>";
$priority_index = 0;
foreach($priority_array as $priority_choice){
if($priority == $priority_index){
echo "<option value='". $priority_index."' selected>". $priority_choice ."</option>";
} else {
echo "<option value='". $priority_index."'>". $priority_choice ."</option>";
}
$priority_index++;
}
echo "</select></th>";
} else {
echo "<td>".$status_array[$status]."</th>";
echo "<td>".$priority_array[$priority]."</th>";
}
if(in_array(ROLE_ID_ADMIN,$_SESSION['user']->getRoles())){
echo "<td><select id='option_list_assigned_to_role_id' name='assigned_to_role' onchange='onChangeAssignedGroup()'>";
foreach($_SESSION['roles'] as $assigned_to_role_choice){
if($assigned_to_role_id == $assigned_to_role_choice->getId()){
echo "<option value='". $assigned_to_role_choice->getId()."' selected>". $assigned_to_role_choice->getName() ."</option>";
} else {
echo "<option value='". $assigned_to_role_choice->getId()."'>". $assigned_to_role_choice->getName() ."</option>";
}
}
echo "</select></td>";
} else {
echo "<td>$assigned_to_role_name</td>";
echo "<td>$assigned_to_user_name</td>";
}
echo"
</tr>
<tr>
<td colspan='5'></td>
<td><input type='submit' name='submit_update_ticket' value='Update Ticket Details' required></td>
</tr>
</table>
</form>
";
//get back ticket details
$results = $mysqli->query("SELECT `id`,`ticket_id`,`user_id`,`user_name`,`text`,`create_date`,`modify_date` FROM `ticket_comment` WHERE `ticket_id` = ".$ticket_id." ORDER BY `create_date`");
//if insert was successful
if($results){
//header('location:registration_email_sent.php');
if ($results->num_rows > 0){
echo "
<table border='0' align='center' cellpadding='5'>
<tr>
<th>Username</th>
<th>Comment</th>
</tr>
";
while($row = $results->fetch_row()){
echo"
<tr>
<td>".$row[3].": </td>
<td>".$row[4]."</td>
</tr>";
}
} else {
echo "<p>No comments found. </p>";
}
}
$mysqli->close();
echo"
<form method='post' action=''>
<input type='hidden' name='ticket_id' value='$ticket_id'>
<input type='hidden' name='creator_user_id' value='$creator_user_id'>
<input type='hidden' name='creator_user_name' value='$creator_user_name'>
<input type='hidden' name='status' value='$status'>
<input type='hidden' name='priority' value='$priority'>
<input type='hidden' name='title' value='$title'>
<input type='hidden' name='assigned_to_role_id' value='$assigned_to_role_id'>
<input type='hidden' name='assigned_to_role_name' value='$assigned_to_role_name'>
<input type='hidden' name='assigned_to_user_id' value='$assigned_to_user_id'>
<input type='hidden' name='assigned_to_user_name' value='$assigned_to_user_name'>
<table border='0' align='center' cellpadding='5'>
<tr>
<th>New Comment</th>
<th><input type='submit' name='submit_new_comment' value='Post New Comment'></th>
</tr>
<tr>
<td colspan='2'><textarea name='new_comment' rows='10' cols='30' placeholder='New Comment Here' required></textarea></td>
</tr>
</table>
</form>
";
}
?>
</body>
</html>
In the data object in your ajax request, you need to replace the semicolons with commas.
You should also always use prepared statements to interact with the database.

Not able to call onchange and onclick JavaScript functions from PHP

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)

Best way to select multiple selections seperatly from foreach output

I have this foreach loop:
foreach ($userItems_get as $item => $value) {
if ($value['prefab'] == 'wearable') {
echo $value['name'] . "</br>";
echo "<img src=\"{$value['image_inventory']}.png\" width=\"90\" height=\"60\">" . "</br>";
if (!isset($value['item_rarity'])) {
$rarity = "common";
} else {
$rarity = $value['item_rarity'];
}
echo $rarity . "</br>";
foreach ($userItemsLoad as $key => $values) {
if ($item == $values['defindex']) {
echo $values['id'] . "</br></br>";
break;
}
}
}
}
which outputs the data in this format:
http://puu.sh/kVTjk/c1471e903a.jpg
I want the user to select which item he wants to trade/use and i want to recieve the ID of that item which is the integer value at the bottom, the user should be able to select multiple items?
How do i accomplish this? and whats the best way to do this? Thanks.
There are lot of ways of achieving this.
You can use normal Submit:
<form method="POST" action="script.php">
<table>
<tr>
<th></th>
<th>Image</th>
<th>Name</th>
</tr>
<?php
foreach ($userItems_get as $item => $value) {
if ($value['prefab'] == 'wearable') {
$id = "";
foreach ($userItemsLoad as $key => $values) {
if ($item == $values['defindex']) {
$id = $values['id'];
break;
}
}
?>
<tr>
<td><input type="checkbox" name="itemSelect[]" class="itemSelect" value="<?php echo $id; ?>" /></td>
<td>
<img src="<?php echo $value['image_inventory']; ?>.png" width="90" height="60">
</td>
<td>
<?php echo $value['name']; ?><br />
<?php
if (!isset($value['item_rarity'])) {
$rarity = "common";
} else {
$rarity = $value['item_rarity'];
}
?>
</td>
</tr>
<?php
}
}
?>
</table>
<button type="Submit">
Normal Submit
</button>
<button type="button" id="ajSubmit">
Ajax Submit
</button>
</form>
Script.php:
<?php
echo "<pre>";
print_r($_POST['itemSelect']);
echo "</pre>";
?>
Or Use jQuery:
<script>
$(function() {
$("#ajSubmit").click(function() {
var selectedItemIds = $("input.itemSelect").map(function(){
return $(this).val();
}).get();
});
});
</script>
The selectedItemIds will hold all the ID values.
Add a checkbox for each items, and add a class for the checkboxes for referencing
<input class="itemId" type="checkbox" value="$values['defindex']">
You can use JQuery to select all the checked checkboxes and loop then in a each loop
//Select all input elements which has class of itemId and it is checked then loop through with each.
$("input.itemId[checked='checked']").each(function(){
var itemId = $(this).val();
alert(itemId);
//Do something else
}

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>

Jquery- Unable to get alert after changeing the select option

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>

Categories