I'm newbie in javascript and I need help. In code i need to add two delete button:
- delete one object created
- delete all objects created
This buttons need to delete object in a json file. I don't know how to write the function, please help! The code is created in html, javascript and php, and send by ajax. Objects must be deleted in the site, too.
function checkInputText(value, msg) {
if (value == null || value == "") {
alert(msg);
return true;
}
return false;
}
function Todo(index, part, pieces, weight) {
this.index = index;
this.part = part;
this.pieces = pieces;
this.weight = weight;
}
var todos = new Array();
window.onload = init;
function init() {
var submitButton = document.getElementById("submit");
submitButton.onclick = getFormData;
getTodoData();
}
function getTodoData() {
var request = new XMLHttpRequest();
request.open("GET", "todo.json");
request.onreadystatechange = function() {
if (this.readyState == this.DONE && this.status == 200) {
if (this.responseText) {
parseTodoItems(this.responseText);
addTodosToPage();
}
else {
console.log("error");
}
}
};
request.send();
}
function parseTodoItems(todoJSON) {
if (todoJSON == null || todoJSON.trim() == "") {
return;
}
var todoArray = JSON.parse(todoJSON);
if (todoArray.length == 0) {
console.log("Error: the to-do list array is empty!");
return;
}
for (var i = 0; i < todoArray.length; i++) {
var todoItem = todoArray[i];
todos.push(todoItem);
addTodosToPage(todoItem);
}
}
function addTodosToPage() {
var table = document.getElementById("todoList");
var tr = document.createElement("tr");
var index = document.getElementById('index').value;
var part = document.getElementById('part').value;
var pieces = document.getElementById('pieces').value;
var weight = document.getElementById('weight').value;
tr.innerHTML = "<td>" + index + "</td><td>" + part + "</td><td>" + pieces + "</td><td>" + weight + "<td>";
table.appendChild(tr);
}
function checkInputText(value, msg) {
if (value == null || value == "") {
alert(msg);
return true;
}
return false;
}
function saveTodoData() {
var todoJSON = JSON.stringify(todos);
var request = new XMLHttpRequest();
var URL = "save.php?data=" + encodeURI(todoJSON);
request.open("GET", URL);
request.setRequestHeader("Content-Type",
"text/plain;charset=UTF-8");
request.send();
}
<table>
<thead>
<tr>
<th>Index</th>
<th>Part</th>
<th>Pieces</th>
<th>Weight</th>
</tr>
</thead>
<tbody id="todoList">
</tbody>
</table>
<form>
<fieldset>
<div class="tableContainer">
<label for="index">
<select id="index" name="index">
<option hidden="" >Index</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</label>
<input placeholder="part" id="part" />
<input placeholder="pieces" id="pieces" />
<input placeholder="weight" id="weight" />
<input type="button" id="submit" value="ADD" onclick="addTodosToPage()">
</div>
</fieldset>
</form>
<?php
if (function_exists('get_magic_quotes_gpc') && get_magic_quotes_gpc()) {
function strip_slashes($input) {
if (!is_array($input)) {
return stripslashes($input);
} else {
return array_map('strip_slashes', $input);
}
}
$_GET = strip_slashes($_GET);
$_POST = strip_slashes($_POST);
$_COOKIE = strip_slashes($_COOKIE);
$_REQUEST = strip_slashes($_REQUEST);
}
function customError($errno, $errstr) {
echo "<b>Error:</b> [$errno] $errstr<br>";
echo "Ending Script";
die("Ending Script");
}
set_error_handler("customError");
$myData = $_GET["data"];
$myFile = "todo.json";
$fileHandle = fopen($myFile, "w");
fwrite($fileHandle, $myData);
fclose($fileHandle);
?>
</div>