Simple PHP filter from a datepicker - php

I'm having some issues to make my first PHP filter, I would like to select all the values in my SQL table by selecting the date from the datepicker.
This is my php page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--formden.js communicates with FormDen server to validate fields and
submit via AJAX -->
<script type="text/javascript"
src="https://formden.com/static/cdn/formden.js"></script>
<!-- Special version of Bootstrap that is isolated to content wrapped in
.bootstrap-iso -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-
iso.css" />
<!--Font Awesome (added because you use icons in your prepend/append)-->
<link rel="stylesheet" href="https://formden.com/static/cdn/font-
awesome/4.4.0/css/font-awesome.min.css" />
<!-- Inline CSS based on choices in "Settings" tab -->
<style>.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p,
.bootstrap-iso form{font-family: Arial, Helvetica, sans-serif; color:
black}.bootstrap-iso form button, .bootstrap-iso form button:hover{color:
white !important;} .asteriskField{color: red;}</style>
<!-- HTML Form (wrapped in a .bootstrap-iso div) -->
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form action="risultati.php" class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Date
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date"
placeholder="DD/MM/YYYY" type="text"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input name="data_sel" style="display:none" type="text"/>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<br><br><br><br>
<div>
<table style="width:100%">
<tr>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
</tr>
</table>
</div>
<!-- Extra JavaScript/CSS added manually in "Settings" tab -->
<!-- Include jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
})
</script>
</body>
</html>
And this is my table:
ID,ARTICOLAZIONE,NOME1,NOME2,PHONE,INDIRIZZO,CITTA
I know I have to create the connection.php file to connect to my database and another file that insert the results in my HTML table (under the datepicker).

Related

I want to add CSS to my php code.How to do it?

I am new with php and I was wondering how can I add css to my php code?
I basically want to do form handling using php.So I want to collect the username and email and display it as soon as the user hits submit.But how can I render the text on php page using different colors or change its css styles?
For example if I want my 'id:fullname' to render in red color.How can I do it??
I googled it but didn't got a clear answer.
CSS I want to add:
#fullname{
color: red;
}
My html code:
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sign Up!</title>
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/887e6e97bd.js" crossorigin="anonymous"></script>
<!-- CSS STYLESHEET -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#900&family=Ubuntu:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href=" css/login.css ">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-in-container">
<form id="signupform" action="sign.php" method="post">
<h1 style="font-weight: bold; margin: 0;">Create Account</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>or use your email for registration</span>
<input id="fullname" type="text" placeholder="Name" name="fullname" />
<input id="emailid" type="email" placeholder="Email" name="emailid" />
<input id="password" type="password" placeholder="Password" name="password" />
<input id="cpassword" type="password" placeholder=" Confirm Password" name="cpassword" />
<button id="signbutton">Sign Up</button>
<a style="color: #000000" href="login.html">Already have an account?</a>
</form>
</div>
</div>
</div>
<script src="s.js" charset="utf-8"></script>
<footer id="footer">
<p>© Copyright 2020 Foodzie</p>
</footer>
</html>
<!-- end snippet -->
this is my php code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
<?php include 'CSS/styles.css'; ?>
</style>
<body>
Welcome to Foodzie!!<?php echo $_POST["fullname"]; ?><br>
Your email address is: <?php echo $_POST["emailid"]; ?>
</body>
</html>

In general, it's best to have your CSS before your HTML and your PHP before your CSS. I always start my scripts with <?php at the very beginning of the file, close it ?>, have my JavaScript <script>...</script>, have my CSS <style>...</style>, and then my HTML. So, in your case, you can simply put your CSS between the style tags just above your opening HTML tag <html>.

I want to display my results in table format after passing a parameter of id and button click in my library management system

This is my entire code to generate reports for a particular student using his/her student id.
My SQL query will show the list of books not yet returned by the student....
While debugging I noticed that if I Manually put any student ID in the code, I can see the results but the button click feature is not working ... somehow the button is not taking any data from my SQL query and not executing..
<?php
session_start();
error_reporting(0);
include('includes/config.php');
if(strlen($_SESSION['alogin'])==0)
{
header('location:index.php');
}
else
{
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>
Online Library Management System | Report Generation
</title>
<!-- BOOTSTRAP CORE STYLE -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONT AWESOME STYLE -->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- DATATABLE STYLE -->
<link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
<!-- CUSTOM STYLE -->
<link href="assets/css/style.css" rel="stylesheet" />
<!-- GOOGLE FONT -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
<!------MENU SECTION START-->
<?php include('includes/header.php');?>
<!-- MENU SECTION END-->
<div class="content-wrapper">
<div class="container">
<div class="row pad-botm">
<div class="col-md-12">
<h4 class="header-line">
Employee Reports
</h4>
</div>
<div class="row">
<?php if($_SESSION['error']!="")
{?>
<div class="col-md-6">
<div class="alert alert-danger" >
<strong>
Error :
</strong>
<?php echo htmlentities($_SESSION['error']);?>
<?php echo htmlentities($_SESSION['error']="");?>
</div>
</div>
<?php } ?>
<?php if($_SESSION['msg']!="")
{?>
<div class="col-md-6">
<div class="alert alert-success" >
<strong>
Success :
</strong>
<?php echo htmlentities($_SESSION['msg']);?>
<?php echo htmlentities($_SESSION['msg']="");?>
</div>
</div>
<?php } ?>
<?php if($_SESSION['delmsg']!="")
{?>
<div class="col-md-6">
<div class="alert alert-success" >
<strong>
Success :
</strong>
<?php echo htmlentities($_SESSION['delmsg']);?>
<?php echo htmlentities($_SESSION['delmsg']="");?>
</div>
</div>
<?php } ?>
</div>
</div>
<div class="row">
<div class="col-md-10 col-sm-6 col-xs-12 col-md-offset-1"">
<div class="panel panel-info">
<div class="panel-body">
<form role="form" method="post">
<div class="form-group">
<label>
CPF NUMBER<span style="color:red;">*</span>
</label>
<input class="form-control" type="text" name="studentid" id="studentid" autocomplete="off" required />
</div>
<button type="submit" name="report" id="submit" class="btn btn-info">
Generate
</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-heading">
Issued Documents
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>#</th>
<th>Employee Name</th>
<th>Document Name</th>
<th>Reference Number</th>
<th>Issued Date</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<?php
if($query->rowCount() > 0)
{
foreach($results as $result)
{
if(isset($_POST['report']))
{
$studentid=strtoupper($_POST['studentid']);
$sql = "SELECT tblstudents.FullName,tblbooks.BookName,tblbooks.ISBNNumber,tblissuedbookdetails.IssuesDate,tblissuedbookdetails.RetrunStatus,tblissuedbookdetails.id as rid from tblissuedbookdetails join tblstudents on tblstudents.StudentId=tblissuedbookdetails.StudentId join tblbooks on tblbooks.id=tblissuedbookdetails.BookId where tblissuedbookdetails.RetrunStatus is NULL and StudentId=:studentid order by tblissuedbookdetails.id desc";
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
?>
<tr class="odd gradeX">
<td class="center"><?php echo htmlentities($cnt);?></td>
<td class="center"><?php echo htmlentities($result->FullName);?></td>
<td class="center"><?php echo htmlentities($result->BookName);?></td>
<td class="center"><?php echo htmlentities($result->ISBNNumber);?></td>
<td class="center"><?php echo htmlentities($result->IssuesDate);?></td>
<td class="center">
<?php if($result->RetrunStatus==NULL)
{
echo htmlentities("Not Returned Yet");
} else {
echo htmlentities("Returned");
}
?>
</td>
<td class="center">
</td>
</tr>
<?php $cnt=$cnt+1;}}} ?>
</tbody>
</table>
</div>
</div>
</div>
<!--End Advanced Tables -->
</div>
</div>
</div>
</div>
<!-- CONTENT-WRAPPER SECTION END-->
<?php include('includes/footer.php');?>
<!-- FOOTER SECTION END-->
<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.js"></script>
<!-- DATATABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>

Need to put studentid in input field value. So that when form submit, it posted and generate report. Update the following line and check.
<input class="form-control" type="text" name="studentid" id="studentid" autocomplete="off" required value="<?php echo strtoupper($_POST['studentid']); ?>" />

Configuring a login feature

This is my first time using a template. I'm a beginner.
Since I used adminlte template my codes stop working properly.
HTML Code:
<!DOCTYPE html>
enter code here<?php
session_start();
?>
<html>
<head>
<meta charset="UTF-8">
<title>Admin Panel | Log in</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="font-awesome/font-awesome-2/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="ionicons/ionicons2/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/square/blue.css">
<style type="text/css">
.img-bg-mine{
background: url('images/loginbg.jpg') no-repeat center center fixed; background-size: cover;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition login-page img-bg-mine">
<div class="login-box">
<div class="login-logo">
<b>Student</b> Evaluation
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="login.php" method="post">
<div class="form-group has-feedback">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Your Username" name="login_username" id="login_username">
<span id="errorUsername"></span>
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<input type="password" class="form-control" placeholder="Enter Your Password" name="login_password" id="login_password">
<span id="errorPassword"></span>
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn bg-olive btn-flat pull-right btn-lg" name="login" id="login">Sign In</button>
</div>
</div>
</form>
</div>
<!-- /.login-box-body -->
</div>
<!-- jQuery 2.2.3 -->
<script src="plugins/JQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
PHP Code:
<?php
include 'dbcon.php';
?>
<?php
if(isset($_POST['login'])){
$username = mysqli_real_escape_string($conn,$_POST['login_username']);
$password = mysqli_real_escape_string($conn,$_POST['login_password']);
//select user from database
$select_user = "SELECT * from tb_admin where admin_user='$username' and admin_pass='$password'";
//run query
$login =mysqli_query($conn,$select_user);
$count =mysqli_num_rows($login);
$row= mysqli_fetch_array($login);
if ($count > 0){
session_start();
$_SESSION['id']=$row['admin_id'];
echo "<script>window.open('adminpanel.php','_self')</script>";// this part is not working it only shows the word window.open('adminpanel.php','_self') instead of showing the page adminpanel.php
}else
{
echo "<script>alert('Login failed..')</script>";// same here
echo "<script>window.open('index.php','_self')</script>";// same here
}
}
?>
It looks like my script in login.php is not working. It just shows the text nothing more.

Pie chart in jQuery Mobile not showing up

I develop a jQuery mobile site and want to display pie chart, the data fetch form database to show in pie chart. Since the jQuery mobile link to another page using div, I make one div in index.php to display data from database, then when the data is showing up, I can view the data by click on the view link. At this part, I make jQuery load to load page piechart.php when click on the view link. The piechart.php page success called by jQuery load, but pie chart not appear, BUT if I right click on page and click view inspect element, it starts showing up normally the pie chart.
Why do I need to right click to display it??
This is index.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SSPIC</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<meta name="description" content="This site was created from a template originally designed and developed by Codify Design Studio. Find more free templates at http://www.adobe.com/devnet/author_bios/chris_converse.html" />
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/formcalculations.js"></script>
<link href="styles/cakeform.css" rel="stylesheet" type="text/css" />
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="themes/my_company.min.css" />
<link rel="stylesheet" href="includes/overrides.css" />
<script type="text/javascript" src="includes/custom.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<link href="stylesheets/app.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<script src="javascripts/vendor/snap.svg.js"></script>
<script src="javascripts/pizza.js"></script>
<script type="text/javascript">
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
</script>
</head>
<body onload='hideTotal()'>
<div data-role="page" id="home" data-theme="a">
<div data-role="header">
<h1>Homepage</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li class="btn_a">About Us</li>
<li class="btn_s">Services</li>
<li class="btn_l">Search</li>
<li class="btn_c">Upload</li>
<li class="btn_c">Chart</li>
</ul>
</div>
<div data-role="">
</div>
</div>
<div data-role="page" id="locations" data-title="Find a Locations">
<div data-role="header">
<h1>Search Data</h1>
back
</div>
<div data-role="content">
<p></p>
<h2>Search Data</h2>
</div>
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
Home
</div>
<h4>©2013 SSPIC</h4>
</div>
</div>
<div data-role="page" id="contact_us" data-title="Contact Us">
<div data-role="header">
<h1>Upload</h1>
back
</div>
<div data-role="content" class="content_container">
<p><form action="insertimage.php" method="post" enctype="multipart/form-data" name="form1">
<h2 align="center"> </h2>
<h2 align="center">Information</h2>
<table width="63%" border="1" align="center">
<tr>
<td width="40%">Upload File</td>
<td width="60%"><input name="pic" type="file" id="pic" /></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="submit" name="Submit" value="Submit" />
</div></td>
</tr>
</table>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
</form></p>
</div>
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
Home
</div>
<h4>©2013 SSPIC</h4>
</div>
</div>
<div data-role="page" id="chart" data-title="chart Us" class="chart">
<div data-role="header">
<h1>Pie Chart</h1>
back
</div>
<div id="output" data-role="content" class="content_container"></div>
<div data-role="content" class="content_container" id="k_chart">
<p>
<form action="insertimage.php" method="post" enctype="multipart/form-data" name="form1">
<h2 align="center"> </h2>
<h2 align="center">Display File</h2>
<table width="63%" border="1" align="center" class="table_chart">
<tr>
<td width="40%">Bil</td>
<td width="60%">Pusat rawatan</td>
<td width="60%">Pengasas</td>
<td width="60%">Bil pengamal</td>
<td width="60%">Total</td>
<td width="60%">Phone number</td>
<td width="60%">Peratus</td>
<td width="60%">view chart</td>
</tr>
<?php
include("connection.php");
$sel = mysql_query("select * from info");
$a = 1;
while($get_sel = mysql_fetch_array($sel))
{
?>
<tr>
<td width="40%"><?php echo $a++;?></td>
<td width="60%"><?php echo $get_sel['nama_PusatRawatan'];?></td>
<td width="40%"><?php echo $get_sel['nama_Pengasas'];?></td>
<td width="60%"><?php echo $get_sel['bilangan_Pengamal'];?></td>
<td width="40%"><?php echo $get_sel['totalPrice'];?></td>
<td width="60%"><?php echo $get_sel['phonenumber'];?></td>
<td width="60%"><?php echo $get_sel['peratus'];?></td>
<td width="60%"><div class="id"><?php echo $get_sel['id'];?></div><span class="viewBtn">View</span></td>
</tr>
<?php
}
?>
</table>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
</form></p>
</div>
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
Home
</div>
<h4>©2013 SSPIC</h4>
</div>
</div>
<script>
$(document).ready(function(e) {
// Pizza.init();
$('.viewBtn').on('click',function()
{
var id = $(this).closest('td').find('.id').text();
$('#k_chart').hide();
$('#output').load("piechart.php?id="+id);//load page to display pie chart
});
$(window).load(function() {
Pizza.init({
donut: false, // enable donut chart
donut_inner_ratio: 0.4, // between 0 and 1
percent_offset: 35, // relative to radius
stroke_color: '#333',
stroke_width: 0,
show_percent: true, // show or hide the percentage on the chart.
animation_speed: 500,
animation_type: 'elastic' // options: backin, backout, bounce, easein, easeinout, easeout, linear
});
});
});
</script>
</body>
</html>
This one is piechart.php
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="themes/my_company.min.css" />
<link rel="stylesheet" href="includes/overrides.css" />
<link href="stylesheets/app.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script src="javascripts/vendor/snap.svg.js"></script>
<script src="javascripts/pizza.js"></script>
<div data-role="content" class="content_container">
<p>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 style="margin-top:150px;" align="center">Papar peratus lulus pie chart </h1>
<div class="row">
<div class="large-12 columns">
<h3>Graphs</h3>
</div>
</div>
<?php
include("connection.php");
$id_info = $_GET['id'];
$papar = mysql_query("select *from info where id = '$id_info'");
$get_papar = mysql_fetch_array($papar);
if($get_papar['peratus']>0 and $get_papar['peratus']<=50)
{
$xlulus = $get_papar['peratus'];
$lulus = 100 - $xlulus;
}
else
{
$lulus = $get_papar['peratus'];
$xlulus = 100 - $lulus;
}
?>
<div class="row">
<div class="large-4 small-4 columns">
<ul data-pie-id="svg">
<li data-value="<?php echo $xlulus;?>">Tidak memenuhi syarat</li><li data-value="<?php echo $lulus;?>">Memenuhi syarat</li>
</ul>
</div>
<div class="large-8 small-8 columns">
<div id="svg"></div>
</div>
</div>
</p>
</div>
The jQuery code is at the bottom of page index.php..

You need to correctly time your plugin initialization.
First forget about document ready and window load, they will not work correctly with jQuery Mobile application (usually they trigger before jQuery Mobile content is successfully enhanced).
Instead you should learn how to use jQuery Mobile page events, for example pageinit event exists to replace document ready.
Read more about it here.
Now regarding your main problem, your plugin must be initialized during the pageshow event. A lot of visual plugins (carousels, charts ..) require correct page height. When working with jQuery Mobile page height is correctly calculated only during pageshow event, it will be 0 in any other case.
Page event initialization order can be found here.

Links aren't working

I'm not sure what is happening to my contact form on my page- "We Can Help." I watched the tutorial series from Dream Weaver Tutorial, and I tried to tie in reCAPTCHA and Hot Dreamweaver's add-on.
Does anyone know why the navigation and the header picture and the Adobe picture don't show?

You are using absolute addresses to your links and resources to places that only exist on your local machine. Instead use relative addresses in your html.
Example.
Instead of this html:
<img src="file:///I|/Town_Monitoring_Website/images/Logo copy.jpg" width="213" height="75" border="none" />
Do this:
<img src="images/Logo copy.jpg" width="213" height="75" border="none" />
You want to remove all of these references in your html
file:///I|/Town_Monitoring_Website/

All of your image sources and links are pointing to a local file system they need to be either absolute or relative paths. I updated the code on your page to reflect relative paths as long as the file names and images are in the correct directories this will be working code just copy and paste:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- Contact Form Designed by James Brand # dreamweavertutorial.co.uk -->
<!-- Covered under creative commons license - http://dreamweavertutorial.co.uk/permissions/contact-form-permissions.htm -->
<title>Towne Monitoring Service/FAQ's</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="contact/css/contactform.css" rel="stylesheet" type="text/css" />
<link href="css/css style sheet template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nameError = 'Please enter a Name to proceed.';
var phoneError = 'Please enter a valid Phone Number to continue.';
var addressError = 'Please enter a valid Maling Address to continue.';
var emailError = 'Please enter a valid Email Address to continue.';
var commentError = 'Please enter your Message to continue.';
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>
<body onload="MM_preloadImages('images/x.png')">
<div id="container">
<div id="header"><img src="images/Logo copy.jpg" width="213" height="75" border="none" /></div><!-- end div header -->
<div id="nav">
<ul>
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>FAQ's</li>
<li>Did You Know?</li>
<li>We Can Help</li>
</ul>
</div><!-- end dic nav -->
<div id="content">
<table width="1000" border="0">
<tr>
<td width="50"> </td>
<td width="574"> </td>
<td width="312"> </td>
</tr>
<tr>
<td> </td>
<td><div id="for mWrap">
<div id="form">
<form action="contact.php" method="post" id="comments_form">
<div class="row">
<div class="label">Your Name</div>
<!-- end .label -->
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="" />
</div>
<!-- end .input -->
<div class="context">e.g. John Smith or Jane Doe</div>
<!-- end .context -->
</div>
<!-- end .row -->
<div class="row">
<div class="label">Your Email Address</div>
<!-- end .label -->
<div class="input">
<input type="text" id="email" class="detail" name="email" value="" />
</div>
<!-- end .input -->
<div class="context">We will not share your email with anyone or spam you with messages either</div>
<!-- end .context -->
</div>
<!-- end .row -->
<div class="row">
<div class="label">Your Phone Number</div>
<!-- end .label -->
<div class="input">
<input type="text" id="phone" class="detail" name="phone" value="" />
</div>
<!-- end .input -->
<div class="context">(123)-123-1234</div>
<!-- end .context -->
</div>
<!-- end .row -->
<div class="row">
<div class="label">Your Address</div>
<!-- end .label -->
<div class="input">
<input type="text" id="address" class="detail" name="address" value="" /> </div>
<!-- end .input -->
<div class="context">e.g. 123 Cherry ln. Happyville P.A. 18999</div>
<!-- end .context -->
</div>
<!-- end .row --><!-- end .row --><br />
<br />
<div class="submit">
<input type="submit" id="submit" name="submit" value="Send Message" />
</div>
<!-- end .submit -->
<input type="hidden" name="hdwfail" id="hdwfail" value="contact.php" />
</form>
</div><!-- edn #form -->
</div></td>
<td valign="top"><div id="loads"><table width="198" border="0">
<tr>
<td width="192" height="143"><h2>Download's<img src=images/Downloads/Adobe-PDF-Logo.jpg" alt="" width="100" height="100" /></h2>
<p> </p>
<p> </p>
<p> </p>
<p>Click here for Adobe Reader.</p>
</td>
</tr>
<tr>
<td><p>Information Sheet</p>
<p>(.pdf size: 182k)</p>
<p>Company Brochure</p>
<p>(.pdf size: 390k)</p>
<p>Handling Emergencies</p>
<p>(.pdf size: 143k)</p></td>
</tr>
<tr>
<td height="67"> </td>
</tr>
</table></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<!-- end formWrap -->
</div>
<div id="apDiv7">
<table width="1000" border="0">
<tr>
<td width="5"> </td>
<td width="588"><h3>© 2012 TOWNE MONITORING SERVICE, LP ALL RIGHTS RESERVED</h3></td>
<td width="77" align="right"><img src="images/csaa.jpg" width="74" height="40" /></td>
<td width="336"><img src="images/footer2.jpg" width="334" height="40" /></td>
</tr>
</table>
</div><!-- end div7 -->
</div>
</body>
</html>

Categories