We Keep Coding

Desired values not displaying after first entry in the table using Javascript and MySQL

I am trying to get data from 2 tables in a mysql database. One of which has the id, name, surname, number and gender. The second table has id, product_name and price.
The first table information gets displayed in a html table with a drop down, that has a edit button.
The table gets populated with a while loop.
Once you click edit, a modal open with the name of the person and a drop down with all the products available, once you click on a product then it displays the product price.
My issue is that it only works with the first entry in the database where i can click on the product and it displays the price, anything after the first entry in the table, it does not want to display the price. Here is my code:
Table
<table>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Phone Number</th>
<th>Gender</th>
</tr>
<?php
$sql = "SELECT * FROM test_table";
$result = $db->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while ($row = $result->fetch_assoc()) {
?>
<tr>
<td><?php echo $row["name"]; ?></td>
<td><?php echo $row["surname"]; ?></td>
<td><?php echo $row["phone_number"]; ?></td>
<td><?php echo $row["gender"]; ?></td>
<td><ul class="t-dropdown-list">
<a data-toggle="modal" data-target="#SetProductCustomer<?= $row["id"]; ?>"><li class="t-dropdown-item">Edit</li></a>
</ul></td>
</tr>
<div class="modal fade" id="SetProductCustomer<?= $row["id"]; ?>" class="" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-content">
<span class="close">×</span>
<p><?php echo $row['name']; ?> </p>
<select style="width: 100%;" name="" id="product_info" class="browser-default custom-select-new">
<?php
$records = mysqli_query($db, "SELECT * FROM products");
while ($data = mysqli_fetch_array($records)) {
echo '<option value="' . $data['product_name'] . '"
data-price="' . $data['price'] . '" >'
. $data['product_name'] . '</option>';
}
?>
</select>
<input type="text" name="price" id="price"/>
</div>
</div>
<?php
}
}
?>
</table>
SCRIPT TO GET THE PRICE
<script>
var mySelect = document.getElementById("product_info");
mySelect.addEventListener("change", function() {
var myNewOption = mySelect.options[mySelect.selectedIndex].getAttribute("data-price");
document.getElementById('price').value = myNewOption;
});
</script>

Okay so i appended the following to the ID in the select field and in the price input, which made it work.
<select style="width: 100%;" name="" id="product_info<?= $row["id"]; ?>"" class="browser-default custom-select-new">
<input type="text" name="price" id="price<?= $row["id"]; ?>"/>
and then just adjusted my Javascript to get those values
<script>
var mySelect = document.getElementById("product_info1");
mySelect.addEventListener("change", function() {
var myNewOption = mySelect.options[mySelect.selectedIndex].getAttribute("data-price");
document.getElementById('price1').value = myNewOption;
});
</script>
<script>
var mySelect = document.getElementById("product_info2");
mySelect.addEventListener("change", function() {
var myNewOption = mySelect.options[mySelect.selectedIndex].getAttribute("data-price");
document.getElementById('price2').value = myNewOption;
});
</script>

How to use PHP loop variable in javascript?

I have run an SQL statement to get all the records I need to show in a HTML table.
I have then run a while loop to display the records from the database. (The code for this is below.)
<table class="projects-table">
<tr>
<th>Complete?</th>
<th>Paid?</th>
<th>Project Name</th>
<th>£ / hr</th>
<th>End Date</th>
<th>Hours Logged</th>
<th><i class="fa fa-trash"></i></th>
</tr>
<?php
$select_id_jobs = mysqli_query($mysqli, "SELECT id FROM users WHERE username='$login_user'");
while($row = mysqli_fetch_array($select_id_jobs)) {
$id_jobs = $row['id'];
}
$select_jobs_with_usrid = mysqli_query($mysqli, "SELECT * FROM jobs WHERE username_id = '$id_jobs';");
while($row = mysqli_fetch_array($select_jobs_with_usrid)) {
?>
<tr id="<?php echo $rowId; ?>">
<td>
<!-- Complete Checkbox -->
<input type="checkbox" id="<?php echo $completeCheck;?>" onclick="compTask();">
</td>
<td>
<!-- Paid checkbox -->
<input type="checkbox" onclick="paidTask()">
</td>
<td>
<?php echo $row['project_title']; ?>
</td>
<td>
<?php echo $row['cost_hour']; ?>
</td>
<td>
<?php echo $row['completion_date']; ?>
</td>
<td>
<?php echo $row['time_spent']; ?>
</td>
<td>
<div class="delete-btn"><a onclick="deleteTask()">DELETE</a></div>
</td>
</tr>
<?php } ?>
</table>
As you can see from the checkbox for completing a task. What I want to do is use javascript so that when the checkbox is checked the text from the other records turns green.
I have included the javascript I am trying to use below. I don't know why but I can't access the inputs ID in order to change the css.
<script>
function compTask() {
if (document.getElementById("<?php echo 'complete-' . $row['id'] ?>").checked == true) {
document.getElementById("<?php echo 'tr' . $row['id']; ?>").style.color = "green";
alert("hello");
} else {
document.getElementById("<?php echo 'tr' . $row['id']; ?>").style.color = "black";
}
}

Okay easy way to do that is to print id as parameter in js function
something like that:
<input type="checkbox" id="<?php echo $completeCheck;?>"
onclick="compTask( '<?php echo $row['id'];?>' );">
and in js function deal with id from parameter:
function compTask(id) {
if (document.getElementById('complete-' + id).checked == true) {
document.getElementById('tr' + id).style.color = "green";
alert("hello");
}
}

Hy,
You need to add id in onclick="deleteTask('<?php echo $row['id']; ?>')">
Now in you function have id:
function deleteTask(id) { console.log(id) }

how to use hide show in while loop with different ids

HTML
while($row=mysql_fetch_array($result_pag_data)) {
$ad++;
$sql1=mysql_query("select *from company where com_id='$row[com_id]'");
$row1=mysql_fetch_array($sql1);
?>
<tr>
<input type="hidden" id="comid" name="comid" value="<?php echo $row1[com_id];?>"/>
<tr>
<td><img src="images/mobile.png" width="18" height="18" border="0" alt="Mobile"></td>
<td class="comm-details"><strong>Mobile</strong></td>
<td align="center">:</td>
<td class="comm-details"><?php if($row1['mobile1']!='') { ?> <a id="showmobile<?php echo $row1[com_id];?>">View Mobile Number</a> <span id="shwmb<?php echo $row1[com_id];?>" style="display:none"><?php echo $row1['mobile1'];}else{ echo 'Not Available';}?></td>
</tr>
}
Javascript
<script>
$(function () {
var comid = $('#comid').val();
$("#showmobile" + comid).click(function() {
$("#shwmb" + comid).show();
$("#shwmb" + comid).hide();
});
});
</script>
Now I want to show the mobile number when the customer clicks on View Mobile Number. It currently only works on the first viewed company, not for subsequent companies.
When I change the event handling to listen to the class instead of the id, clicking on any one company's View Mobile Number will display the mobile numbers of all companies on the page.
Neither solution is working properly. What am I doing wrong, and how do I make this work?

Change your code as like below:
<?php
$ad = 0;
while ($row = mysql_fetch_array($result_pag_data)) {
$ad++;
$sql1 = mysql_query("select *from company where com_id='$row[com_id]'");
$row1 = mysql_fetch_array($sql1);
?>
<tr>
<input type="hidden" id="comid" name="comid" value="<?php echo $row1[com_id]; ?>"/>
<tr>
<td><img src="images/mobile.png" width="18" height="18" border="0" alt="Mobile"></td>
<td class="comm-details"><strong>Mobile</strong></td>
<td align="center">:</td>
<td class="comm-details">
<?php if ($row1['mobile1'] != '') { ?>
<a id="showmobile<?php echo $row1[com_id]; ?>" onclick="return showmobile(<?php echo $row1[com_id]; ?>)">View Mobile Number</a>
<span id="shwmb<?php echo $row1[com_id]; ?>" style="display:none">
<?php echo $row1['mobile1']; ?>
</span>
<?php
} else {
echo 'Not Available';
}
?>
</td>
</tr>
<?php }
?>
<script>
function showmobile(id) {
if($("#shwmb" + id).css('display') == 'none') {
$("#shwmb" + id).show();
}else {
$("#shwmb" + id).hide();
}
}
</script>

You have to put unique value in the ID or CLASS of the line.
<input type="hidden" id="comid<?php echo $row['ID']?>" name="comid" value="<?php echo $row1[com_id];?>"/>
and after that in the javascript code you just specify the id along with the id_name and id_value.

This might work for your purpose:
while($row=mysql_fetch_array($result_page_data)) {
$ad++;
$sql1=mysql_query("select *from company where com_id='$row[com_id]'");
$row1=mysql_fetch_array($sql1);
?>
<tr>
<td>
<input type="hidden" id="input-<?php echo $row1[com_id];?>" name="input-<?php echo $row1[com_id];?>" value="<?php echo $row1[com_id];?>"/>
<img src="images/mobile.png" width="18" height="18" border="0" alt="Mobile">
</td>
<td class="comm-details"><strong>Mobile</strong></td>
<td align="center">:</td>
<td class="comm-details"><?php if($row1['mobile1']!='') { ?> <a id="showmobile<?php echo $row1[com_id];?>" class="showmobile">View Mobile Number</a> <span id="shwmb<?php echo $row1[com_id];?>" style="display:none"><?php echo $row1['mobile1'];}else{ echo 'Not Available';}?></td>
</tr>
}
<script>
$(function () {
$(".showmobile").click(function() {
var comid = $(this).attr("id").replace("showmobile","");
$("#shwmb" + comid).toggle();
});
});
</script>
The first change is to use $row1[com_id] in the id and name attributes for the hidden input field. This will allow the hidden fields to be separate from one another, as id has to be unique on a page; name should also be unique.
Next, a class was added to the showmobile link, so that we can install a single class-level click handler. The click handler will extract the com_id from the showmobile element and use it to change the visibility of the shwmb element, using jQuery toggle.
Some light restructuring has been done and some significant reformatting. The hidden input field was added to the first td element, so that it doesn't interfere with the structure of the table.
Also, the $result_page_data variable name was corrected.

Execute PHP inside SCRIPT TAG

I have a listbox that displays a couple of internships under following format
id - name :
1 - Computer Science
So far, I have create the function addRow in order to update my fields from form.
If I do
alert($montext)
I can display "1 - Computer Science", but I am looking only for the value "1".
I tried :
alert(<?php substr($montext,0,2)?>);
But seems that php inside "script" isn't being executed.
Because following code changes the value in the field:
document.getElementById('ti').value=$montext;
Because I'd like also to execute php code inside the script TAG.
I'm running under Apache.
If you could help me out. Thanks
Find hereby the used code.
<html>
<head>
<script>
function addRow(title,text,description,id) {
$montext=$( "#idStage option:selected" ).text();
alert($montext);
document.getElementById('ti').value=$montext;
/*document.getElementById('te').value=text;
document.getElementById('de').value=description;
document.getElementById('id').value=id;*/
}
function setText(title,text,description,id){
document.getElementById('title').value=title;
document.getElementById('text').value=text;
document.getElementById('description').value=description;
document.getElementById('id').value=id;
}
</script>
</head>
<body>
<?php
include('../admin/connect_db.php');
?>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<label class="notBold">Choose the internship you want to update: </label>
<select name="idStage" id="idStage" onChange="addRow()">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
while($stmt->fetch()){
?>
<option id="nostage" value="<?php echo$id;?>" onclick="setText('<?php echo $title ?>',' <?php echo $text ?> ',' <?php echo $description ?>',' <?php echo $id?>');"><?php echo $id." - ".$title;?></option>
<?php
}
$stmt->close();
}
?>
</select>
</td>
<td width="20">
<img src="./Image/exit.png" title="Close" id="closeDelete" class="closeOpt" onclick="closeOpt()" />
</td>
</tr>
</table>
<form method="post" action="modifystage.php">
<table>
<tr>
<td>
<input type = "hidden" id ="id" name="id"/>
</td>
</tr>
<tr>
<td class="label">
<label>Title </label>
<textarea id = "ti" name="ti" rows = "3" cols = "75">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
}
echo $title;
?>
</textarea>
</td>
</tr>
<tr>
<td class="label">
<label>Desc</label>
<textarea id = "de" name="de" rows = "3" cols = "75">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
}
echo $description;
?>
</textarea>
</td>
</tr>
<tr>
<td class="label">
<label>Text </label>
<textarea id = "te" name="te" rows = "3" cols = "75">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
}
echo $text;
?>
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="right"colspan="2" class="label">
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
</body>
</html>

You don't need to use PHP here. Use the javascript substring function - http://www.w3schools.com/jsref/jsref_substring.asp
For example
alert(montext.substring(0, 2));

Write your <script> on bellow your PHP and try this :
<script>
function addRow(title,text,description,id) {
var montext = $( "#idStage" ).text();
alert(montext);
document.getElementById('ti').value(montext);
/*document.getElementById('te').value=text;
document.getElementById('de').value=description;
document.getElementById('id').value=id;*/
}
function setText(title,text,description,id){
document.getElementById('title').value=title;
document.getElementById('text').value=text;
document.getElementById('description').value=description;
document.getElementById('id').value=id;
}
</script>
If you want to call variable from PHP, don't forget to use echo like this :
alert("<?php echo substr($montext,0,2); ?>");

How to pass PHP value to Javascript and redirect to other page?

Why is it that I cant pass a value from my PHP code to an OnClick function on my button to my javascript function depCheck2()? I would like to redirect it to 2 different pages depending on the value it carries. Could anyone please help me?
<html>
<head>
<?php
$company_id = $_GET['cont'];
$query = "SELECT count(Department_ID) as countDep FROM department WHERE Company_ID=$company_id";
$result = mysql_query($query, $db) or die(mysql_error($db));
$row = mysql_fetch_array($result);
extract($row);
?>
<script>
function depCheck2(x){
var CountRow = '<?php echo "$countDep";?>';
if (CountRow>0){
window.location.assign("editEvent.php?id="+x"");
}
else{
window.location.assign("editEvent.php2?id="+x"");
}
}
</script>
</head>
<body>
<?php
include("config.php");
$company_id = $_GET['cont'];
$query = "select * from event_details where Company_ID=".$company_id." ORDER BY EventDetails_ID DESC";
$result=mysql_query($query, $db) or die(mysql_error($db));
echo "<table border=1 width='1000'>";
echo "<tr><th>Serial Number</th><th>Status</th><th>Event Type</th><th>Date of Event</th><th>End Date</th><th>Details</th></tr>";
while ($row = mysql_fetch_array($result))
{
extract($row);
echo "
<tr>
<td align='center'>$EventDetails_ID</td>
<td align='center'>$Status</td>
<td align='center'>$EventType</td>
<td align='center'>$StartDate</td>
<td align='center'>$EndDate</td>
<td align='center'>
<input type='button' value='Details' class='btn btn-large btn-primary' onClick='depCheck2(\''.$EventDetails_ID.'\')'>
</td>
</tr>
";
}
?>
</table>
</body>
</html>

At first: <?php echo "$countDep";?> contains $countDep which is not defined in PHP.
It is only present in the DB Query but you haven't assigned it to any variable from the $result
Then window.location.assign("editEvent.php?id="+x""); the syntax is wrong.
You have extra quotes at the end.
It should be window.location.assign("editEvent.php?id="+x);

Try this one:
window.location.href ="editEvent.php2?id="+x;