Bellow is my code:
How do I pass the data to php file?
Right now I cannot see anything “undefined”
How do I pass the data to php file?
Code:
<!DOCTYPE html>
<html>
<head>
<title>SomeTitle</title>
<script>
var object_1 =
{
id: "test_1",
name: "test_1",
title: "Object 1",
edit: function()
{
return "<div id=\"obj1\">" +
"<label for=\"object1\">" + this.title + "</label>" +
"<input type=\"text\" id=\"" + this.id + "\" name=\"" + this.name + "\">" +
"</div>";
},
display: function(Data)
{
return "<div id=\"obj2\">" +
"<span>" + this.title + "</span>" +
"<span>" + this.data(Data) + "</span>" +
"</div>";
},
};
var object_2 =
{
id: "test_2",
name: "test_2",
title: "Object 2",
data: function(theData){ return theData; },
edit: function()
{
return "<div id=\"obj2\">" +
"<label for=\"object2\">" + this.title + "</label>" +
"<input type=\"text\" id=\"" + this.id + "\" name=\"" + this.name + "\">" +
"</div>";
},
display: function(Data)
{
return "<div id=\"obj2\">" +
"<span>" + this.title + "</span>" +
"<span>" + this.data(Data) + "</span>" +
"</div>";
},
};
var object_3 =
{
id: "test_3",
name: "test_3",
title: "Upload File",
data: function(theData){return theData; },
edit: function()
{
return "<div id=\"obj3\">" +
"<label for=\"object3\">" + this.title + "</label>" +
"<input type=\"file\" id=\"" + this.id + "\" name=\"" + this.name + "\">" +
"</div>";
},
display: function(Data)
{
return "<div id=\"obj2\">" +
"<span>Uploaded File:</span>" +
"<span>" + this.data(Data) + "</span>" +
"</div>";
},
};
var object_4 =
{
edit: function()
{
return "<div id=\"obj4\">" +
"<input type=\"button\" onclick=\"submitForm()\" value=\"uploading Form\">" +
"</div>";
},
display: function(){ return ""; }, //nothing to show
};
var objArray = ["object_1","object_2","object_3","object_4"];
function editForm()
{
let objEdit = "";
for(let i=0, iLen=objArray.length; i<iLen; i++)
{ objEdit = objEdit + eval(objArray[i] + ".edit()"); }
document.getElementById("myData").innerHTML = objEdit;
}
function displayForm()
{
let objDisplay = "";
let someData = fromSomewhereArr();
for(let i=0, iLen=objArray.length; i<iLen; i++)
{ objDisplay = objDisplay + eval(objArray[i] + ".display('" + someData[i] + "')"); }
document.getElementById("myData").innerHTML = objDisplay;
}
function submitForm()
{
let data = [];
function sendFileToStoreInFileSystem(data2)
{ //data2 does not show up ;(
function sendToServer(file, data3)
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{ alert("File stored"); }
};
xhttp.open("POST", file, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(data3);
}
sendToServer("/file.php", "filename=" + data2);
}
for(let i=0, iLen=objArray.length; i<iLen; i++)
{
let dataID = eval(objArray[i] + ".id");
let dataValue = document.getElementById(" + dataID + ");
if(dataValue){ data.push(dataValue.value); }
}
//let processed = processData(data);
//saveDataIntoIndexedDB(processed);
//sendDataToStoreInServer(processed);
sendFileToStoreInFileSystem(data[2]); //??? store data collected by object_3 (file: picture or pdf)
//How to send data(object_3 (file: picture or pdf)) to a php file, right now my file.php is not getting anything
}
</script>
</head>
<body>
<h1>My Application</h1><br>
<div id="myData"></div><br><br>
<input type="button" onclick="editForm()" value="Edit Form">
<input type="button" onclick="displayForm()" value="Display Form">
</body>
</html>
Right now I cannot see anything “undefined”