<form id="book_form" method="POST" action="/submit/book">
<div id="message">
<?php if (!empty($_SESSION['messages'])) echo $_SESSION['messages'];?>
</div>
<div>
<label for="title">Title</label>
<input type="text" name="title" id="title" class="u-full-width" autocomplete="off" value="<?php if (!empty($_SESSION['title'])) echo $_SESSION['title'];?>">
</div>
<div>
<label for="author">Author</label>
<input type="text" name="author" id="author" class="u-full-width" autocomplete="off" value="<?php if (!empty($_SESSION['author'])) echo $_SESSION['author'];?>">
</div>
<div>
<label for="isbn">ISBN#</label>
<input type="text" name="isbn" id="isbn" class="u-full-width" autocomplete="off" value="<?php if (!empty($_SESSION['isbn'])) echo $_SESSION['isbn'];?>">
</div>
<div>
<input type="submit" name="submit" value="Submit" class="u-full-width">
</div>
</form>document.getElementById('book_form').addEventListener('submit', function(event)
{
var title = document.getElementById('title').value,
author = document.getElementById('author').value,
isbn = document.getElementById('isbn').value;
title = title.trim();
author = author.trim();
isbn = isbn.trim();
var params = 'title=' + title + '&author=' + author + '&isbn=' + isbn + '&submit=Submit';
getAjax('POST', '/submit/book', params, getShowAlert);
event.preventDefault();
}, false);function getAjax(method, uri, params, action)
{
xhr.open(method, uri, true);
if (xhr && method === 'GET')
{
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
}
else if (xhr && method === 'POST')
{
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
xhr.onreadystatechange = action;
xhr.send(params);
}var getShowAlert = function()
{
if (xhr.readyState === 4)
{
if (xhr.status === 200)
{
var mes = JSON.parse(xhr.responseText);
if (mes.message.error)
{
showAlert(mes.message.error, 'error');
}
else if(mes.message.success)
{
getAjax('GET', '/', null, getContent);
showAlert(mes.message.success, 'success');
clearFields();
}
}
else console.log(xhr.status + ' (' + xhr.statusText + ')');
}
}function isAjax() { return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH'])) ? true : false;}
$uri = $_SERVER['REQUEST_URI'];
else if ($uri === '/submit/book')
{
if (isAjax())
{
if ($_SERVER['REQUEST_METHOD'] === 'POST')
{
if (isset($_POST['submit']) && !empty($_POST['submit']))
{
$title = htmlspecialchars(trim($_POST['title']));
$author = htmlspecialchars(trim($_POST['author']));
$isbn = htmlspecialchars(trim($_POST['isbn']));
if (empty($title) || empty($author) || empty($isbn)) echo '{"message":{"error":"Please fill in all fields"}}';
else
{
if ($models->insertItem($title, $author, $isbn)) echo '{"message":{"success":"Book item create!"}}';
else echo '{"message":{"error":"Book item no create!"}}';
}
}
}
}
else
{
if ($_SERVER['REQUEST_METHOD'] === 'POST')
{
if (isset($_POST['submit']) && !empty($_POST['submit']))
{
$title = htmlspecialchars(trim($_POST['title']));
$author = htmlspecialchars(trim($_POST['author']));
$isbn = htmlspecialchars(trim($_POST['isbn']));
if (empty($title) || empty($author) || empty($isbn))
{
$_SESSION['title'] = $title;
$_SESSION['author'] = $author;
$_SESSION['isbn'] = $isbn;
$_SESSION['messages'] = '<div class="error">Please fill in all fields</div>';
header('Location: /');
exit;
}
else
{
if ($models->insertItem($title, $author, $isbn))
{
$_SESSION['messages'] = '<div class="success">Book Added!</div>';
header('Location: /');
exit;
}
}
}
}
}
}(function()
{
var tabMenu = document.getElementById('tabMenu');
for(var tM = 0; tM < tabMenu.children.length; tM++)
{
tabMenu.children[tM].children[0].onclick = function()
{
history.pushState(null, null, this.href);
ajax('POST', '/app/controllers/route.php', 'controller=' + location.pathname);
return false;
}
}
function ajax(method, puth, param)
{
var xhr = new XMLHttpRequest();
xhr.open(method, puth, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onreadystatechange = function()
{
if(xhr.readyState === 4)
{
if(xhr.status === 200)
{
var fh5comain = document.getElementById('fh5co-main');
fh5comain.innerHTML = xhr.responseText;
}
}
}
xhr.send(param);
}
window.onpopstate = function()
{
ajax('POST', '/app/controllers/route.php', 'controller=' + location.pathname);
}
}());