I continue with my new website and I'm trying the bootstrap framework and I would like modify a row, its fields, from a bootstrap modal window. At moment I show a modal windows with fields but I don't know to include the data from the row of the table :(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AddCloud - Producció</title>
<!-- INCLUDES -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap-table/dist/bootstrap-table.css">
<link rel="stylesheet" href="assets/bootstrap-editable/css/bootstrap-editable.css">
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="assets/bootstrap-editable/js/bootstrap-editable.js"></script>
</head>
<body>
<!-- SESSION PHP OK -->
<?php
session_start();
if(isset($_SESSION['username']) and $_SESSION['username'] <> ''){
?>
<!-- NAVIGATION -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="http://www.addvantage.es"><font color=#8abe44>AddCloud</font></a></div>
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active">Producció<span class="sr-only">(current)</span></li>
<li>Menu2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> <?php echo $_SESSION['username'] ?></a>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-wrench"></span> preferències</li>
<li><span class="glyphicon glyphicon-lock"></span> canviar password</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-log-out"></span> log out</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- TABLE -->
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">Miquel Alimentació</h1>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row text-center">
<div class="col-md-6 col-md-offset-3"><h3>Edició 12</h3></div>
</div>
<hr>
<div class="row">
<?php
// Conexió a la base de dades
include("connect.php");
$conn = Conectarse("localhost", "5432", "dbname", "dbuser", "dbpass");
//query
$query = "SELECT * FROM produccion.ma_origen ORDER BY id_articulo ASC";
$result = pg_query($conn, $query);
//se despliega el resultado
echo "<table id='tableprod'
data-toggle='table'
data-toolbar='#toolbar'
data-show-refresh='true'
data-show-toggle='true'
data-sort-name='name'
data-sort-order='desc'
data-show-columns='true'
data-pagination='true'
data-search='true'
data-click-to-select='true'>";
echo "<thead class='thead-inverse'>";
echo "<tr>";
echo "<th data id='seleccion' data-switchable='false' data-checkbox='true'></th>";
echo "<th data id='pagina' data-sortable='true'>pagina</th>";
echo "<th data id='codigo' data-sortable='true' data-switchable='false'>codigo</th>";
echo "<th data id='descripcion' data-sortable='true' data-switchable='false'>descripcion</th>";
echo "<th data id='pvp-cat' data-sortable='true'>pvp-cat</th>";
echo "<th data id='pvp-lev' data-sortable='true'>pvp-lev</th>";
echo "<th data id='pvp-and' data-sortable='true'>pvp-and</th>";
echo "<th data id='pvp-cen' data-sortable='true'>pvp-cen</th>";
echo "<th data id='pvp-nor' data-sortable='true'>pvp-nor</th>";
echo "<th data id='pvp-vas' data-sortable='true'>pvp-vas</th>";
echo "<th data id='fecha-mod' data-sortable='true'>fecha-mod</th>";
echo "<th data id='user' data-sortable='true' data-visible='false'>user</th>";
echo "<th data id='edit' data-sortable='false' data-switchable='false'>edit</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while ($row = pg_fetch_row($result)){
echo "<tr>";
echo "<td></td>";
echo "<td>$row[2]></td>";
echo "<td>$row[3]</td>";
echo "<td>$row[4]</td>";
echo "<td>$row[5]</td>";
echo "<td>$row[6]</td>";
echo "<td>$row[7]></td>";
echo "<td>$row[8]</td>";
echo "<td>$row[9]</td>";
echo "<td>$row[10]</td>";
echo "<td>$row[11]</td>";
echo "<td>$row[12]</td>";
echo "<td><p data-placement='top' data-toggle='tooltip' title='Edit'><button class='btn btn-primary btn-xs' data-title='Edit' data-toggle='modal' data-target='#edit' ><span class='glyphicon glyphicon-pencil'></span></button></p></td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
?>
</div>
</div>
<hr>
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<p>Copyright © 2016 · All Rights Reserved · <a href="http://www.addvantage.es/" >http://www.addvantage.es</a></p>
</div>
</div>
<hr>
</div>
<!-- MODAL MENU -->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Editar registre</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder="Pàgina">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Codi">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Descripció">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="pvp-cat">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="pvp-lev">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="pvp-and">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="pvp-cen">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="pvp-nor">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="pvp-vas">
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
</div>
</div>
<!-- SESSION PHP ERROR -->
<?php
} else{
?><p>La sesión no está activa, por favor ingrese aquí</p>
<?php
}?>
</body>
</html>
I use php to connect to database and add data into the table. My idea is from a edit button can modify this fields from a modal window. After that I would like to update database.
I'm not sure if this is the best way, I haven't a experience programming from web environment.
Please Could you help me to modify this data-fields from windows modal?
Thanks!
The way to try to do is correct. What you have to do is on clicking Edit link find the closest tr and find all the td that tr contain. Read td one by one the assign it to the text box.
Below is the code:
$('.edit').click(function(){
var $row = $(this).closest("tr"), $tds = $row.find("td"); //This will all the tds we need.
$.each($tds, function() {
$('#txtbox').val($(this).text()); //textbox in the modal window
});
});
The above code will fill all the values from the row to modal window after that you can modify and submit the form.
First step - identify row somehow. I'm working under assumption that $row[0] is the id of that row in the database. If it isn't change the code accordingly.
index.php
while ($row = pg_fetch_row($result)){
echo "<tr id="{$row[0]}">"; // assign id that corresponds to database id to each row
echo "<td></td>";
echo "<td class="pagina">$row[2]></td>";
echo "<td class="codigo">$row[3]</td>";
echo "<td class="descripcion">$row[4]</td>";
echo "<td class="pvp-cat">$row[5]</td>";
echo "<td class="pvp-lev">$row[6]</td>";
echo "<td class="pvp-and">$row[7]></td>";
echo "<td class="pvp-cen">$row[8]</td>";
echo "<td class="pvp-nor">$row[9]</td>";
echo "<td class="pvp-vas">$row[10]</td>";
echo "<td class="fecha-mod">$row[11]</td>";
echo "<td class="user">$row[12]</td>";
echo "<td>
<p data-placement='top' data-toggle='tooltip' title='Edit'>
<button class='edit' class='btn btn-primary btn-xs' data-title='Edit' data-toggle='modal' data-target='#edit'>
<span class='glyphicon glyphicon-pencil'></span>
</button>
</p>
</td>";
echo "</tr>";
}
Second, set jquery click event to copy values from rows and fill the modal input fields with correct values:
JQUERY
$('.edit').click(function(){
var row = $(this).closest("tr"), // edit button is in the same row as data you want to change
tds = row.find("td"); // get all table cells in that row
$.each(tds, function(index) {
if( $.inArray(index, [0, 10, 11, 12]) ) { // indexes of cells not to be used when getting data from table cells to edit
return; // skip to next loop iteration if one of these indexes
}
var input_name = $(this).attr("class"); // get name of cell we are evaluating (pagina, codigo, descripcion etc)
$([name='"' + input_name + '"']).val($(this).text()); //input name in the modal window
});
});
I've changed the modal to reflect changes in code above.
MODAL
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Editar registre</h4>
</div>
<form action="/store.php">
<div class="modal-body">
<input type="hidden" name="id" type="text"> <!-- hidden input for id -->
<div class="form-group">
<input class="form-control" name="pagina" type="text" placeholder="Pàgina">
</div>
<div class="form-group">
<input class="form-control" name="codigo" type="text" placeholder="Codi">
</div>
<div class="form-group">
<input class="form-control" name="descripcion" type="text" placeholder="Descripció">
</div>
<div class="form-group">
<input class="form-control" name="pvp-cat" type="text" placeholder="pvp-cat">
</div>
<div class="form-group">
<input class="form-control" name="pvp-lev" type="text" placeholder="pvp-lev">
</div>
<div class="form-group">
<input class="form-control" name="pvp-and" type="text" placeholder="pvp-and">
</div>
<div class="form-group">
<input class="form-control" name="pvp-cen" type="text" placeholder="pvp-cen">
</div>
<div class="form-group">
<input class="form-control" name="pvp-nor" type="text" placeholder="pvp-nor">
</div>
<div class="form-group">
<input class="form-control" name="pvp-vas" type="text" placeholder="pvp-vas">
</div>
</div>
<div class="modal-footer ">
<input type="submit" class="btn btn-warning btn-lg" style="width: 100%;" value="Update">
</div>
</form>
</div>
</div>
</div>
File for storing edited values to the database:
store.php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$id = $_POST['id'];
$pagina = $_POST['pagina'];
$codigo = $_POST['codigo'];
$descripcion = $_POST['descripcion'];
$pvp-cat = $_POST['pvp-cat'];
$pvp-lev = $_POST['pvp-lev'];
$pvp-and = $_POST['pvp-and'];
$pvp-cen = $_POST['pvp-cen'];
$pvp-nor = $_POST['pvp-nor'];
$pvp-vas = $_POST['pvp-vas'];
$sql = "UPDATE produccion.ma_origen SET pagina='{$pagina}',codigo='{$codigo}',descripcion='{$descripcion}',
pvp-cat='{$pvp-cat}', pvp-lev='{$pvp-lev}',pvp-and='{$pvp-and}',
pvp-cen='{$pvp-cen}',pvp-nor='{$pvp-nor}',pvp-vas='{$pvp-vas}'
WHERE id={$id}";
if ($conn->query($sql) === TRUE) {
echo "Record updated successfully";
} else {
echo "Error updating record: " . $conn->error;
}
$conn->close();
?>
Since this was a lot of code to change and I don't have the time and all the data to test this properly you'll have to do it, but this is one of the ways you could solve your problem. Hope it helps.
Related
I have made a bootstrap modal for updating each record in the table individually using a while loop in PHP, but it seems to work only for the first record of the table. I'm not being able to figure out where I'm going wrong. Please help me with it let me know where I'm going wrong.
Here's the code:
<!DOCTYPE html>
<html>
<body>
<?php
$sql = "SELECT * FROM fee_status";
$result = $conn->query($sql);
$i = 1;
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<table>
<tr>
<td width='5%'><?php echo $i++; ?></td>
<td width='20%'><?php echo $row["student_id"]; ?><br><?php echo $row["student_name"]; ?></td>
<td width='10%'><?php echo $row["fee_due"]; ?></td>
<td width='25%'>
<div class="dropdown">
<button class='btn btn-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Actions</button>
<div class='dropdown-menu' aria-labelledby='dropdownMenuButton'>
<a class='dropdown-item' data-toggle='modal' data-target="#myModal<?php echo $row['student_id']; ?>">Update Payment</a>
</div>
</div>
</td>
</tr>
</table>
<div class="modal" role="dialog" id="myModal<?php echo $row['student_id']; ?>">
<div class="modal-dialog" role="document" style="max-width: 65%;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update Payment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="update_payment_form" class="form-group" action="update_fee.php" method="post">
<div class='form-group required'>
<div class="row">
<div class="col-md-6">
Student Details: <input type="text" name="student_details" value='<?php echo $row['student_id']; ?> - <?php echo $row['student_name']; ?>' style='width: 70%;' readonly>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
Amount: <input type="number" name="new_payment" placeholder='<?php echo $row['fee_due']; ?>' style='width: 40%;' required>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
Date: <input id="date-field" type="date" name="date" style='width: 40%;'>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" onclick="form_submit()" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
<?php
}
}
?>
</body>
</html>
I am displaying cards horizontally on the screen. Each card a user can click on it, it rotates to the back side of the card and a button is there [click on it] to display information from mysql database, but it does not work.
I have not been able to find a solution. Tried using JavaScript to pass the information, but did not work.
<script>
function BusinessAdd($Bname) {
document.getElementById('BusName').value = $Bname
reference: //$row['BusinessName'];
}
</script>
<!-- Horizontally scroll the cards
**************************************************************** -->
<!-- read fabcustomerdata Table-->
<?php include "ReadFabCustomerTable.php"; ?>
<div class="middlecontainer">
<div class="row">
<?php
//$query="SELECT * FROM fabcustomerdata";
$result = mysqli_query($connection, $query);
if(!$result) {
die('Query FAILED' . mysqli_error($connection));
}
// - pull thru the Table
while($row = mysqli_fetch_assoc($result)) {
?>
<div class="col-lg-2 col-md-3">
<div class="flip-card"
onclick="this.classList.toggle('hover')">
<div class="flip-card-inner">
<div class="flip-card-front">
<img class='winpane' src="Vend-images/<?
php echo $row["WindowPane"]; ?>" alt=""/>
</div>
<div class="flip-card-back">
<input type="checkbox" class="checkbox"
id="<?php echo $row["checkboxid"];?>"
onclick="myChkBoxFunction('<?php echo $row["checkboxid"];
?>')" data-toggle="tooltip" data-placement="auto"
title="Check Box to save this Card" />
<?php
echo '<address>';
echo '<br />';
echo "<b style='font-
size:1.2rem'>".$row['BusinessName']."</b>";
echo "<br /><br />";
echo $row['OfficeAddress']."<br>";
echo $row['OfficeCity'].",".$row['OfficeState']."
".$row['OfficePostalCode']."<br />";
echo $row['OfficePhNo'];
echo '</address>';
echo "<a href=".$row['website'].">
<h5>Official Website</h5></a>";?>
?>
<span onclick='BusinessAdd("<?php echo
$row['BusinessAddress']; ?>")' type="button" data-
toggle="modal" data-target="#Business-Signup" data-
backdrop="static" data-keyboard="false"> Business
Information</span>
</div>
</div>
</div>
</div>
<?php
}
?>
<button onclick="topFunction()" id="myBtn" title="Go to
top">Top</button>
</div>
</div>
<!-- *********** fill out Business information ********************* -->
<form id="BusinessInformation" > <!-- action="" method="post" -->
<div class="modal animate fade" id="Business-Signup" role="dialog"
aria-labelledby="CenterTitle" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="CenterTitle">
<strong>Business Information:</strong></h5>
<div class="SiteViews">
<label style="color: #0f4471;" class="buslabel"
for="Views">Views: </label>
</div>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span style="margin-right: 25px;" aria-
hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="CompanyInfo">
<ul>
<li>
<br /><label class="buslabel" for="Name">Business Name:
<strong><input id="BusName" value="<?php echo
$row['BusinessName']; ?>" type="text" tabindex="1"
class="businput search" placeholder="Business Name"
size="30" name="Business Name" max="30" required>
</strong>
</label>
Need to be able to click on the button [on back of the card] and open another modal to display data from mysql database about that card.
Need to somehow link the card so that it is associated with the item in the database for that particular card.
I am building a simple blogging application in php and html, and when i generate my modals (using the javascript fetch() command) with database data, the modal trigger does not work. Here is the generation code:
Javascript:
function RetrieveArticles() {
fetch('blog-php/inc/blogOverview/retrieveArticles.php').then(response => response.text()).then(data => {
document.getElementById('container-articles').innerHTML = data;
})
}
Php:
require('../../settings.php');
try{
/* Create a new PDO object */
$connect = new PDO("mysql:host=$databaseHost;dbname=$databaseName",
$databaseUser, $databasePassword);
/* set the PDO error mode to exception */
$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
/* Redirect the user with errorcode 1: "Database settings are incorrect" */
header('location: ../pages/error.php?errcode=1');
exit();
}
$stmnt = $connect->prepare("SELECT * FROM blog_articles NATURAL JOIN article_text;");
$stmnt->execute();
$result = $stmnt->fetchAll(PDO::FETCH_ASSOC);
if(count($result) > 0){
foreach($result as $data){
echo "<div class='row'>";
echo "<div class='collection container-collection'>";
echo "<a class='blog-clicker modal-trigger' href='#$data[article_id]'>";
echo "<p>"."<span class='article-title'>".$data['article_name']."</span>"."<br/>"."By ".$data['article_user'].", ".$data['article_made']."</p>";
echo "</a>";
echo "</div>";
echo "</div>";
echo "<div id='$data[article_id]' class='modal'>";
echo "<div class='modal-content'>";
echo "<h5>".$data['article_name']."</h5>";
echo "<p>".$data['article_text']."</p>";
echo "</div>";
echo "<div class='modal-footer'>";
echo "<div class='divider'></div>";
echo "<button type='button' class='modal-close btn left indigo darken-3'>"."Close Article"."</button>";
echo "</div>";
echo "</div>";
}
}else{
echo "<p class='center-align'>"."No Articles Found"."</p>";
}
And this is how i gets displayed in the webbrowser:
<div id="blog-wrapper">
<div class="c-12" id="container-articles">
<div class="row">
<div class="collection container-collection">
<a class="blog-clicker modal-trigger" href="#art1527884499GuylianWasHier">
<p><span class="article-title">Test Modal 1</span><br>By GuylianWasHier, 2018-06-01 20:21:39</p>
</a>
</div>
</div>
<div id="art1527884499GuylianWasHier" class="modal">
<div class="modal-content">
<h5>Test Modal 1</h5>
<p>This is a simple modal test</p>
</div>
<div class="modal-footer">
<div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
</div>
<div class="row">
<div class="collection container-collection">
<a class="blog-clicker modal-trigger" href="#art1527884802GuylianWasHier">
<p><span class="article-title">12</span><br>By GuylianWasHier, 2018-06-01 20:26:42</p>
</a>
</div>
</div>
<div id="art1527884802GuylianWasHier" class="modal">
<div class="modal-content">
<h5>12</h5>
<p>12</p>
</div>
<div class="modal-footer">
<div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
</div>
<div class="row">
<div class="collection container-collection">
<a class="blog-clicker modal-trigger" href="#art1527884806GuylianWasHier">
<p><span class="article-title">1234</span><br>By GuylianWasHier, 2018-06-01 20:26:46</p>
</a>
</div>
</div>
<div id="art1527884806GuylianWasHier" class="modal">
<div class="modal-content">
<h5>1234</h5>
<p>1243</p>
</div>
<div class="modal-footer">
<div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
</div>
<div class="row">
<div class="collection container-collection">
<a class="blog-clicker modal-trigger" href="#art1527885314GuylianWasHier">
<p><span class="article-title">23</span><br>By GuylianWasHier, 2018-06-01 20:35:14</p>
</a>
</div>
</div>
<div id="art1527885314GuylianWasHier" class="modal">
<div class="modal-content">
<h5>23</h5>
<p>23</p>
</div>
<div class="modal-footer">
<div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
</div>
</div>
<div class="row">
<!-- Form -->
<div class="collection container-collection">
<a class="modal-trigger blog-clicker" href="#createnewarticle">
<p id="title-createnewarticle">Create New Article</p>
</a>
</div>
</div>
The modals get initialized by a script that has the auto-init function from materialize in it (Which loads correctly into the webpage because a modal that has not been generated by php works fine).
Does anyone know how to fix this?.
If you want to have a better look at the code, here is the github repo: https://github.com/GuylianWasHier/Blog.php
You have to reinitialize modals after document.getElementById('container-articles').innerHTML = data;
Try this
function RetrieveArticles() {
fetch('blog-php/inc/blogOverview/retrieveArticles.php').then(response => response.text()).then(data => {
document.getElementById('container-articles').innerHTML = data;
// you can destroy previous instances instance.destroy();
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, {});
})
}
I have this table of data where I am going to get the id of each row and pass it to the modal and the modal will show the further details of the id. For now, when each row is clicked, the modal will pop up and show more of the details. I am also going to do the same with the edit, only have the values in an input type.
Here is the code for the table:
<?php
echo ''.$row[0].'';
$db = mysql_connect("localhost","root");
mysql_select_db("thesis");
$sql = "SELECT * FROM childinfo Order by lastName ASC";
$result = mysql_query($sql);
if(mysql_num_rows($result)>0)
{
while($row = mysql_fetch_row($result)){
if ($childID==$row[0]){
echo '<div class="p-3 mb-2 bg-info text-white text-center rounded"><h6>Childs Basic Information</label></h6></div><br>';
echo '<b>Full Name: </b>'.$row[1].', ' .$row[2]. ' '.$row[3].'<br>';
echo '<b>Gender: </b>'.$row[11].'<br>';
echo '<b>Birthday: </b>'.$row[5].'<br>';
echo '<b>Age: </b>'.$row[6].'<br>';
echo '<b>Name of Main Household: </b>'.$childID.'<br><br>';
echo '<div class="p-3 mb-2 bg-info text-white text-center rounded"><h6>Childs Health Information</label></h6></div><br>';
echo '<b>Height: </b> <input type="text" name="height" class="form-control" value="'.$row[8].'">';
echo '<b>Weight: </b><input type="text" name="weight" class="form-control" value="'.$row[7].'">';
echo '<b>BMI: </b><input type="text" name="bmi" class="form-control" value="'.$row[9].'">';
echo '<b>Date Weighed: </b><input type="date" name="dateWeighed" class="form-control" value="'.$row[13].'">';
echo '<b>Health History: </b><input type="text" name="healthHis" class="form-control" value="'.$row[12].'">';
}}}
?>
Here is the code for my modal:
<div class="modal fade" id="view" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Child Profile</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php
echo ''.$childID.'';
$db = mysql_connect("localhost","root");
mysql_select_db("thesis");
$sql = "SELECT * FROM childinfo Order by lastName ASC";
$result = mysql_query($sql);
if(mysql_num_rows($result)>0)
{
while($row = mysql_fetch_row($result)){
if ($childID==$row[0]){
echo '<div class="p-3 mb-2 bg-info text-white text-center rounded"><h6>Childs Basic Information</label></h6></div><br>';
echo '<b>Full Name: </b>'.$row[1].', ' .$row[2]. ' '.$row[3].'<br>';
echo '<b>Gender: </b>'.$row[11].'<br>';
echo '<b>Birthday: </b>'.$row[5].'<br>';
echo '<b>Age: </b>'.$row[6].'<br>';
echo '<b>Name of Main Household: </b>'.$childID.'<br><br>';
echo '<div class="p-3 mb-2 bg-info text-white text-center rounded"><h6>Childs Health Information</label></h6></div><br>';
echo '<b>Height: </b>'.$row[8].' cm <br>';
echo '<b>Weight: </b>'.$childID.' kg <br>';
echo '<b>BMI: </b>'.$row[9].'<br>';
echo '<b>Date Weighed: </b>'.$row[13].'<br>';
echo '<b>Health History: </b>'.$row[12].'<br>';
echo '<b>Health Status: </b>'.$row[10].'<br>';
}}}
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
for now, it will only echo the id that is last in the table and only that id.
so on my site, the admin can assign a job to a user and that job will automatically have the status: waiting to be accepted. I have now created a drop down box on the job page so that the user can either decline or accept the job with that drop down box. however im unsure of the coding needed to update the database field based on what the user selects.
what im aiming for is: the user selects a status, then clicks the change button to update the status of the job.
current code:
<?php
if(!isset($_SESSION))
{
session_start();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<title>Tyre Hire</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<header>
<img class="img-responsive" src ="images/Logo.png" alt ="logo"/>
</header>
</div>
</div>
<?php
require_once ("config.inc.php");
try
{
$conn = new PDO(DB_DATA_SOURCE, DB_USERNAME, DB_PASSWORD);
}
catch(PDOException $exception)
{
echo "Oh no, there was a problem" . $exception->getMessage();
}
if(!isset($_SESSION["username"]))
{
//user tried to access the page without logging in
header( "Location: add.php" );
}
$login = $_SESSION['user_ID'];
$query = "SELECT * FROM login WHERE user_ID = :user_ID";
$term = $conn->prepare($query);
$term->bindValue(':user_ID', $login);
$term->execute();
$login = $term->fetch(PDO::FETCH_OBJ);
$status = "Waiting to be accepted";
$status2 = "Accept Job";
$status3 = "Decline Job";
if(isset($_SESSION["username"]))
{
echo "Welcome, you are now logged in as <b>".$_SESSION['username']."</b> <img class='clientView' src='images/loginIcon.png' alt='client'>"; }
else {
echo "You are currently not logged in";
};
?>
<div class="row">
<div class="col-xs-12">
<br>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="main.php">Tyre Hire</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li> Home <span class="glyphicon glyphicon-print"></span></li>
<li> Search <span class="glyphicon glyphicon-print"></span></li>
<li><?php echo "<a href='all-jobs.php?user_id=" . $login->user_ID . "&occupation=". $login->occupation ."''> Current Jobs <span class='glyphicon glyphicon-print'></span></a>";?> </li>
<li> Register Interest <span class="glyphicon glyphicon-print"></span></li>
<li> Logout <span class="glyphicon glyphicon-print"></span></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="right">
<h2>Current Jobs</h2>
<p>One of the best sites to find the best qualified and skilled drivers in the UK.</p>
<form class="form-horizontal formApply" action="" method="POST">
<h2><u>Job Details </u></h2>
<div class="form-group">
<?php
echo "<h3>Job role :".$worker->jobTitle."</h3>";
echo "<ul>";
echo "<h3> About the role </h3>";
echo "<li><b>Company Name:</b>".$worker->company."</li>";
echo "<li><b>Job Description:</b>".$worker->jobDescription."</li>";
echo "<h3>shift pattern</h3>";
echo "<li><b>Start Time: </b>".$worker-> startTime."</li>";
echo "<li><b>End Time: </b>".$worker-> endTime."</li>";
echo "<br />";
echo "<li><b>start Date:</b>".$worker->startDate."</li>";
echo "<li><b>Job Expiry Date:</b>".$worker->expiry."</li>";
echo "<b><h4>Current Status: </b>".$worker->status."</h4>";
echo "</ul>";
?>
<div class="form-group">
<label class="control-label col-sm-2" for="search"> Status</label>
<div class="col-sm-3">
<select class="form-control" name="status" >
<option value="<? echo $status;?>"><?php echo $status;?></option>
<option value="<? echo $status2;?>"><?php echo $status2;?></option>
<option value="<? echo $status3;?>"><?php echo $status3;?></option>
</select>
<input type="hidden" value="<?php echo $status; ?>" name="status">
</div>
<div class="form-group">
<!--<label class="control-label col-sm-2" for="search"></label> -->
<div class="col-sm-3">
<!-- <select class="form-control" name="status" >
<option value="<? echo $job;?>"><?php echo $job;?></option>
</select> -->
<input type="hidden" value="<?php echo $job; ?>" name="job_id">
</div>
</div>
</div>
<input class = "buttonA" type="submit" name="Apply" value="Change status"/>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="BottomArea">
<h4> Recruitment Agencies </h4>
<div class="row">
<div class="col-xs-3">
<img class="FxPic img-responsive" src="images/fxpic.png" alt="fx-logo">
</div>
<div class="col-xs-3">
<img class="driverhire img-responsive" src="images/driverhire.jpg" alt="driverhire">
</div>
<div class="col-xs-3">
<img class="logi img-responsive" src="images/logi.png" alt="logi-logo">
</div>
<div class="col-xs-3">
<img class="pebble img-responsive" src="images/noel.png" alt="pebbles">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<footer>
<img id="logoFoot" src ="images/Logo.png" alt ="logo"/>
<p><b>Address: 5A twickenham road, london SJ5 7AE</b></p>
</footer>
</div>
</div>
<script src=myjs.js></script>
</div>
</body>
</html>
attempted it after reading the update manual, no errors but upon clicking the button it gives a blank page.:
<?php
include ("db_fncs.php");
try{
$conn = new PDO(DB_DATA_SOURCE, DB_USERNAME, DB_PASSWORD);
}
catch (PDOException $exception)
{
echo "Oh no, there was a problem" . $exception->getMessage();
}
$status = $_POST["status"];
$job = $_POST['job_id'];
print_r($_POST);
$query = "UPDATE jobs SET status = :status WHERE job_id = :job_id AND status = :status";
// Prepare statement
$stmt = $conn->prepare($query);
$stmt->bindValue(':status', $status);
$stmt->bindValue(':job_id', $job);
// execute the query
$stmt->execute();
//$stmt->commit();
echo $stmt->rowCount() . " records UPDATED successfully";
?>
The basic syntax for UPDATE is:
UPDATE <my_table>
SET <update_column_name> = <some_value>
WHERE <identifying_column_name> = <some_value>
In your case, it would probably look something like:
UPDATE jobs
SET status = <new_job_status>
WHERE userid = <user_id>
AND jobid = <job_id>