Develop Reference

PHP Looped Array, jquery to print each id value

So far I have managed that when a button is clicked it will print all values within the array. I need it to be smarter and only print the value of the element clicked.
<?php
$Arr_shoppingList = array(
array("Volvo",22,18,0),
array("BMW",15,13,1),
array("Saab",5,2,2),
array("Land Rover",17,15,3)
);
//Looped through array and printed values
foreach ($Arr_shoppingList as $value) {
echo "<div class='ColumnRow Spacing Color2 Border'>";
echo "<h1> $value[0] </h1> <br>";
echo "<p>'MPG'. $value[1]</p> <br>";
echo "<p>'Stock' . $value[2]</p> <br>";
echo "<form method='GET'>";
echo "<button class='Border' type='submit' id='$value[0]' class='Button'> $value[0]
</button>";
echo "</form>";
echo "</div>";
}
?>
<script>
$('button').on('click', function (event) {
event.preventDefault()
$('button').each(function(index, value){
console.log(value.id)
})
});
</script>
EDIT: The first section has been completed many thanks, but similarly, but I also need the stock and MPG values to also be targeted, how would I go about incorporating that into this code? this is part of a checkout basket I'm attempting to create.

You can use event.target.id to get the id of the clicked element
<?php
$Arr_shoppingList = array(
array("Volvo",22,18,0),
array("BMW",15,13,1),
array("Saab",5,2,2),
array("Land Rover",17,15,3)
);
//Looped through array and printed values
foreach ($Arr_shoppingList as $value) {
echo "<div class='ColumnRow Spacing Color2 Border'>";
echo "<h1> $value[0] </h1> <br>";
echo "<p>'MPG'. $value[1]</p> <br>";
echo "<p>'Stock' . $value[2]</p> <br>";
echo "<form method='GET'>";
echo "<button class='Border' type='submit' id='$value[0]' class='Button'> $value[0]
</button>";
echo "</form>";
echo "</div>";
}
?>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$('button').on('click', function (event) {
event.preventDefault()
console.log(event.target.id);
});
</script>

How to Take value from buttons with same class Using JQuery

I have a PHP script which Produces the n number of buttons as an output based on database records. Each value is associated with a respective button.
When I click any button, I always get the value of first button.
How can I get the value of button which is clicked only?
<button class='btn btn-danger question_delete' value=".$row['action_id']."</button>
My jQuery script:
$(document).ready(function(){
$(".question_delete").click(function(){
var action_value = $(this).val();
if(action_value){
$.ajax({
type:'POST',
url:'delete_question_group.php',
data:{delete_action:action_value},
success:function(data){
refresh_table();
refresh_paper();
}
});
}else{
// $('#select_qtype_list').html('<option value="">Select Question First</option>');
}
});
});
My PHP:
<?php
session_start();
$name =$_SESSION['name'];
$id = $_SESSION['id'];
include("database.php");
$run = mysqli_query($conn,"select * from users where id='$id' AND name='$name' ");
$user = mysqli_fetch_array($run);
$subject_id = $user['subject_id'];
$user_name = $user['name'];
$run1 = mysqli_query($conn,"select * from subject where sub_id='$subject_id'");
$subject = mysqli_fetch_array($run1);
$subject_name = $subject['sub_name'];
$query = $conn->query("select * from action where subject_id='$subject_id' AND user_id='$id'");
//Count total number of rows
$rowCounts = $query->num_rows;
//Display states list
if($rowCounts > 0){
$i=1;
while($row = $query->fetch_assoc()){
//echo '<option value="'.$row['qtype_id'].'">'.$row['qtype_name'].'</option>';
echo "<tr>";
//$q_id = $query['question_id'];
//$question_type_id = $query['question_type_id'];
echo "<td>$i</td>";
echo "<td>".$row['action_name']."</td>";
echo "
<td>
<button class='btn btn-danger question_delete' value=".$row['action_id'].">
<i class='fa fa-trash' aria-hidden='true'>
</i>
</button>
</td>
<td>
<button id='question_update' class='btn btn-primary' data-toggle='modal' data-target='#myModal_update' value=".$row['action_id'].">
<i class='fa fa-pencil' aria-hidden='true' >
</i>
</button>
</td>
</tr>
";
$i++;
}
}else{
echo '<td colspan="4" style="text-align: center; color:red;"><strong>No Questions are Selected</string></option>';
}
?>

Probably because the property action_id inside the value on each button don't change. Also you forgot to close the button tag, maybe that's why it doesn't work
<button class='btn btn-danger question_delete' value=".$row['action_id']."></button>

-This Problem is Solved and Worked Perfectly. Description of solution is as follow:
-First onclick attribute is used. and a function is created which takes the value of button each time when button will click.
Following Code is worked:
<button class='btn btn-danger' onclick='myfunction(this.value)' id='question_delete' value=".$row['action_id']."><i class='fa fa-trash' aria-hidden='true'></i></button>
JQuery Code:
$(document).ready(function(){
myfunction1 = function(e){
if(e){
$.ajax({
type:'POST',
url:'update_question_group.php',
data:{update_action:e},
success:function(html){
$('#update_action_list').html(html);
$('#update_action_list').selectpicker('refresh');
}
});
}else{
// $('#select_qtype_list').html('<option value="">Select Question First</option>');
}
}
});

How to add font awesome icon dynamically based on some data

Is it possible to change/add a font awesome icon based on the fetched data?
If the type is .pdf the font awesome will be <i class="fa fa-file-pdf-o"> else if type is .docx it will be <i class="fa fa-file-word-o"></i>. Can someone give me ideas how to do it? What will i use? Javascript or PHP?
here's some of my code.
<div class="col-sm-6 col-md-6">
<?php
$sql ="SELECT * FROM lectures WHERE subj_descr = '$subj'";
$result = mysqli_query($con, $sql);
while($row = mysqli_fetch_array($result)){
$file = $row['file'];
$type = $row['type'];
?>
<a style="display:block; margin-top:5px;" href="uploads/<?php echo $file ?>" target="_blank"><i class="fa fa-file-word-o"></i> <?php echo $file; ?></i></a>
<?php
}
?>
</div>

Try something like this:
<?php
if($type = $row['type'] == 'pdf') // make <i> tag on behalf of condition
{
echo '<i class="fa fa-file-pdf-o">'. your text here .'</i>';
}
else if($type = $row['type'] == 'txt')
{
echo '<i class="fa fa-file-word-o">'. your text here .'</i>';
}
?>

First of all, best practice is to separate your presentation from your logic. Having a mysql query right smack in the middle of your HTML is not a good idea. Instead put your query before your HTML and loop over the results in the HTML.
Put something like this before your HTML:
$files = [];
while($row = mysqli_fetch_array($result)){
$file['filename'] = $row['file'];
$file['type'] = $row['type'];
switch($file['type']) {
case 'pdf':
$file['fa'] = 'fa-file-pdf-o';
break;
case 'docx':
case 'doc':
$file['fa'] = 'fa-file-word-o';
break;
default:
throw new Exception('Invalid file type'); // Handle this how you want
}
$files[] = $file;
}
Then within your HTML loop over the result:
<div class="col-sm-6 col-md-6">
<?php
foreach ($files as $file) {
?>
<a style="display:block; margin-top:5px;" href="uploads/<?php echo $file['filename'] ?>" target="_blank">
<i class="fa <?php echo $file['fa'];?>"></i> <?php echo $file['filename']; ?></i>
</a>
<?php
}
?>
</div>

You can also use a switch here.
switch(strtolower($row['type'])){
case 'pdf':
$icon = "fa-file-pdf-o";
break;
default:
$icon = "fa-file-word-o";
break;
}
echo "<i class='fa ". $icon ."'>". your text here ."</i>";
Note: You can use a variable value to your text as well. Which will then also go inside the switch case.

you can also do like this.put less code in html.
<?php
$row['type']=='pdf'?'pdf':'txt';
?>
<i class="fa fa-file-<?=$row['type']?>-o"></i>;

Add the following function to your page. If you need to add additional file types/icons you can add more elements to the array $fa in "new_file_type" => "fa-icon-name". Just don't forget the commas . Arrays
<?php
function getFa($type){
$fa = array(
"pdf" => "fa-file-pdf-o",
"docx" => "fa-file-word-o"
);
return isset($fa[$type]) ? $fa[$type] : '';
}
?>
Then in the HTML it can be used like this:
<i class="fa <?php echo getFa($type); ?>"></i> <?php echo $file; ?></i>
The function is not necessary but it'll prevent errors in case the $type variable is empty or the file type is not contained in the array.
It is also possible to just create an array and call it from your code if you're certain that the file type will always exist and it will have an element associated in the array.
Example:
<?php
$fa = array(
"pdf" => "fa-file-pdf-o",
"docx" => "fa-file-word-o"
);
?>
In HTML:
<i class="fa <?php echo $fa[$type]; ?>"></i> <?php echo $file; ?></i>

Replacing Class of <a> </a> Base On Status

I am trying to change the class of anchor tag of my html and php code.
This is the screenshot:
And below is php code for that screenshot
Here is my PHP code:
<?php echo "<td>{$id}</td>" ?>
<?php echo "<td>{$ontrack_websiteName}</td>" ?>
<?php echo "<td>{$ontrack_url}</td>" ?>
<?php echo "<td>{$ontrack_geography}</td>" ?>
<?php echo "<td>{$ontrack_Comment}</td>" ?>
<?php echo "<td><a class='btn btn-success' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span></a>
</td>" ?>
<?php echo "<td width='100px'><a class='btn btn-warning btn-sm' href='archiveProcess.php?id={$id}' role='button'><span class='glyphicon glyphicon-save-file' aria-hidden='true'></span></a>
<a class='btn btn-danger btn-sm' href='delete_websiteOntrack.php?id={$id}' role='button'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></a></td>" ?>
There is two values coming from "Status" column. One is "Enable" and another is "Disable". When user click "Enable" green link. It will change the value in DB as "Disable" and show "Disable". When it show "Disable", i would like to change the background as "btn btn-danger" class so that the background will become red.
But currently. It only show as green background as show below:
Pleae kindly help me. I trying to do different way but always failed :(

You can Do something like below
on success and When it show "Disable" :
$( "#btn-change" ).removeClass( "btn-success" );
$( "#btn-change" ).addClass( "btn-danger" )
Let btn-change is an id of that button.

Okay, so first of all you should not use so many <?php ?> tags.
What you are actually looking for is a simple if-statement:
<?php
//if status is enable, set button class to success
if($ontrack_status == "Enable"){
$btn_class = "success";
}else{
$btn_class = "danger"; //else set it to danger
}
//put btn class into the string:
echo "<td>{$id}</td>
<td>{$ontrack_websiteName}</td>
<td>{$ontrack_url}</td>
<td>{$ontrack_geography}</td>
<td>{$ontrack_Comment}</td>
<td> <!-- set button class here-->
<a class='btn btn-{$btn_class}' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span>
</a>
</td>
<td width='100px'>
<a class='btn btn-warning btn-sm' href='archiveProcess.php?id={$id}' role='button'>
<span class='glyphicon glyphicon-save-file' aria-hidden='true'></span>
</a>
<a class='btn btn-danger btn-sm' href='delete_websiteOntrack.php?id={$id}' role='button'>
<span class='glyphicon glyphicon-trash' aria-hidden='true'></span>
</a>
</td>";
?>

I don't exactly get why you're using a new echo and opening and closing PHP on each line. You could just do
<?php
echo "<td>{$id}</td>
<td>{$ontrack_websiteName}</td>
<td>{$ontrack_url}</td>...
Apart from that, to answer your question, you'll need to use an if-statement. So for example:
if($ontrack_status == 'Disable') {
echo "<td><a class='btn btn-success' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span></a>
</td>"
}else{
echo "<td><a class='btn btn-danger' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span></a>
</td>"
}
A nicer solution would be to use shorthands
echo "<td><a class='btn btn-".($ontrack_status == 'Disabled' ? 'success' : 'danger')."' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span></a>
</td>"

<script type="text/javascript">
var status = <?= $ontrack_status ?>;
$(document).ready(function() {
if(status == "Enable"){
$("a").addClass("btn-success");
$("a").removeClass("btn-danger");
} else {
$("a.status").addClass("btn-danger");
$("a.status").removeClass("btn-success");
});
<a class="status " href=""></a>

Add confirm Popup

I have this code in line:
$action = "window.location = 'fruit_list.php.php?do=delete&id={$fruitdata['id']}";
echo '<a style="cursor: pointer" onclick="javascript:' . $action . '">Delete</a>';?>
Is there a way to add below code to make confirm box popup when link clicked?
onclick="return confirm('are you sure?')"

You don't need to add return to the onclick, just
<a href='#' onclick='confirm("Are you sure?")'> Click </a>
http://jsfiddle.net/PFKFq/1/

$action = "if(window.event) event=window.event; event.preventDefault();if (confirm('Are you sure?')){window.location = 'fruit_list.php.php?do=delete&id={$fruitdata['id']} }";
echo '<a style="cursor: pointer" onclick="javascript:' . $action . '">Delete</a>';?>

Why you don't use href ?
<?php
$link = "fruit_list.php?do=delete&id={$fruitdata['id']}";
echo "<a href='{$link}' onclick='return confirm(\"Delete ?\");'>Delete</a>";