We Keep Coding

Why combo box is not getting hide on page load?

I'm trying to hide the combobox on page load. The combobox has not getting hide. I can't find any error on webbrowser's inspect element. I've checked the select tag syntax and javascript all are seems fine. But its not getting hide?
PHP CODE:
<?php
$list=mysqli_query($conn,"select * from emp");
echo "<select id='dropbx'>";
echo "<option value=''>emp Code</option>";
while($row = mysqli_fetch_array($list))
{
echo "<option value='" . $row['emp_code'] . "'>" . $row['emp_code'] . "</option>"; //Why Two column mentioned??
}
echo "</select>";
?>
<script type="text/javascript">
window.onload = function()
{
document.getElementById('dropbx').visibility = "hidden";
//alert('hello');
};
</script>

You have to use the code like this. visibility is the property of the style attribute of the element. You can read more here: https://www.w3schools.com/jsref/prop_style_visibility.asp
document.getElementById("dropbx").style.visibility = "hidden";

you can hide dropdown by using hide() like this :
$("#dropbx").hide();
or you can use display property like this :
document.getElementById("dropbx").style.display = "none";

Another option would be to do it in server side.
echo "<select id='dropbx' style='display:none;'>";
or (if you don't want inline styles)
echo "<select id='dropbx' class='hidden'>";
in your css
.hidden {
display:none;
}

The php value from the database is not being passed when the button is clicked

So I got most of my php and jquery working but I am currently stuggling on one thing which is how do I pass a db value in a while loop on button click to the jquery? At present nothing is being printed
<?php
...
if(mysqli_num_rows($result)){
while($row = mysqli_fetch_assoc($result)){
print
"<div class='item col-xs-4 col-lg-4'>".
"<div class='row'>".
"<div class='col-xs-10'>".
"<p class='list-group-item-text'>".
"<input type='text' class='form-control' id='usr'>".
"<button id='button' class='btn btn-success'>Calculate</button>".
"</div>".
"</div>".
"</div>";
}
}
?>
<script type="text/javascript">
$(document).on("click", "#button", function(){
var name = '<?php echo($row['name']); ?>';
alert(name);
});
</script>
Say there are like seven of these boxes and the user clicks on the fourth one - how do I get that row name, like pass that to the jquery?

Ok, we need to change a few things. Every element in the HTML DOM needs a unique id. If more than one element has the same id, the machines get very confused. This is understandable, since you're saying hey pay attention to the button with the id #button! And it's like, which one? There are 7. We can add a unique id to each button during the loop by using the id from the current row the loop is fetching from the db. NB that in HTML, element ids cannot begin with a number. That's why I used button-45,etc.
We can also change the listener to listen to a class of buttons instead of a specific button - that way if any button on the page with the right class gets clicked, the listener hears it. Using jQuery you can also add data directly to the element, and retrieve is using .data(). I've provided two variables in the javascript so you can see the results of each approach.
<?php
...
if(mysqli_num_rows($result)){
$i = 0;
while($row = mysqli_fetch_assoc($result)){
print
"<div class='item col-xs-4 col-lg-4'>".
"<div class='row'>".
"<div class='col-xs-10'>".
"<p class='list-group-item-text'>".
"<input type='text' class='form-control' id='usr-".$row['id']."'>".
"<button id='button-".$row['id']."' data-id='".$row['id']."' class='btn btn-success btn_calc'>Calculate</button>".
"</div>".
"</div>".
"</div>";
}
$i++;
}
?>
<script type="text/javascript">
$(document).on("click", ".btn_calc", function(){
var id_only = $(this).data('id'); //this gets us the id
//you can log values to the console, then right-click and inspect to see the results:
console.log("id_only = ",id_only);
//this gets the text into a variable
var text = $('#usr-'+id_only).val();
console.log("text = ", text);
//alert(text);
});
</script>

try the following
if(mysqli_num_rows($result)){
$i = 0;
while($row = mysqli_fetch_assoc($result)){
print
"<div class='item col-xs-4 col-lg-4'>".
"<div class='row'>".
"<div class='col-xs-10'>".
"<p class='list-group-item-text'>".
"<input type='text' class='form-control' id='usr_" . $i . "'>".
"<button id='button_" . $i . "' class='btn btn-success'>Calculate</button>".
"</div>".
"</div>".
"</div>";
$i ++;
}
}

You're problem is that you are trying to pass data in STRING FORMAT.
In your script you pass the $row out of while loop so it doesn't pass anything useful for you. If you have more than one button you can't use ID ATTRIBUTE but you have to use CLASS. Set a data-id attribute so you can pass the value from the database and set an ID to the input so you can take its value also. Try this:
<?php
if(mysqli_num_rows($result)){
while($row = mysqli_fetch_assoc($result)){
print
"<div class='item col-xs`-4 col-lg-4'>".
"<div class='row'>".
"<div class='col-xs-10'>".
"<p class='list-group-item-text'>".
"<input type='text' class='form-control' id='input-" . $row["id"] . "'>".
"<button data-id='". $row["id"] . "' class='mybutton btn btn-success'>Calculate</button>".
"</div>".
"</div>".
"</div>";
}
}
?>
<script type="text/javascript">
$(document).ready(function(){
$(".mybutton").on("click", function(){
var myid = $(this).attr('data-id');
var myinput = $('#input-'+myid).val();
alert("MY ID IS: " + myid);
alert("MY INPUT VALUE IS: " + myinput);
});
});
</script>

jQuery, how to make a on click function work with array to toggle divs based on id?

Here's my code:
foreach($rows as $row)
{
echo '<div class="div-that-toggles-other-div" id="' . $row['unique_id'] .'">';
}
foreach($rows as $row)
{
echo '<div class="div-to-be-toggled" id="uid-' . $row['unique_id'] .'">';
}
The jQuery i've used to toggle the div before wont work when im printing an array of divs where i want only the specific id to open specific div.
$(".div-that-toggles-other-div").click(function () {
$(".div-to-be-toggled").slideToggle(1000);
});
how can i make it toggle depending on id?

Hope this will help you.
$(function(){
$(".div-that-toggles-other-div").click(function () {
var divId = $(this).attr('id');
$("#uid-"+divId).slideToggle(1000);
});
});

dynamic id on anchor not firing on other anchor last anchor php js pdo

<div class="headerimage"><img src="images/events.png"/></div>
<?php
foreach (LoadEvent() as $value){
echo '<div class="dynamicsidemenu eventback">';
echo "<a class=\"event\"id=" .$value['eventsearchresultid']. " href='#' value=" .$value['eventsearchresultid']. ">".$value['eventsearchresultwhat']."</a>";
echo "<br/>\n";
echo $value['eventsearchresultwhen'];
echo "<br/>\n";
echo $value['eventsearchresultwhere'];
echo '</div>';
}
?>
$(document).ready(function(){
var id = $(".event").attr("value");
var a = document.getElementById(id);
a.addEventListener("click", function(event){
event.preventDefault();
alert(this.getAttribute(id));
//var $id = this.getAttribute("value");
$('#leftcolumncontainer').load('pages/upcomingeventsmenu.php');
$('#middlecolumncontainer').load('pages/upcomingeventscontent.php?id=' + id );
});
});
I have here a code o the last 5 entry from database each link goes to details page of each event i was able to make the first link go to detail page but the second link is not firing what is the mistake here.
any help is appreciated

You should define your id inside the click event handler, try this:
$(document).ready(function(){
$(".event").on('click', function (event) {
event.preventDefault();
var id = $(this).attr('id');
$('#leftcolumncontainer').load('pages/upcomingeventsmenu.php');
$('#middlecolumncontainer').load('pages/upcomingeventscontent.php?id=' + id);
});
});

change your anchor tag lines like below:
echo "<a class=\"event\" id=\"" .$value['eventsearchresultid']."\" href=\"#\" value=\"".$value['eventsearchresultid']."\">".$value['eventsearchresultwhat']."</a>";

How to clear content of div container using JS/Jquery?

I have been developing some page and I need to clear a content of some div:
<table>
<tbody>
<div class="records_content">
<?php
$i=0;
foreach ($records as $record) {
echo "<tr class = 'output' style='border-bottom: 1px dotted silver;'>";
echo "<td width='400'>" . strip_tags($record['language_value']) . "</td>";
if ($record['approved_translation'])
{
echo "<td width='200' height='30'><div class='field' id='".$record['label_value']."/".$record['language_id']."'>".
strip_tags($record['approved_translation']['language_value'])."</div></td><td><button class='btn btn-info' id='{$record['label_value']}/{$record['language_id']}' href='#'>More...</button>"."</td>";
}
else
{
echo "<td width='200'>"."<div id='".$record['label_value']."/".$record['language_id']."'><span class='no_translate'>Not translated</span></div>" . "</td>";
}
echo '</tr>';
$i++;
}
?>
</div>
</tbody>
</table>
Piece of JS code:
$(".page_button").click(function () {
$.post("http://"+document.location.host+"/index.php/welcome/update_records_set/"+this.id,
function(data)
{
alert('123');
$(".records_content").empty();
});
});
This script works, because I see '123' notification, but div container with '.records_content' class isn't clear. Please, tell me, how can I fix it? Thank you.
UPDATE:
Now it works. But I have a new problem with pagination:
<br><b>Page:</b><br/>
<?php
for($i=0; $i<$count; $i++)
{
if ($i==0)
{
echo "<div class='selected_page_button'>".($i+1)." "."</div>";
}
else
{
echo "<div class='page_button'>".($i+1)." "."</div>";
}
}
?>
And code for changing class of button:
$(".page_button").click(function () {
$(".selected_page_button").attr("class", "page_button");
$(this).attr("class", "selected_page_button");
});
It works correctly for all buttons without first. When my page is created the first page is selected. When I click by "2", then "1" is simple and "2" is selected. The same thing is with all buttons without "1": if I click by "2" (or other one) then I can't click by first! "1" changes it's view but doesn't change behavior, because simple button is clickable and selected button is not clickable!

It does clear using .empty() as your code already states, except that it clears after the alert. See here: http://jsfiddle.net/YPLeB/
After you click "OK", the DIV is cleared as expected.

Try this:
$(".records_content").html('');

You'll see the alert happening before the HTML is emptied. Try placing the alert after the .empty() function or use a non-blocking command such as console.log() to debug your code.
Your code itself is correct... only the ordering of the commands is tripping you up...