Am new to ajax and I can retrieve data from the database using ajax but to insert data into database using ajax is not working but this is the script i have on ground.
This is the PHP script
<?php
try {
$linkas = 2;
require_once 'db/DBConnect.php';
$errors = [];
$good = true;
if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['testimony'])):
$testimony = filter_input(INPUT_POST, 'testimony', FILTER_SANITIZE_STRING);
if (strlen($testimony) < 20):
//report error and do not go
$errors[] = 'It has to be more than 20 characters' . '<br>';
$good = false;
else:
$good = true;
if ($good):
$insertTestimony = 'INSERT INTO testimony(content, j_member_id, time_send) ';
$insertTestimony .= 'VALUES (:testimony, :user_id, NOW())';
$insert = $conn1->prepare($insertTestimony);
$insert->bindValue(':testimony', $testimony, PDO::PARAM_STR);
$insert->bindValue(':user_id', $linkas, PDO::PARAM_INT);
$insert->execute();
if ($insert->rowCount() == 1):
//success message
$_SESSION['msg'] = 'Thanks for the testimony';
header('Location: index.php');
exit();
else:
//fail message
echo 'Something is wrong, please resubmit';
endif;
endif;
endif;
endif;
} catch (Exception $e) {
echo 'Database error: ' . $e->getMessage() . ' in ' . $e->getFile() . ':' . $e->getLine();
}
?>
This is the HTML script
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="">
<article>
<div id="testifyForm">
<form action="" method="post" id="testimony" accept-charset="utf-8">
<fieldset>
<legend>Your testimony</legend>
<label for="testimony"></label>
<textarea id="testimony" name="testimony" maxlength="300"></textarea>
</fieldset>
<input type="submit" name="testify" id="testify" value="Testify">
</form>
</div>
</article>
</section>
<script src="js/ajax.js"></script>
<script src="testify.js"></script>
</body>
</html>
And this is the javascript
function validateForm() {
'use strict';
var testimony = document.getElementById('testimony');
if ((testimony.value.length > 20)) {
var ajax = getXMLHttpRequestObject();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
if ((ajax.status >= 200 && ajax.status < 300) || (ajax.status == 300)) {
//return ajax.responseText
document.getElementById('testifyForm').innerHTML = ajax.responseText;
} else {
document.getElementById('theForm').submit();
//return ajax.statusText
}//End of status
ajax = null;
}//End of readyState
};//End of onreadystatechange
//return true;
ajax.open('POST', 'empty.php', true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var data = 'testimony=' + encodeURIComponent(testimony.value);
ajax.send(data);
return false;
} else {
document.getElementById('error').innerHTML = 'Characters must be more than 20 words';
return false;
}//End of testimony
}
function init() {
'use strict';
if (document && document.getElementById) {
var testifyForm = document.getElementById('testifyForm');
testifyForm.onsubmit = validateForm;
}
}
window.onload = init;