Menu
Hopefully someone can help. I have a customers database table which I am trying to display on a page using jquery datatables. That page will also contain a form to which I can input data and this will update the database and display on the table below. I have 3 files which I am using. Here is the code:
index.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
/* Table initialisation */
$(document).ready(function() {
$('#datatable').dataTable( {
"sDom": "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>"
});
});
</script>
<script type="text/javascript" language="javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#htmlForm').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#datatable',
resetForm: 'true',
// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$('#datatable').fadeIn('slow');
}
});
});
</script>
</head>
<body>
<form id="htmlForm" action="customers.php" method="post">
First: <input type="text" name="first" /><br/>
Last: <input type="text" name="last" /><br/>
Phone: <input type="text" name="phone" /><br/>
Mobile: <input type="text" name="mobile" /><br/>
Fax: <input type="text" name="fax" /><br/>
Email: <input type="text" name="email" /><br/>
Web: <input type="text" name="web" /><br/><br/>
<input id="btnReload" value="Add Customer" type="submit">
</form>
<br />
<!---------------------
<-- CUSTOMER TABLE ----
----------------------->
<?php
//MySQL Database Connect
include 'customers.php';
?>
</body>
</html>
customers.php
<?php
//MySQL Database Connect
include 'config.php';
$_POST['first'] = "undefine";
$_POST['last'] = "undefine";
$_POST['phone'] = "undefine";
$_POST['mobile'] = "undefine";
$_POST['fax'] = "undefine";
$_POST['email'] = "undefine";
$_POST['web'] = "undefine";
$sql="INSERT INTO contacts (first, last, phone, mobile, fax, email, web)
VALUES
('$_POST[first]','$_POST[last]','$_POST[phone]','$_POST[mobile]','$_POST[fax]','$_POST[email]','$_POST[web]')";
if (!mysql_query($sql,$db))
{
die('Error: ' . mysql_error());
}
$query="SELECT * FROM contacts";
$result=mysql_query($query);
?>
<h2>Customers Table</h2>
<?php
$query="SELECT * FROM contacts";
$result=mysql_query($query);
?>
<table cellpadding="0" cellspacing="0" border="0" class="bordered-table zebra-striped" id="datatable">
<thead>
<tr>
<th>First</th>
<th>Last</th>
<th>Phone</th>
<th>Mobile</th>
<th>Fax</th>
<th>Email</th>
<th>Web</th>
</tr>
</thead>
<?php
$num=mysql_numrows($result);
$i=0;
while ($i < $num) {
$first=mysql_result($result,$i,"first");
$last=mysql_result($result,$i,"last");
$phone=mysql_result($result,$i,"phone");
$mobile=mysql_result($result,$i,"mobile");
$fax=mysql_result($result,$i,"fax");
$email=mysql_result($result,$i,"email");
$web=mysql_result($result,$i,"web");
?>
<tbody>
<tr>
<td><?php echo $first ?></td>
<td><?php echo $last ?></td>
<td><?php echo $phone ?></td>
<td><?php echo $mobile ?></td>
<td><?php echo $fax ?></td>
<td><?php echo $email ?></td>
<td><?php echo $web ?></td>
</tr>
<?php
$i++;
}
?>
config.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "address";
$prefix = "";
$db = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $db) or die("Could not select database");
?>
It's working reasonably well at the moment the form is updating the table when I input data but everytime I reload the page a blank record gets inserted into the database. Could someone please advise on the best solution to this problem.
440
asked Jul 06 '26 19:07
Empty rows are being inserted because your insert code runs even if the form was not submitted. You can fix this by checking to make sure that it is a POST operation before inserting:
include 'config.php';
if($_SERVER['REQUEST_METHOD'] == 'POST') {
// your insertion code here
}
//or even better:
if (!empty($_POST)) {
//insertion code
}
$query="SELECT * FROM contacts";
$result=mysql_query($query);
...
However, you have a more serious problem in that you are not sanitizing your input. What if somebody enters '); DELETE FROM contacts; in your web field? This is known as an SQL Injection attack.
To avoid it, you should either use prepared statements or use mysql_real_escape_string to protect your application from this sort of attack.
102
answered Jul 09 '26 14:07
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With