We Keep Coding

jquery select multiple options show and hide input type number with placeholder

<div class="form-group"><label for="unit_of">Unit of Measure</label>
<select class="form-control-sm selectpicker" multiple="multiple" id="unit_of" name="unit_of[]" data-selected-text-format="count">
<?php $sql = "select * from unit_of";
$res = mysqli_query($db_handle, $sql);
while ($list = mysqli_fetch_assoc($res)) {
$unit_of = $list['unit_of'];
?>
<option><?= $unit_of; ?></option>
<?php
}
?>
</select>
</div>
<input type="text" class="form-control-sm" id="rates" name="rates" >
<input type="text" class="form-control-sm" id="rates1" name="rates1" style="display:none">
<input type="text" class="form-control-sm" id="rates2" name="rates2" style="display:none">
In the dropdown
Per Minute
Per Page,
Per Hour,
Per Day,
Per Month,
Per Item,
Per Contract,
Others
I want onchange multiple select hide and show input types number e.g.(name="per_page") e.g.("Enter Rate Per Page") for three input type
Thanks in Advance

If I understand correctly, there are 2 questions here really:
How to restrict a multiple select to a max of 3 selections?
There are multiple ways to achieve this, but my recommendation would be to validate this right before the form is submitted. If you're using a form validation library, try adding the code in there. If not, then you can add a custom submit event handler that will validate the selections. Maybe something like:
$("form").on("submit", function(e) {
var selectionCount = $("#unit_of option:selected").length;
if (selectionCount > 3) {
e.preventDefault();
alert("You may only select up to 3 options.");
}
});
How to add a placeholder to the multiple select?
You can add a placeholder option just before the PHP code adds the other options, like so:
<select class="form-control-sm selectpicker" multiple="multiple" id="unit_of"
name="unit_of[]" data-selected-text-format="count">
<option value="">Enter Rate Per Page</option>
<?php $sql = "select * from unit_of";
$res = mysqli_query($db_handle, $sql);
while ($list = mysqli_fetch_assoc($res)) {
$unit_of = $list['unit_of'];
?>
<option><?= $unit_of; ?></option>
<?php
}
?>
</select>
Of course, with this approach, you'll need to add extra validation code to make sure that the placeholder option is not one of the selected options.

PHP and Javascript issue. Function return always the last value

I searched this website and couldn't find an answer.
I have a php page that display a dropdown list with 2 choices. When on change, a Javascript execute a function that opens a php page to update my database, sending the ID and another parameter with the URL. The problem is the ID value is always the same (the last of the list). Can you help me please, I am very new in PHP and Javascript. Thank you in advance. Here is the PHP code and the javascript:
<?php
$AvailabilityCondition = "1=1";
if ((isset($_POST["availabilityChoice"])) && ($_POST["availabilityChoice"] !== "All")){
$AvailabilityCondition = "rented = "."'".$_POST["availabilityChoice"]."'";
}
$rentalquery = "SELECT * FROM rentals WHERE $AvailabilityCondition ORDER BY region_name, rental_name";
if ($rentalresult = $link->query($rentalquery)) {
/* fetch associative array */
while ($rowrentals = $rentalresult->fetch_assoc()) {
$NumberOfResults = $rentalresult->num_rows;
?>
<!-- ************************* This display a table with a short rental description (Region name - Rental name)
****************************** with and EDIT link, a DELETE link and an AVAILABILITY selector. ******************* -->
<div align="center">
<table >
<tr >
<td width="300" >
<?php echo ($rowrentals["region_name"]).' - '.($rowrentals["rental_name"]).'<br/>'; ?>
</td>
<td width="50">
EDIT
</td>
<td width="100" align="right">
<!-- *********** This form display the actual availability state. On change, it updates the database **************** -->
<form name="updateAvailability" method=POST" class="form-horizontal" >
<select onChange="showSelected(this.value)" id ="availabilityChoice" name="availabilityChoice" style="width: auto">
<option value="No" <?php if (($rowrentals["rented"]) == "No") echo 'selected="selected"' ?>>Available</option>
<option value="Yes" <?php if (($rowrentals["rented"]) == "Yes") echo 'selected="selected"' ?>>Rented</option>
</select> <?php echo ($rowrentals["id"]) ?>
</form>
<script type="text/javascript">
function showSelected(val){
document.getElementById ('availabilityChoice').innerHTML = val;
window.location.replace("status-update.php?rented=" + val + "&id=<?php echo ($rowrentals["id"]) ?>");
}
</script>
<!-- **************************************************************************************************************** -->
</td>
<td>
!!! DELETE !!!
</td>
</tr>
</table>
</div>
<?php
}}
/* free result set */
$rentalresult->free();
/* close connection */
$link->close();
?>
<br/><br/>
<div align="center">
<b>Back to Managers Main Menu</b>
</div>
</body> ​
I just posted more of my PHP page. So you can see the query and the WHILE, where $rowrentals["id"] is coming from.
Here is also a screen capture of how the page looks like: screen capture
I echoed the $rowrentals["id"] under each availability dropdown.
But whatever row I chose to change the availability, it always pass Id=9, the last one. That is what confuses me.
Before the screen capture, all five rows where "Available". Then I selected "Rented" on the first row. The page updated and since Id always =9, you can see the last row "Rented".
The Javascript is working to retrieve the value of the selected item. Because it opens this page perfectly: status-update.php?rented=Yes&Id=9
But again, Id is always 9...

Try with this:
<script type="text/javascript">
function showSelected(val){
document.getElementById ('availabilityChoice').innerHTML = val;
window.location.replace("status-update.php?rented=" + val + "&id=<?php echo ($rowrentals['id']) ?>");
}
If showSelected javascript function inside a foreach/while loop you need to extract it from loop and send id+value at the same time to showSelected function.

Thank you everybody. I found my answer. I added a counter, so this create a different function name for each database Id.
Here is the code:
$rentalquery = "SELECT * FROM rentals WHERE $AvailabilityCondition ORDER BY region_name, rental_name";
$counter =0;
if ($rentalresult = $link->query($rentalquery)) {
/* fetch associative array */
while ($rowrentals = $rentalresult->fetch_assoc()) {
$NumberOfResults = $rentalresult->num_rows;
$counter = $counter+1;
?>
<!-- ************************* This display a table with a short rental description (Region name - Rental name)
****************************** with and EDIT link, a DELETE link and an AVAILABILITY selector. ******************* -->
<div align="center">
<table >
<tr >
<td width="300" >
<?php echo ($rowrentals["region_name"]).' - '.($rowrentals["rental_name"]).'<br/>'; ?>
</td>
<td width="50">
EDIT
</td>
<td width="100" align="right">
<!-- *********** This form display the actual availability state. On change, it updates the database **************** -->
<form name="updateAvailability<?php echo $counter ?>" method=POST" class="form-horizontal" >
<select onChange="showSelected<?php echo $counter ;?>(this.value)" id ="availabilityChoice<?php echo $counter ?>" name="availabilityChoice<?php echo $counter ?>" style="width: auto">
<option value="No" <?php if (($rowrentals["rented"]) == "No") echo 'selected="selected"' ?>>Available</option>
<option value="Yes" <?php if (($rowrentals["rented"]) == "Yes") echo 'selected="selected"' ?>>Rented</option>
</select>
</form>
<script type="text/javascript">
function showSelected<?php echo $counter ;?>(val){
document.getElementById ('availabilityChoice<?php echo $counter ;?>').innerHTML = val;
window.location.replace("status-update.php?rented=" + val + "&id=<?php echo ($rowrentals["id"]) ?>");
}
</script> ​

Variable assigned to HTML input's value through PHP is not understood by JS script

I'm working on a project of a website which shows a chart. User should be able to change a displayed chart (without changing the website) by clicking one of 'Available sensors' from dropdown options. Dropdown connects to MySQL database with used sensors. The sensor's id is assigned to HTML-input ID and its name is assigned to input value.
My intension is to use sensor ID in another data.php file which is responsible for connecting to tables (MySQL) with data collected by sensors. This ID would tell to which of the tables this programm should connect.
At the moment JS script's task is to alert an ID of the chosen sensor when it's clicked on the dropdown menu. Instead of a number I get a message saying 'undefined'. Eventually it would transfer the stored id to the mentioned data.php file.
Could you please tell me whether it's necessary to use AJAX in this case or what's a possible reason of this error in my code?
I also tried to use button insted of input. When clicking on sensors names on dropdown I've received only messages with '1'. However assigning sensorName worked out in both cases. Sensors ID is stored as INT, name as VARCHAR in MySQL table.
Thank you in advance for your help :)
<div id="header_btn" class="dropdown">
<input type="submit" id="btn" value="Available sensors" class="btn btn-success" />
<div class="dropdown-content">
<?php
include("config.php");
$sql = "SELECT * FROM sensors";
$result = $db->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$sensorID = $row["id"];
$sensorName = $row["WebName"];
?>
<input onclick="changeSensorID(this.value)" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" class="btn_drop" id="<?php echo $sensorID ?>" value="<?php echo $sensorName ?>" /></a>
<?php
}
}
?>
</div>
<script>
function changeSensorID() {
var sensorID = document.getElementsByClassName("btn_drop").id;
alert(sensorID);
};
</script>
</div>

please check this code, working fine
<input type="submit" id="btn" value="Available sensors" class="btn btn-success" />
<div class="dropdown-content">
<?php
include("config.php");
$sql = "SELECT * FROM sensors";
$result = $db->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$sensorID = $row["id"];
$sensorName = $row["WebName"];
?><input onclick="changeSensorID(event)" onmouseover="this.style.textDecoration='underline'"
onmouseout="this.style.textDecoration='none'" class="btn_drop" id="<?php echo $sensorID ?>"
value="<?php echo $sensorName ?>" /></a>
<?php
}
}
?>
</div>
<script >
function changeSensorID(event){
var sensorID = event.target.id;
alert(sensorID);
}
</script>
</div>

getElementsByClassName returns array of at least one item if found any. You have to provide index of element that you want to use.
Example
var sensorID = document.getElementsByClassName("btn_drop")[0].id;

know what link was clicked to add to database

When clicking on a link I open a modal window, there is a drop down menu, an item is selected and then when submitted I need to know which link was clicked that opened the modal so I can insert the information into the database. The only problem I am having is knowing which link opened the modal. Here is some snipets of my code:
collections.php:
<?php
$query = 'SELECT Song.Song_OID As Song_OID, Song.Title As Song,
Album.Album_OID As Album_OID, Album.Title As Album,
Artist.Artist_OID As Artist_OID, Artist.Name As Artist
From Song
Left JOIN Artist_has_Song ON Artist_has_Song.Song_Song_OID = Song.Song_OID
Left JOIN Artist ON Artist.Artist_OID = Artist_has_Song.Artist_Artist_OID
Left JOIN Album_has_Song ON Album_has_Song.Song_Song_OID = Song.Song_OID
Left JOIN Album ON Album.Album_OID = Album_has_Song.Album_Album_OID
ORDER BY Song, Artist IS NULL, Artist, Album IS NULL, Album';
$statement = $pdo->prepare($query);
$statement->execute();
while ($row = $statement->fetch(PDO:: FETCH_ASSOC)) { ?>
<tr>
<td>+</td>
</tr>
<?php } ?>
The link + is what is clicked to open this modal window:
<div id="addToPlaylist">
<div class="hidden">
X
<form action="addTo.php" method="post">
<p>Add To:</p>
<select name="userPlaylists">
<?php
$query = 'SELECT Name, Playlist_OID FROM Playlist WHERE User_User_OID=?';
$statement = $pdo->prepare($query);
$statement->execute(array($_SESSION['User_OID']));
while ($row = $statement->fetch(PDO:: FETCH_ASSOC)) {
?>
<option value="<?php echo $row['Playlist_OID']; ?>">
<?php echo $row['Name']; ?></option>
<?php } ?>
</select>
<input type="submit" value="Add"/>
</form>
</div><!-- end hidden -->
</div><!-- end addToPlaylist -->
This form then submits and this is the addTo.php:
<?php
require ('../private_html/config.php');
$playlist = $_POST['userPlaylists'];
$song = $_POST['< the part i dont know >'];
$query = 'INSERT INTO Playlist_has_Song (Song_Song_OID,
Playlist_Playlist_OID)
VALUES (?, ?)';
$statement = $pdo->prepare($query);
$statement->execute(array($playlist, $song));
header('Refresh: 0; URL=collections.php');
?>
The config.php file that is required has the session start as well as the pdo. So given this set up i need to get the Song_OID from the loop that has the #addToPlaylist link into the addTo.php so it can be inserted into the playlist. Any help will be greatly appreciated.

Due to the fact that you also tagged this question as HTML5, you might be interested in using data attributes.
This would allow you use the following HTML:
<tr>
<td>
<!-- class song-picker is used to allow for easier element selection -->
+
</td>
</tr>
and you could use jQuery to grab the song's id
var songID;
$('.song-picker').on('click', function (e) {
songID = $(this).data('song-id');
});
This might need some improving, but might server you as a good staring point.

my little bit of ajax over an element in a table breaks if table is large. how to fix?

I have page with multiple tables being generated by php/mysql. One of the elements is a in/out button. I have it ajax'ed so that the button changes to the on or off image with each click without reloading the page.
And it worked like charm! Until it didn't. If one table or a combination of tables exceeds so many rows...it stops working. But still works on the rows above it. Why would that be?
Here's the table generation...this occurs in multiple php files.
<tbody>
<?php while($row = MySQL_fetch_array($result)):
$id = htmlentities($row['id']);
$status = htmlentities($row['status']);
include ("button.php");
?>
<tr>
<td title="lname" width="100px">
<div style="width:100px; overflow:hidden;">
<?php echo(htmlentities($row['last_name'])); ?>
</div>
</td>
<td width="100px">
<div style="width:100px; overflow:hidden;">
<?php echo(htmlentities($row['first_name'])); ?>
</div>
</td>
.
.
.
<td>
<div style="width:100px; overflow:hidden;">
<?php echo '<div><div id="r'.$id.'"><div id="test"><img class="rating" id="'.$status.$id.'" src="'.$color.'"><div style="display:none;">'.$status.'</div></div></div></div>';?>
</div>
</td>
</tr>
<?php endwhile; ?>
Here's the script:
<script>
$(function(){
$(document).on("click", ".rating", function(){
var status = $(this).attr("id").substr(0,1);
var id = $(this).attr("id").substr(1);
var data = "id="+id+"&status="+status;
$.ajax({
type: "POST",
url: "rate.php",
data: data,
success: function(e){
$("#r"+id).html(e);
}
})
});
});
</script>
Here's the rate.php referenced in the code above:
<?php
include ("db.php");
$id = $_POST["id"];
$newstatus = $_POST["status"];
if($newstatus == 0){
mysql_query("UPDATE users SET status = 1 WHERE id='$id'");
}
else {
mysql_query("UPDATE users SET status = 0 WHERE id='$id'");
}
include("button.php"); //FILE WITH THE LIKE & DISLIKE BUTTONS AND THE NUMBER OF LIKES & DISLIKES
$list = '<div id="test"><img class="rating" id="'.$q[0].$id.'" src="'.$color.'"><div style="display:none;">'.$q[0].'</div>';
echo $list;
?>
And the button.php file referenced above:
<?php
$q = mysql_query("SELECT status FROM users WHERE id='$id'");
$q = mysql_fetch_array($q);
if($q[0]){
$color = "green.png";
}
else{
$color = "red.png";
}
?>
So yeah...if the mysql query for one table is too large, after a certain number of rows, the in/out buttons stop working. Or if I have multiple smaller tables, once it exceeds a certain total number of rows, same thing.
Help?

While debugging in comments, it was realized that duplicate id's were being used. ID's must be unique within a single page, otherwise unexpected results may occur (such as the problem described in the question).
To test for duplicate id's, use the attribute equals selector.
console.log($("[id=" + theidtotest + "]").length)
if you ever get more than 1 elements from that line, you're doing something wrong.