I have a form like this in index.php file.
<form >
<input type="text" id="fname" >
<input type="text" id="lanme" >
<input type="button" id="submit" value="send">
</form>
I receive two input from user.when user click on send button a jquery function called and send fname and lname to record.php file.this is jquery function.
$(document).ready (function() {
$("#submit").click(fucntion(){
$fname=$("#fname").val();
$lanme=$("#lname").val();
$.post("record.php") , { fname: fname , lname : lname }).done(function(data){
alert(data);
});
});
});
and this is record.php file
<?php
$fname=$_POST['fname'];
$lanme=$_POST['lanme'];
$mysqli=new mysqli(host,username,password,database);
$stmt=$mysqli->prapare("INSERT INTO info (fname , lname) VALUES (?,?))";
$stmt->bind_param("ss",$fname , $lname);
$stmt->execute();
?>
In index.php I print the "table" .i use this code to print table in index.php file.
<?php
try {
$dbh = new PDO('mysql:host=HOST;dbname=DATABASENAME', $user, $password);
$sth = $dbh->prepare('SELECT * from info ');
$sth->execute();
$result = $sth->fetchAll();
} catch (PDOException $e) {
print "Error!: " . $e->getMessage() . "<br/>";
die();
}
?>
<table>
<tbody>
<tr>
<td>fname</td>
<td>lname</td>
</tr>
<?php foreach($result as $row) : ?>
<tr>
<td><?php echo $row[0] ; ?></td>
<td><?php echo $row[1] ; ?></td>
</tr>
<?php endforeach ; ?>
</tbody>
</table>
All the above code work and I don't have any problems with it.
When user enters the value fname and lname and click on the send button, fname and lname send to the server and store in data base. If user wants to see result in table he/she must refresh page, but I want to show result on table without refreshing the page. Otherwise when user clicks on the send button and send the data the table in the index.php dynamically change and dynamically show the result to the user.
You have to add the row manually (from js). In my script i use the underscore library:
var template = _.template('<tr><td><%= fname %></td><td><%= lname %></td></tr>');
$.post("record.php", {fname: fname, lname : lname}).done(function() {
$('table tr:last-child').after(template({fname: fname, lname: lname});
});
BTW: You should use PDO or mysqli not both.
i Think the best way is to submit your form via Ajax and in the success-callback u attach your new row into your table e.g. with jQuery's .append(). So you dont have to reload your page at all ..
Good luck
You can make ajax request ( repeatedly ) from index pages and check if any new entries have been added. But it is really a overhead and effects the overall performance.
Have a look at some tools like juggernaut or PeriodicalUpdater
You need to make those steps: