I am making a map painter programme, that takes in X, Y and colour data from user input and stores in a Google spreadsheet.
The data is sent to the spreadsheet as a form, following this solution. This solution works if the user is filling out the 'form' and hitting the 'submit' button. I have the following EventListener to listen and intercept:
form.addEventListener("submit", function(e) {
e.preventDefault();
const newData = new FormData(form);
const mapData = e.target.action
console.log('+++++++++INTERCEPTING++++++++++')
fetch(mapData, {
method: 'POST',
body: newData,
})
LoadMap()
})
However, when the user is simply painting I want a way to send the X, Y and colour data to the spreadsheet without the need for the user to hit submit. For this, I have the following function:
function paint() {
var paintColour = document.getElementById("paintFill").value
gridCTX.fillStyle = paintColour;
//PAINTS THE SQUARE
console.log('')
console.log('+++++++++PAINTING DATA++++++++++')
console.log('Painting ' + gridCTX.fillStyle + ' at ' + rx + ',' + ry)
gridCTX.fillRect(rx * tileSize, ry * tileSize, tileSize, tileSize)
paintArray.push({x:rx, y: ry, z: rz, fill: paintColour})
console.table(paintArray)
//AUTOMATICALLY FILL EDITOR AS PAINTING
document.getElementById('testFill').value = paintColour
//AUTOMAGICALLY SUBMIT FORM DATA
document.forms['mapData'].submit();
//NEED TO PREVENT DEFAULT
}
When paint() is called and document.forms['mapData'].submit() I know that the EventListener is not triggering on "submit," and therefore refers to clicking the button rather than the form being sumbitted programmatically.
So, I am not sure how to proceed with my programme. I have some ideas... is there some other event other than 'submit' that can handle the programmatic form submission? Or perhaps there is a way I could put the fetch etc. that is contained within the EventListener function(e) into the paint() function.
I want to avoid the user being redirected to this screen:
I realise Post and Get are not 'secure' but the data is not sensitive. I am a beginner with Javascript, so any help in resolving this issue would be much appreciated.
This is not the same as this question which asks how to listen to the submit button being clicked on a form. I want to 'listen' or act contingently upon the document.forms['mapData'].submit() line.
