I am tasked to use JavaScript and JSON to return and display the data on browser. I am very new to AJAX and I am having trouble getting AJAX fired by button click.The Main issue is getting AJAX fired up.
I am trying to load the data on the same screen every time an user enters a new data.
PHP Code:
<h2>Submit Recipes</h2>
<form id="addRecipes" name="addRecipes" action="Welcome.php"method="POST">
<fieldset>
<legend>Submit Recipes</legend>
<textarea id="recipesId" name="recipes" rows="6" cols="70"></textarea>
<br/>
<input type="button" value="Submit" name="submit" onclick="submitRecipes()"/>
</fieldset>
</form>
<br/>
<table id="recipesTbl" border="1" >
<tr>
<th class="row-datetime" name="datetime">DateTime </th>
<th class ="row-recipes" name="recipes"> Recipes </th>
</tr>
</table>
Ajax Code:
function submitRecipes() {
var recipes = document.getElementById("recipesId").value;
if (recipes == null || recipes == "") {
alert("Please enter the recipes");
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("recipesTbl");
var newRow = table.insertRow(1);
var newCell = newRow.insertCell(0);
newCell.innerHTML = json.datetime;
newCell = newRow.insertCell(1);
newCell.innerHTML = json.recipes;
}
}
request.open("POST", "SubmitRecipes.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("recipes=" + recipes);
document.getElementById("recipesId").value = "";
}
PHP File Snippet:
<?php
$recipes= $_POST["recipes"];
date_default_timezone_get('UTC');
$datetime = date("Y-m-d H:i:s");
storeRecipes($recipes, $datetime);
echo ('{ "datetime" : "'. $datetime. '",'.
'"recipes": "'.recipes .'"}');
?>
