M. Bagiak M. Bagiak - 1 month ago 9
HTML Question

Create form HTML for my PHP ADODB


I have a PHP file that takes me in a table my results.
Using PHP, I added some filters. I wish I could enter the filter with search form and not through code.

And, how can I make that happen in a 'static' page (no refresh or change address)?

index.html (

<form>
code). For the information, I used JQuery style.
Screen

<h1>Ricerca Ordini</h1>
<form action="index.php" method="post">
<input type="text" name="input" placeholder="Ricerca Ordini"> <br><br>
<label for="selectmenu">Tipo:</label>
<select id="selectmenu">
<option>C1</option>
<option>CR</option>
<option>F1</option>
<option>FP</option>
<option>FPE</option>
<option selected="selected">All Type</option>
</select>
<label for="spinner">ID:</label>
<input id="spinner"> <br><br>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to"> <br><br>
<input type="submit" name="search">
</form>


index.php

<?php

define ('DBNAME',"./DinamicoWeb.mdb"); // Definisce il nome del database
define ('DBTBL',"Ordini"); // Definisce il nome della tabella
define ('PKNAME',"Id Ord"); // Definisce il nome della chiave primaria
define ('PKCOL',0); // Definisce la posizione della chiave primaria
define ('LINKPK',true); // Abilita i link alla PK per modifica-cancella

$con = new COM("ADODB.Connection");
$conStr = "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=".
realpath(DBNAME).";";
$con->open($conStr);

$id="1";
$tipo="";
$numero="2";
$data1="";
$data2="";
$input="TT";


$sql="SELECT [Id Ord] AS [ID], [Tipo Ord] AS [Tipo], [N Ord] AS [Numero], [Data Ord] AS [Data], [Ragione Sociale], [Indirizzo], [TotImp] AS [IMPORTO TOTALE], [TotIva] AS [IMPORTO IVA] FROM [Ordini] WHERE [Indirizzo] LIKE '%$input%' OR [Ragione Sociale] LIKE '%$input%' OR [Id Ord] LIKE '$id' OR [Tipo Ord] LIKE '$tipo' OR [N Ord] LIKE '$numero'";

$rs = $con->execute($sql);


if($rs === false) {
trigger_error('Wrong SQL: ' . $sql . ' Error: ' . $con->ErrorMsg(), E_USER_ERROR);
} else {
$rows_returned = $rs->RecordCount();
}

$numFields = $rs->Fields->count;

// Print HTML
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';
echo '<html xmlns="http://www.w3.org/1999/xhtml">';
echo '<head>';
echo '<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />';
echo '<title>Gestione degli '.DBTBL.'</title>';
echo '<link href="styles.css" rel="stylesheet" type="text/css" />';
echo '<link rel="stylesheet" href="css/bootstrap.css">';
echo '<link rel="stylesheet" href="css/footable.bootstrap.css">';
echo '<link rel="stylesheet" href="css/footable.bootstrap.min.css">';
echo '<link rel="stylesheet" href="css/footable.core.bootstrap.min.css">';
echo '</head><body>';
echo '<h1>GESTIONE '.DBTBL.'</h1>';
// Elenca records -----
//echo ("<div class='table-responsive'>");
echo ("<table class='datatable table tabella_reponsive ui-responsive' summary='Prova dati con MS Access'>");
echo("<caption>Tabella ".DBTBL."</caption>\n");
echo("<thead><tr>\n");
for ($i=0;$i<$numFields;$i++){
echo("<th scope='col'>");
echo $rs->Fields($i)->name;
echo("</th>\n");
}
echo("</tr></thead>\n");
echo("<tbody>");

$alt = false;
while (!$rs->EOF)
{
echo("<tr>");
for ($i=0;$i<$numFields;$i++){
$altClass = $alt ? " class='alt'" : "";
if (LINKPK && $i==PKCOL){
echo "<td".$altClass."><a href='?id=".$rs->Fields($i)->value
."'>".$rs->Fields($i)->value."</a></td>\n";
}
else{
echo "<td".$altClass.">".$rs->Fields($i)->value."</td>\n";
}
}
echo("</tr>\n");
$rs->MoveNext();
$alt = !$alt;
}
echo("</tbody>");
echo("</table>\n");
echo("</div>");
echo '</body></html>';
$rs->Close();
$con->Close();
?>


I used these variables to make the test, and it works correctly.


$id="1";

$tipo="";

$numero="2";

$data1="";

$data2="";

$input="TT";


Result

Insert snippet: (index.html)



<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Ricerca Ordini</title>
<link href="jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var dateFormat = "mm/dd/yy",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});

function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}

return date;
}
} );
</script>
<style>
body{
font-family: "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
select {
width: 200px;
}
</style>

</head>

<body>
<h1>Ricerca Ordini</h1>
<form action="index.php" method="post">
<input type="text" name="input" placeholder="Ricerca Ordini"> <br><br>
<label for="selectmenu">Tipo:</label>
<select id="selectmenu">
<option>C1</option>
<option>CR</option>
<option>F1</option>
<option>FP</option>
<option>FPE</option>
<option selected="selected">All Type</option>
</select>
<label for="spinner">ID:</label>
<input id="spinner"> <br><br>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to"> <br><br>
<input type="submit" name="search">
</form>

<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>

$( "#accordion" ).accordion();



var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#autocomplete" ).autocomplete({
source: availableTags
});



$( "#button" ).button();
$( "#button-icon" ).button({
icon: "ui-icon-gear",
showLabel: false
});



$( "#radioset" ).buttonset();



$( "#controlgroup" ).controlgroup();



$( "#tabs" ).tabs();



$( "#dialog" ).dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});

// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
$( "#dialog" ).dialog( "open" );
event.preventDefault();
});



$( "#datepicker" ).datepicker({
inline: true
});



$( "#slider" ).slider({
range: true,
values: [ 17, 67 ]
});



$( "#progressbar" ).progressbar({
value: 20
});



$( "#spinner" ).spinner();



$( "#menu" ).menu();



$( "#tooltip" ).tooltip();



$( "#selectmenu" ).selectmenu();


// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
</script>
</body>
</html>




Answer

You have to add on your index.php this:

$input=$_POST['input'];
$id=$_POST['id'];
$tipo=$_POST['tipo'];
$numero=$_POST['numero'];

And change your index.html:

<form action="index.php" method="post"> 
<input type="text" name="input" placeholder="Ricerca Ordini"> <br><br>
<label for="selectmenu">Tipo:</label>
<select id="selectmenu" name="tipo">
    <option>C1</option>
    <option>CR</option>
    <option>F1</option>
    <option>FP</option>
    <option>FPE</option>
    <option selected="selected">All Type</option>
</select>
<label for="spinner">ID:</label>
<input id="spinner" name="id"> <br><br>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to"> <br><br>
<input type="submit" name="search">
</form>

The filed "name" on html must be the same of ['name'] on php.