Marc Marc - 1 month ago 5
Ajax Question

AJAX will not reload the page

I am new to AJAX and I am having trouble getting AJAX fired by button click. All of the solutions I found on Stack Overflow are using JQuery syntax however I'm tasked to use JavaScript and JSON to return and display the data on browser. Ironically, it is working when the data is sent to MySQL database with no problems. Getting AJAX fired up is the main issue.

I am trying to load the data on the same screen every time an user enters a new data. Everything is working and finding no error but AJAX will not fire an event.

Here's AJAX code:

function addNewEntry() {

var today = document.getElementById("dateoflogId").value;
var log = document.getElementById("logdescId").value;
var status = document.getElementById("successworkId").value;

if ((today === null || today === '') ||
(log === null || log === '') ||
(status === null || status === '')) {
alert("Fields cannot be blank. Please fill in the blanks.");
return false;
}

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var text = request.responseText;
var json = JSON.parse(text);
var table = document.getElementById("tblLogEntry");

var newRow = table.insertRow(1);

var newCell = newRow.insertCell(0);
newCell.innerHTML = json.dateoflog;

newCell = newRow.insertCell(1);
newCell.innerHTML = json.logdesc;

newCell = newRow.insertCell(2);
newCell.innerHTML = json.successwork;
}
}

request.open("POST", "LogEntryFile.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("dateoflog=" + today + "&logdesc=" + log + "&successwork=" + status);

document.getElementById("dateoflogId").value = "";
document.getElementById("logdescId").value = "";
document.getElementById("successworkId").value = "";
}


PHP web page snippet (LogEntry.php):

<section id="formEntry">
<h2>New Log Entry</h2>
<form id="logentry" name="logentry" action="LogEntry.php" method="post">
<fieldset>
<table>
<th class="fieldHeader dateCol">Date</th>
<th class="fieldHeader">Training</th>
<th class="fieldHeader successCol">Success?</th>
<tr>
<td class="inputField"><input id="dateoflogId" type="text" name="dateoflog" form="logentry" size="15" maxlength="15"></td>
<td class="inputField"><input id="logdescId" type="text" name="logdesc" form="logentry" size="50" maxlength="50"></td>
<td>
<select id="successworkId" class="styleDropDownList" name="successwork">
<option value="">Select:</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td><input type="submit" value="Add new log" class="styleButton" onclick="addNewEntry()"></td>
</tr>
</table>
</fieldset>
</form>
<hr>
<h2>Previous Log Entry</h2>
<table id="tblLogEntry">
<tr>
<th class="dateCol dateSize">Date</th>
<th class="trainingCol">Training</th>
<th class="successCol successSize">Success?</th>
</tr>
</table>
</section>


PHP File snippet (LogEntryFile.php):

$log = new Log();

$log->dateoflog = $_POST["dateoflog"];
$log->training = $_POST["logdesc"];
$log->success = $_POST["successwork"];

$isLogValid = $log->validateLog();

if ($isLogValid) {

echo ('{ "dateoflog" : "' . $log->dateoflog . '", ' .
'"logdesc" : "' . $log->training . '", ' .
'"successwork" : "' . $log->success . '" }');
} else {
header("Location: index.php");
}


UPDATE: After multiple testing attempts, I caught the data appeared but disappeared using Chrome. Now I'm not sure how to make the data stays there displaying.

Answer

The Problem: If you look at this line <input type="submit" value="Add new log" class="styleButton" onclick="addNewEntry()"> you will see its a submit button so when user enters some values and clicks that your form gets submitted without doing any ajax stuff .Usually the practice is to bind on form's submit event and cancel its default ie .form form submission and run your own ajax code to send data to the server but i guess that would be a major refactoring so i would suggest a tiny fix that probably should work.

Just change the type of that submit button to a regular button .Like this

<input type="button" value="Add new log" class="styleButton" onclick="addNewEntry()">