This problem seems to return lots of times, but I can't finds a clear answer.
So what I want to do is:
- a form with multi input fields
- a button to send the information to a mysql database
- with a php script that manages the connection with the database, inserts the information and fetches it back.
- with an ajax script that calls that php script and prints the result back.
- no reload of the whole page, just in the section div
With what specific script can you do that?
There are lots of different libraries, do they do the same? Or do you only need a small part of that?
Maybe there needs to be a specific tutorial for that, where can I find it if it exists?
Ok, I have some code already:
The main one: guestbook.php
Code:
<html>
<head>
<script src="ajax.js"></script>
</head>
<body>
<div id="addgb">
<form>
<ul>
<li><input name="datum" id="datum" value="<?php echo date("d-m-Y"); ?>" type="hidden"></li>
<li><input name="tijd" id="tijd" value="<?php echo date("H:i:s"); ?>" type="hidden"></li>
<li><input name="ip" id="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>" type="hidden"></li>
<li>Naam: <input name="naam" id="naam" maxlength="50"></li>
<li>E-mail: <input name="email" id="email" maxlength="50"></li>
<li>Website: <input name="website" id="website" maxlength="50"></li>
<li>Motto: <input name="motto" id="motto" maxlength="50"></li>
<li>Bericht: <textarea name="bericht" id="bericht" maxlength="600"></textarea></li>
<li><button type="submit" name="submit" value="submit" onclick="addGuests(this.value)">Verstuur</button></li>
</ul>
</form>
</div>
<div id="showgb">
<!-- the guestbook comments should come right here -->
</div>
</body>
</html>
The ajax.js file goes like this:
Code:
var xmlHttp
function addGuests(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="gbadd.php"
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function showGuests(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="gbshow.php"
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("showgb").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Further, the php codes of gbadd.php and gbshow.php:
gbadd.php:
Code:
<?php
if(isset($_POST['submit'])) {
if((strlen($_POST['naam']) == 0) || (strlen($_POST['bericht']) == 0) || (!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$", $_POST['email'])))
{
echo "it is not working fill in again";
}
else {
$datum = $_POST['datum'];
$tijd = $_POST['tijd'];
$ip = $_POST['ip'];
$bericht = $_POST['bericht'];
$bericht = strip_tags($bericht);
$bericht = htmlentities($bericht);
$email = $_POST['email'];
$email = strip_tags($email);
$email = htmlentities($email);
$website = $_POST['website'];
$website = strip_tags($website);
$website = htmlentities($website);
$motto = $_POST['motto'];
$motto = strip_tags($motto);
$motto = htmlentities($motto);
$naam = $_POST['naam'];
$naam = strip_tags($naam);
$naam = htmlentities($naam);
$bericht = str_replace("\n", "<br>", $bericht);
$sql = "INSERT INTO `trouwboek` ";
$sql .= "(ip, naam, email, website, motto, bericht, datum, tijd) ";
$sql .= "VALUES ";
$sql .= "('$ip', '$naam', '$email', '$website', '$motto', '$bericht', '$datum', '$tijd') ";
$sql .= "; ";
require_once('connectionfile.php');
$verbinding = @mysql_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD) or die(mysql_error());
mysql_select_db("databasename") or die(mysql_error());
$toegevoegd = mysql_query($sql) or die(mysql_error());
mysql_close($verbinding);
}
}
else {
echo "Please, fill in the form above!<p><br>";
}
?>
gbshow.php:
Code:
<?php
require_once('connectionfile.php');
$verbinding = @mysql_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD) or die(mysql_error());
mysql_select_db("databasename") or die(mysql_error());
$sql = "SELECT * FROM trouwboek ORDER BY id DESC LIMIT 0, 30";
$tonen = mysql_query($sql) or die (mysql_error());
while ($rij = mysql_fetch_assoc($tonen)) {
$datum = $rij["datum"];
$tijd = $rij["tijd"];
$naam = $rij["naam"];
$email = $rij["email"];
$website = $rij["website"];
$motto = $rij["motto"];
$bericht = $rij["bericht"];
echo "<div id=\"kaderboven\"><ul><li><b>". $naam ."</b> plaatste dit bericht op ". $datum ." om ". $tijd .".</li></ul></div>";
echo "<div id=\"kadermidden\"><ul><li>". $bericht ."</li><li><i>- ". $motto ." -</i></li></ul></div>";
echo "<div id=\"kaderonder\"><ul><li><a href=\"". $website ."\" target=\"_blank\">". $website ."</a></li></ul></div>";
}
mysql_free_result($tonen);
mysql_close($verbinding);
?>
But the thing is that it's not working. Nothing runs or loads or shows up.
What am I doing wrong?
The php guestbook code works perfect in a normal flow, when the whole page reload.
But I don't want the whole page to reload, because there's a music player in another separate div, and it may not reload.
That's why I use AJAX for only the typical section to reload.
