I need help, my code isn't working, it wont insert into table db. I think my code isn't written well. The part i need to work is first switch case!
I needed it to be in pdo, my db and table data is correct.
<?php
if (isset($_GET['poslovni_korisnici'])) {
$active1 = 'class="active"';
}
else {
$active1 = '';
}
if(isset($_GET['korisnici'])) {
$active2 = 'class="active"';
}
else {
$active2 = '';
}
/*** mysql hostname ***/
$hostname = 'localhost';
/*** mysql username ***/
$username = 'root';
/*** mysql password ***/
$password = '';
try {
$dbh = new PDO("mysql:host=$hostname;dbname=zadatak1", $username, $password);
/*** echo a message saying we have connected ***/
/**echo 'Connected to database';**/
}
catch(PDOException $e)
{
echo $e->getMessage();
}
echo'
<!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>Statistika</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesnt work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="index.php">POSLOVNA STATISTIKA</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ' . $active1 . '>Poslovni korisnici <span class="sr-only">(current)</span></li>
<li ' . $active2 . '>Korisnici</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>';
switch (isset($_GET)) {
case isset($_GET['unosPoslovni']):
if(isset($_POST['submit1']))
{
$partner_name = $_POST['Partner_name'] = NULL;
$partner_street = $_POST['Partner_street'] = NULL;
$partner_zip = $_POST['Partner_zip'] = NULL;
$partner_city = $_POST['Partner_city'] = NULL;
$partner_country = $_POST['Partner_country'] = NULL;
$sql = "INSERT INTO poslovni_partneri
(Partner_name,Partner_street, Partner_zip, Partner_city, Partner_country)
VALUES('$partner_name','$partner_street',$partner_zip, $partner_city, $partner_country";
$result = mysql_query($sql);
}
echo'
<h1>Unos poslovni korisnika</h1>
</br>
</br>
<form action="unos.php?unosPoslovni" method="POST" target="_parent" accept-charset="UTF-8">
<table id="table_id" class="display">
<thead>
<tr>
<th>Partner name</th>
<th>Partner street</th>
<th>Partner zip</th>
<th>Partner city</th>
<th>Partner country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="partner_name" value=""></td>
<td><input type="text" name="partner_street" value=""></td>
<td><input type="text" name="partner_zip" value=""></td>
<td><input type="text" name="partner_city" value=""></td>
<td><input type="text" name="partner_country" value=""></td>
</tr>
</tbody>
</table>
<input type="submit" name="submit1" value="Spremi" />
</form>';
break;
default:
# code...
break;
}
switch (isset($_GET)) {
case isset($_GET['unosKorisnici']):
echo'
<h1>Unos korisnika</h1>
</br>
</br>
<form action="unos.php?unosPoslovni" method="POST" target="_parent" accept-charset="UTF-8">
<table id="table_id" class="display">
<thead>
<tr>
<th>User name</th>
<th>User department</th>
<th>User email</th>
<th>User phone</th>
<th>User mobile</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="user_name" value=""></td>
<td><input type="text" name="user_department" value=""></td>
<td><input type="text" name="user_email" value=""></td>
<td><input type="text" name="user_phone" value=""></td>
<td><input type="text" name="user_mobile" value=""></td>
</tr>
</tbody>
</table>
</form>';
break;
default:
# code...
break;
}
echo'
<script>
$(document).ready( function () {
$("#table_id").DataTable();
} );
</script>
<!-- jQuery (necessary for Bootstraps JavaScript plugins) -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>';
?>
Your SQL query is invalid since it's missing right parenthesis ( ) );
INSERT INTO poslovni_partneri(Partner_name,Partner_street, Partner_zip, Partner_city, Partner_country)
VALUES('$partner_name','$partner_street',$partner_zip, $partner_city, $partner_country";
Should look more like this:
INSERT INTO poslovni_partneri(Partner_name,Partner_street, Partner_zip, Partner_city, Partner_country)
VALUES('$partner_name','$partner_street','$partner_zip', '$partner_city', '$partner_country')";
You should be consistent with quotations aswell, you're sometimes using it around variables and sometimes not.
Furthermore, you shouldn't even be querying this way; you should be using prepared statements because this way you're open for SQL injections.
Edit
You say you need PDO, you're establishing a PDO connection but you're querying by using the mysql_* specific functions, which is not how you should be using PDO and has nothing to do with PDO.
Edit 2
You should also validate whether the post arguments are actually available, do something like this with your post arguments:
$partner_name = isset($_POST['partner_name']) ? $_POST['partner_name'] : '';
(notice the lowercase p)
Using the ternary operator, and do this with all of the post arguments and if any of your arguments are the empty string, then display an error instead of querying.
Edit 3
As pointed out by fred, partner_name != Partner_name, i.e. your name attribute identifier (in the html) is not matching the ones you're trying to match with in the post arguments.
Related
How do I edit the design hidden somewhere in this code? Currently this has a functioning search and I want to put an Add button next to a textbox. But I cannot even find the search in this code I'm showing below. I found this datatable template bootstrap on youtube.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Survey Settings</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<?php
require_once("/dao/CategoryDAO.php");
require_once("/dao/TopicDAO.php");
$category = new CategoryDAO();
$topic = new TopicDAO();
$allCategories_arr = $category->getAllCategories();
$allTopics_arr = $topic->getAllTopicTitles();
?>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td>Category ID</td>
<td>Category Name</td>
<td >Action</td>
</tr>
</thead>
<tbody>
<?php
foreach($allCategories_arr as $ar) {
echo "<tr>";
echo "<td>" . $ar['category_id'] . "</td>";
echo "<td>" . $ar['categoryname'] . "</td>";
echo "<td><a class='btn btn-default' href='viewsubcategory.php?catid=" . $ar['category_id'] . "' >More Info</a>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
</body>
I discovered that this code was triggering the whole design. Therefore, is there anyway I can show the 'hidden' code in this script? I just want to pud an add button and a textbox next to the search.
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
Ok not sure I totally understand your requirements but going from your original post it says an add button by the search box that allows you to insert rows into the datatable. the solution below adds an inline form in the toolbar. then the onclick event adds the row to the datatable.
function category(id, name, action) {
var self = this;
this.id = id;
this.name = name;
this.action = action;
}
function model() {
var self = this;
this.categories = [];
}
var mymodel = new model();
$(document).ready(function() {
mymodel.categories.push(new category('1', 'Cat1', 'Post'));
mymodel.categories.push(new category('2', 'Cat2', 'Get'));
mymodel.categories.push(new category('3', 'Cat3', 'Put'));
var table = $('#mytable').DataTable({
data: mymodel.categories,
columns: [{
data: 'id'
}, {
data: 'name'
}, {
data: 'action'
}
],
dom: '<"toolbar">frtip'
});
$("div.toolbar").html(
'<form class="form-inline">\
<div class="form-group">\
<input type="text" class="form-control" id="rowid" placeholder="id">\
</div>\
<div class="form-group">\
<input type="text" class="form-control" id="name" placeholder="name">\
</div>\
<div class="form-group">\
<input type="text" class="form-control" id="action" placeholder="action">\
</div>\
<input type="button" class="btn btn-danger" id="add" value="add"></input>\
</form>'
);
$('#add').click(function(event) {
table.row.add({
'id': $('#rowid').val(),
'name': $('#name').val(),
'action': $('#action').val()
}).draw(false);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-bordered" cellspacing="0" width="100%" id="mytable">
<thead>
<tr>
<th>Category Id</th>
<th>Category Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I have a page with a dropdown box at the top populated from the database, when I select an item from the dropdown it gives a list of results with a checkbox at the end of each line, I want to be able to select, using each checkbox, any number of results, and submit a value back into a field in the database for each result selected.
I sort of have this working, but it submits the value to every field in the database, rather than just the ones selected
<?php
require_once("models/config.php");
if (!securePage($_SERVER['PHP_SELF'])){die();}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<title>Stock Items</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap theme -->
<link href="css/bootstrap-theme.css" rel="stylesheet">
<!--external css-->
<!-- font icon -->
<link href="css/elegant-icons-style.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!-- full calendar css-->
<link href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
<link href="assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" />
<!-- easy pie chart-->
<link href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- owl carousel -->
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css">
<link href="css/jquery-jvectormap-1.2.2.css" rel="stylesheet">
<!-- Custom styles -->
<link rel="stylesheet" href="css/fullcalendar.css">
<link href="css/widgets.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
<link href="css/xcharts.min.css" rel=" stylesheet">
<link href="css/jquery-ui-1.10.4.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/lte-ie7.js"></script>
<![endif]-->
</head>
<body>
<!-- container section start -->
<section id="container" class="">
<?php include("navigation.php"); ?>
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!--overview start-->
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-lightbulb-o"> </i>Stock</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-lightbulb-o"></i>Stock</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<section class="panel">
<header class="panel-heading">
All Stock
</header>
<div class="panel-body">
<form class="form-horizontal" method="post" action="">
<div class="form-group">
<div class="col-lg-8">
<select name="search" class="form-control" required >
<?php
// connect to the database
require_once('models/db-settings.php');
$conn = mysql_connect($db_host, $db_user, $db_pass, $db_name) or die("Error " .mysql_error($conn));
mysql_select_db($db_name);
$query = "SELECT `id`, `description` FROM `stock_templates`";
$stock_templates = mysql_query($query);
echo "<option value=''>Select Stock Template</option>";
while ($description=mysql_fetch_assoc($stock_templates)) {
echo "<option value='" . $description['id'] . "'>" . $description['description'] . "</option>";
}
?>
</select>
</div>
<div class="col-lg-1">
<input type="submit" name="filter" value="Search" class="btn btn-success" />
</div>
</div>
</form><br><br>
<?php
if(isset($_POST['formSubmit']))
{
$aDoor = $_POST['check_list'];
if(empty($aDoor))
{
echo("<p>You didn't select any items to add to lease.</p>\n");
}
else
{
$N = count($aDoor);
echo("<p>You selected $N item(s) to add to lease: ");
for($i=0; $i < $N; $i++)
{
echo($aDoor[$i] . " ");
}
echo("</p>");
}
}
function IsChecked($chkname,$value)
{
if(!empty($_POST[$chkname]))
{
foreach($_POST[$chkname] as $chkval)
{
if($chkval == $value)
{
return true;
}
}
}
return false;
}
?>
<?php
ob_start( );
if(!empty($_POST['check_list'])) {
foreach($_POST['check_list'] as $check) {
$query = mysql_query("UPDATE stock SET lease_id = $lease_id");
$result2 = mysql_query($query);
// check if sent
if ($result2) {
?>
<div class="alert alert-success fade in">
<button data-dismiss="alert" class="close close-sm" type="button">
<i class="icon-remove"></i>
</button>
<strong>Well done!</strong> Your lease items have been successfully saved.
</div>
<?php
} else {
?>
<div class="alert alert-block alert-danger fade in">
<button data-dismiss="alert" class="close close-sm" type="button">
<i class="icon-remove"></i>
</button>
<strong>Oh snap!</strong> We could not save your lease items.
</div>
<?php
}
}
}
?>
<?php
// connect to the database
require_once('models/db-settings.php');
$conn = mysql_connect($db_host, $db_user, $db_pass, $db_name) or die("Error " .mysql_error($conn));
mysql_select_db($db_name);
// Extract filter information
$count = 0;
$search = mysql_escape_string(#$_POST['search']);
// select data from the database
$query2 = "SELECT * FROM `stock_templates` ORDER BY `stock_templates`.`id` DESC LIMIT 0";
// Perform Logic
if (array_key_exists("filter", $_POST)) {
// query based on search term
$query2 = "SELECT * FROM `stock` WHERE $search=stocktemplate_id AND lease_id=0";
}
$result2 = mysql_query($query2);
// Result
if (mysql_num_rows($result2) < 1) {
echo "<div align='center'><h2>Please select a stock template above and click search</h2></div>";
}
?>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" class="form-horizontal" name="check_list[]">
<div class="form-group">
<label class="control-label col-lg-1" for="lease_id">Lease Number *</label>
<div class="col-lg-10">
<select name="lease_id" class="form-control">
<?php
// connect to the database
require_once('models/db-settings.php');
$conn = mysql_connect($db_host, $db_user, $db_pass, $db_name) or die("Error " .mysql_error($conn));
mysql_select_db($db_name);
$query = "SELECT `id`, `leasenumber` FROM `lease`";
$leases = mysql_query($query);
echo "<option value=''>Select Lease..........</option>";
while ($lease=mysql_fetch_assoc($leases)) {
echo "<option value='" . $lease['id'] . "'>" . $lease['leasenumber'] . "</option>";
}
?>
</select>
</div>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>Item ID</th>
<th>Description</th>
<th>Barcode</th>
<th>Serial</th>
<th>Add To Lease</th>
</tr>
</thead>
<?php
while ($row = mysql_fetch_array($result2))
{
$id = $row["id"];
$lease_id = $row["lease_id"];
$barcode = $row["barcode"];
$serial = $row["serial"];
$stocktemplate_id = $row["stocktemplate_id"];
$qa = 0;
?>
<tbody>
<tr>
<td><?php print $id ?></td>
<td><?php $q = mysql_query("SELECT description FROM stock_templates WHERE id = '$stocktemplate_id'"); while ($row = mysql_fetch_array($q)){$qa = $row["description"];} print $qa ?></td>
<td><?php print $barcode ?></td>
<td><?php print $serial ?></td>
<td><input type="checkbox" name="check_list[]" value="<?php print $id ?>" /></td>
<td></td>
</td>
</tr>
</tbody>
<?php
}
?>
</table>
<input class="btn btn-danger" type="submit" name="formSubmit" value="Add Selected To Lease" />
</div>
</form>
</section>
</div>
</div>
</section>
</section>
<!--main content end-->
</section>
<!-- container section end -->
<!-- javascripts -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- nice scroll -->
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<!-- jquery ui -->
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<!--custom checkbox & radio-->
<script type="text/javascript" src="js/ga.js"></script>
<!--custom switch-->
<script src="js/bootstrap-switch.js"></script>
<!--custom tagsinput-->
<script src="js/jquery.tagsinput.js"></script>
<!-- colorpicker -->
<!-- bootstrap-wysiwyg -->
<script src="js/jquery.hotkeys.js"></script>
<script src="js/bootstrap-wysiwyg.js"></script>
<script src="js/bootstrap-wysiwyg-custom.js"></script>
<!-- ck editor -->
<script type="text/javascript" src="assets/ckeditor/ckeditor.js"> </script>
<!-- custom form component script for this page-->
<script src="js/form-component.js"></script>
<!-- custome script for all page -->
<script src="js/scripts.js"></script>
</body>
</html>
No worries. Just put the code of insert query inside foreach() loop. Like this:
foreach($_POST['check_list'] as $item)
{
$sql="INSERT/UPDATE Query";
//for example
$sql = "INSERT INTO table_demo (field_1, TARGET_FIELD, field_2, field_3) VALUES (val_1, $item, val_2, val_3)";
$insert = mysqli_query($connection,$sql);
}
//next code of your choice
That is really Easy to give a go.
See this is same as you want.
In this link the first answer by Sean Valsh is your solution.
Giving the array as name of every checkbox will give you only chacked option's id in array while submitted.
https://stackoverflow.com/a/4997271/6834980
Ask if still have the problem. Happy to help.
I have a form that I need to act in specific ways. Example: User brings equipment back: I don't want that to show up in my form. User takes equipment out: I want it to generate to my form, they enters some information, form sends information to database. User takes equipment out: it too generates said form, he doesn't enter any information, form submits information after 20 sec, information is in database.
I was doing a simple page refresh to get the information into my form but that was pulling all the equipment that had been brought into the warehouse that day. So I commented that out and then I would get stuck on my ajax page.
I then tried creating a new php page that had a 301 page refresh and that worked to get the page back to my index page, however, my form wasn't working properly and so I commented out the auto submit and now my form works great... except I can't fulfill this last requirement where the page will submit the data if the user forgets to put his equipment information in.
I'm looking to do an if/then/else type of page submission. However, I can't figure out how to do one purely in either php or html. This is what I have figured out so far but it doesn't work and I know I'm way off somewhere.
<!DOCTYPE html>
<html>
<body>
<!--This is the one that is currently commented out in my code
<script type="text/javascript">
window.setTimeout(function() {
window.location = 'index.php'},1000*2);
</script>
</body>
</html> -->
//This is my pipe dream
<?php
if (isset($_POST['action'])) {
switch ($_POST['action']) {
case ‘DONE’:
document.getElement('formSubmit').submit();
break;
}
} else {
<script type="text/javascript">
window.setTimeout(function(){
document.getElement('formSubmit').submit();
},1000*30);
</script>
}
?>
I don't know that much about jQuery other than going through a codecademy, and I know even less javascript. I'm a database person that got "conned" into building an advanced form/webpage. So I'm learning PHP, CSS, jQuery and HTML as I code.
Index.php:
<!DOCTYPE html>
<html>
<head>
<meta name=“Warehouse 3962” content="width=device-width, initial-scale=1.0">
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
<!—window.setTimeout(function(){
document.getElement(‘formSubmit').submit();
},1000*30); —>
</script>
</head>
<body>
<section class="w">
<div class="row">
<div class="small columns">
<img src="logo.png" />
<h3 class="green">Users</h3>
</div>
<h6>Warehouse 3962</h6>
</div>
<div class="row">
<div class="small columns">
<form action="ajax.php" method="post" id="formSubmit">
<table id="equipment-table">
<thead>
<tr>
<th>Equipment</th>
<th>Amount</th>
<th>Val1</th>
<th>Val2</th>
</tr>
</thead>
<tbody>
<?php foreach
($results['tags'] as $equipment) {
if ($equipment['category'] == "Part") { ?>
<tr>
<td><?= $equipment['Amount']; ?></td>
<td class="text-center"><?= $equipment[‘quantity']; ?></td>
<td><input type="text" name="val1" /></td>
<td><input type="text" name="val2" /></td>
</tr>
<?php } // end if
} // end foreach ?>
<tr>
<td colspan="4" style="text-align: right;"><input type="submit" class="button" name="DONE" value="DONE" /></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</section>
</body>
</html>
Please try this new solution. This will send a post every 30 seconds containing only the input boxes containing text on them.
<!DOCTYPE html>
<html>
<head>
<meta name="Warehouse 3962" content="width=device-width, initial-scale=1.0">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<section class="w">
<div class="row">
<div class="small columns">
<img src="logo.png" />
<h3 class="green">Users</h3>
</div>
<h6>Warehouse 3962</h6>
</div>
<div class="row">
<div class="small columns">
<form action="ajax.php" method="post" id="formSubmit">
<table id="equipment-table">
<thead>
<tr>
<th>Equipment</th>
<th>Amount</th>
<th>Val1</th>
<th>Val2</th>
</tr>
</thead>
<tbody>
<?php
foreach ($results['tags'] as $equipment) :
if ($equipment['category'] === "Part") :
?>
<tr>
<td>
<?php echo $equipment['Amount']; ?>
</td>
<td class="text-center">
<?php echo $equipment['quantity']; ?>
</td>
<td>
<input id="<?php echo $equipment['number'];?>-val1" type="text" name="<?php echo $equipment['number'];?>-val1"/>
</td>
<td>
<input id="<?php echo $equipment['number'];?>-val2" type="text" name="<?php echo $equipment['number'];?>-val2"/>
</td>
</tr>
<?php
endif;
endforeach;
?>
<tr>
<td colspan="4" style="text-align: right;">
<input type="submit" class="button" name="DONE" value="DONE" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</section>
<script type="text/javascript">
function sendData() {
var inputs = document.getElementById('equipment-table').getElementsByTagName('input'),
data = [],
name, val1, val2;
for (var i = 0; i < inputs.length; i++) {
if ( inputs[i].type === 'submit') {
continue;
}
if ( inputs[i].value ) {
name = inputs[i].name.split('-val');
val1 = inputs[i].name.split('val1');
if (val1.length > 1) {
data.push({name: name[0], val1: inputs[i].value});
}
else {
data.push({name: name[0], val2: inputs[i].value});
}
}
}
window.setTimeout(function() {
sendData();
},30000);
}
sendData();
</script>
</body>
</html>
You cannot mix PHP with JavaScript and why you set a timeout to 1000*30, that is equal to set a timeout to 30000 which means 30 seconds.
Then, you can use the 'require' attribute in the input filed to force the user to fill the required information.
<!DOCTYPE html>
<html>
<head>
<meta name="Warehouse 3962” content="width=device-width, initial-scale=1.0">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<section class="w">
<div class="row">
<div class="small columns">
<img src="logo.png" />
<h3 class="green">Users</h3>
</div>
<h6>Warehouse 3962</h6>
</div>
<div class="row">
<div class="small columns">
<form action="ajax.php" method="post" id="formSubmit">
<table id="equipment-table">
<thead>
<tr>
<th>Equipment</th>
<th>Amount</th>
<th>Val1</th>
<th>Val2</th>
</tr>
</thead>
<tbody>
<?php
foreach ($results['tags'] as $equipment) :
if ($equipment['category'] == "Part") : ?>
<tr>
<td><?= $equipment['Amount']; ?></td>
<td class="text-center">
<?php echo $equipment[‘quantity']; ?>
</td>
<td>
<input id="val1" type="text" name="val1”/>
</td>
<td>
<input id="val2" type="text" name="val2"/>
</td>
</tr>
<?php
endif;
endforeach;
?>
<tr>
<td colspan="4" style="text-align: right;">
<input type="submit" class="button" name="DONE" value="DONE" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</section>
<script type="text/javascript">
window.setTimeout(function(){
var val1 = document.getElementById("val1").value,
val2 = document.getElementById("val1").value;
if ( ! val1 && ! val2 ) document.getElement('formSubmit').submit();
},30000);
</script>
</body>
</html>
I have a question regarding dynamic tables in html and php. My goal is to create a dynamic table that displays the queried data from mysql and displays them in a table with checkboxes so the user can select questions from a question bank and then do something with them. My problem however is getting the data to be displayed. Using a certain type of mvc architecture, I need to keep the sql out of the front end html and php portions. I was wondering if anyone had any suggestions as how to post the variables from the back end(mysql query) and send them to the front end(html and php section) via curl where I can dynamically create a table with checkboxes. I have attempted the solution using bootstrap and combining sql with html and php as well. Any help would be greatly appreciated.
<?php
include('ProfessorWelcome.php');
//set up mysql connection
$con = mysql_connect("localhost", "username", "password") or die(mysql_error());
//select database
mysql_select_db("username", $con) or die(mysql_error());
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="" rel="shortcut icon">
<script type="text/javascript" language="javascript" src="tablefilter.js"></script>
<title>Registration form</title><!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <link href="css/bootstrap-responsive.css" rel="stylesheet"> -->
<script type="text/javascript" src="cdn.datatables.net/1.10.6/css/jquery.dataTables.css"></script>
<script type="text/javascript"
src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"</script>
<script type="text/javascript" src="cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<form role="form" action="#" method="POST" name="form">
<div class="row">
<div class="col-md-12">
<div class="well">
<h2 class="text-center">Question Bank</h2>
<hr width="70%">
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th width="5%" style="visibility:hidden;" align="left"></th>
<th width="20%" align="left">Question</th>
<th width="20%" align="left">Difficulty</th>
<!-- <th width="7%" align="left">Last Name</th>
<th width="7%" align="center">Email</th>
<th width="7%" align="center">Gender</th>
<th width="7%" align="left">BirthDay</th> -->
</tr>
</thead>
<tbody>
<?php
//select all records form tblmember table
$query = 'SELECT Question, Difficulty FROM QuestionBank';
//execute the query using mysql_query
$result = mysql_query($query);
//then using while loop, it will display all the records inside the table
while ($row = mysql_fetch_array($result)) {
echo "<tr><td><input type='checkbox' name='checkbox' /></td><td>".$row['Question']."</td><td>".$row['Difficulty']."</td>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
<script language="javscript" type="text/javascript">
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
</body>
</html>
This is how I would do it.
I added the ob_start() and ob_flush() so the Top of the page is being transmitted as you create the table.
Moved <title> to immediately follow <head>
Very Important: Moved CSS above JS in the <head>
I used heredoc syntax: PHP Manual Heredoc Syntax
Added MYSQL_NUM to:
mysql_fetch_array($results, MYSQL_NUM))
$row[0] and $row[1] can be used in a double quoted string without concatenation dots. Can also be used in here doc. $row['Question'] and $row['Difficulty'] can not.
Do you realize the overhead associated with jQuery? You do not need any JS in this page. But you created a lot more work for the Browser and are making the visitor wait while the Browser does all that unnecessary work.
I would 86 the JS and jQuery. And NO Bootstrap. Learn CSS.
<?php ob_start("ob_gzhandler");
include('ProfessorWelcome.php');
echo <<<EOT
<html lang="en">
<head><title>Registration form</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="" rel="shortcut icon">
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="tablefilter.js"></script>
<!-- Bootstrap core CSS -->
<script type="text/javascript" src="cdn.datatables.net/1.10.6/css/jquery.dataTables.css"></script>
<!-- <link href="css/bootstrap-responsive.css" rel="stylesheet"> -->
<script type="text/javascript"
src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"</script>
<script type="text/javascript" src="cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
<form role="form" action="#" method="POST" name="form">
<div class="row">
<div class="col-md-12">
<div class="well">
<h2 class="text-center">Question Bank</h2>
<hr width="70%">
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th width="5%" style="visibility:hidden;" align="left"></th>
<th width="20%" align="left">Question</th>
<th width="20%" align="left">Difficulty</th>
<!-- <th width="7%" align="left">Last Name</th>
<th width="7%" align="center">Email</th>
<th width="7%" align="center">Gender</th>
<th width="7%" align="left">BirthDay</th> -->
</tr>
</thead>
<tbody>
EOT;
ob_flush();
//set up mysql connection
$con = mysql_connect("localhost", "username", "password") or die(mysql_error());
//select database
mysql_select_db("username", $con) or die(mysql_error());
//select all records form tblmember table
$query = 'SELECT `Question`, `Difficulty` FROM `QuestionBank` ';
//execute the query using mysql_query
$result = mysql_query($query);
//then using while loop, it will display all the records inside the table
while ($row = mysql_fetch_array($results, MYSQL_NUM)); {
echo "<tr><td><input type='checkbox' name='checkbox' /></td><td>$row[0]</td><td>$row[1]</td>\n";
}
echo <<<EOT
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
<script language="javscript" type="text/javascript">
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
</body>
</html>
EOT;
ob_end_flush();
?>
I'm using Agile Toolkit version 4.2.4 trying to implement the Exchanging rows between grids example found here: https://agiletoolkit.org/doc/grid/interaction
I have created the TSGrid class with the following code:
class TSGrid extends Grid {
function setReloadThis($view){
if($id=$_GET[$this->name.'_chsex']){
// do note, usually we supply 2 arguments for set() function. Second
// argument is being properly quoted (or parametrized), however in this
// case no quoting is required. Hence all the statement goes into first
// argument.
$this->dq->set('gender=if(gender="M","F","M")')
->where('id',$id)
->do_update();
// univ()->page() method updates page content through AJAX. In this case each
// grid is unaware of other objects on the page. So to keep it safe, we will refresh
// page completely.
$view->js()->reload()->execute();
}
return $this;
}
function init(){
parent::init();
$g=$this;
// When you are making your own classes, you must always keep in mind
// that those objects must be just as re-usable as original grids. In our case
// we do set the table and fields, however we leave it up to parent to set the
// additional conditions on our query. This is a major reason for the philosophy
// of Agile Toolkit saying to keep properties public.
$g->addColumn('text','name');
$g->addColumn('text','surname');
$g->addColumn('text','gender');
$g->addColumn('button','chsex','Change Sex');
$g->setSource('test');
}
function defaultTemplate(){
return array('grid_striped');
}
}
and inserted it in the lib folder of the agile toolkit installation.
I have created a test page with the following code:
class page_test extends Page {
function init(){
parent::init();
$p=$this;
$c=$p->add('View_Columns');
$col=$c->addColumn();
$col->add('H3')->set('Male list');
$col->add('TSGrid')
->setReloadThis($c)
->dq
->where('gender','M');
$col=$c->addColumn();
$col->add('H3')->set('Female list');
$col->add('TSGrid')
->setReloadThis($c)
->dq
->where('gender','F');
}
}
In my database, I have made the "test" table with id, name, surname and gender fields.
When I click the "Change sex" button, I get this:
"Error in AJAXec response: SyntaxError: Unexpected token <"
The AJAX response from the server is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Agile Toolkit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="./atk4/templates/shared/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/atk-main.css" />
<link rel="stylesheet" type="text/css" href="./atk4/templates/default/css/atk-custom.css" />
<script type="text/javascript" src="./atk4/templates/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./atk4/templates/js/start-atk4.js"></script>
<script type="text/javascript" src="./atk4/templates/js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="./atk4/templates/js/ui.atk4_loader.js"></script>
<script type="text/javascript" src="./atk4/templates/js/ui.atk4_notify.js"></script>
<script type="text/javascript" src="./atk4/templates/js/atk4_univ.js"></script>
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/ie8.css"/>
<script type="text/javascript" src="./atk4/templates/shared/css/ie8.js"></script>
<![endif]-->
<script type="text/javascript">
$(function(){
$.atk4.includeJS("./atk4/templates/js/atk4_univ.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_notify.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_grid.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_grid.js");
$.atk4(function(){ $('#agiletoolkit_test_view_columns_view_columns_column_tsgrid').find('.button_chsex').button();
$('#agiletoolkit_test_view_columns_view_columns_column_tsgrid').atk4_grid([]);
$('#agiletoolkit_test_view_columns_view_columns_column_2_tsgrid').find('.button_chsex').button();
$('#agiletoolkit_test_view_columns_view_columns_column_2_tsgrid').atk4_grid([]);
; });
});
</script>
</head>
<body>
<div id="atk-layout" class="atk-wrapper">
<div id="header">
<div id="atk-logo" class="ui-widget-header float-left"><img src="./atk4/templates/shared/images/logo.png" /></div>
<div id="header-right">
<script>
$(document).ready(function(){
$('.atk-menu-horizontal>ul>li:first-child').addClass("ui-corner-left");
$('.atk-menu-horizontal>ul>li:last-child').addClass("ui-corner-right");
$('.atk-menu-vertical>ul>li:first-child').addClass("ui-corner-top");
$('.atk-menu-vertical>ul>li:last-child').addClass("ui-corner-bottom");
$('.atk-menu .ui-state-default').hover(function() {
$(this).addClass("ui-state-hover");
}, function() {
$(this).removeClass("ui-state-hover");
});
});
</script>
<div id="agiletoolkit_menu" class="atk-menu atk-menu-horizontal ui-widget">
<ul>
<li class="ui-state-default">Welcome</li>
<li class="ui-state-default">Test1</li>
<li class="ui-state-default">Test2</li>
<li class="ui-state-active">Test3</li>
<li class="ui-state-default">Logout</li>
</ul>
</div>
<div id="atk-version"><b>Agile Toolkit™</b><br/><i><div id="agiletoolkit_licensor_upgradechecker" class="" style="">4.2.4 unlicensed</div>
</i></div>
</div>
</div>
<div id="agiletoolkit_test" class="page_test">
<div id="agiletoolkit_test_view_columns" class="atk-flexy">
<div id="agiletoolkit_test_view_columns_view_columns_column" class="" style=";width:50%"><H3 id="agiletoolkit_test_view_columns_view_columns_column_h3" class="" style="">Male list</H3>
<div id="agiletoolkit_test_view_columns_view_columns_column_tsgrid" class="atk-grid ">
<div class="atk-grid-panel"></div>
<table width="100%">
<thead class="ui-widget-header"><tr>
<th id="" class="ui-widget-header" nowrap >Name</th>
<th id="" class="ui-widget-header" nowrap >Surname</th>
<th id="" class="ui-widget-header" nowrap >Gender</th>
<th id="" class="ui-widget-header" nowrap style="width: 40px; text-align: center">Change Sex</th>
</tr></thead>
<tbody class="grid_body">
<tr class="" data-id="0" rel="0">
<td style="white-space: nowrap">stef</td>
<td style="white-space: nowrap">stefanel</td>
<td style="white-space: nowrap">M</td>
<td style="white-space: nowrap"><button type="button" class="button_chsex" onclick="$(this).univ().ajaxec('/agiletoolkit/?page=test&chsex=0&agiletoolkit_test_view_columns_view_columns_column_tsgrid_chsex=0')">Change Sex</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="agiletoolkit_test_view_columns_view_columns_column_2" class="" style=";width:50%"><H3 id="agiletoolkit_test_view_columns_view_columns_column_2_h3" class="" style="">Female list</H3>
<div id="agiletoolkit_test_view_columns_view_columns_column_2_tsgrid" class="atk-grid ">
<div class="atk-grid-panel"></div>
<table width="100%">
<thead class="ui-widget-header"><tr>
<th id="" class="ui-widget-header" nowrap >Name</th>
<th id="" class="ui-widget-header" nowrap >Surname</th>
<th id="" class="ui-widget-header" nowrap >Gender</th>
<th id="" class="ui-widget-header" nowrap style="width: 40px; text-align: center">Change Sex</th>
</tr></thead>
<tbody class="grid_body">
<tr class="" data-id="0" rel="0">
<td style="white-space: nowrap">eu</td>
<td style="white-space: nowrap">eueu</td>
<td style="white-space: nowrap">F</td>
<td style="white-space: nowrap"><button type="button" class="button_chsex" onclick="$(this).univ().ajaxec('/agiletoolkit/?page=test&chsex=0&agiletoolkit_test_view_columns_view_columns_column_2_tsgrid_chsex=0')">Change Sex</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="atk-footer-guard"></div>
</div>
<div id="footer" class="atk-wrapper">
This system is implemented using Agile Toolkit. © 1999–2012. See License
</div>
<div id="atk-growl-holder" class="atk-growl"></div>
</body>
</html>
Demo page is using older toolkit version, than in master branch. If you use example with master branch, you need following change:
$this->dq
->set('gender', $this->api->db->dsql()->expr('if(gender="M","F","M")'))
->where('id',$id)
->do_update();
this is due to change in dsql object.
here is working example with latest toolkit version