I am a complete beginner to JavaScript and other web technologies and am currently trying to append the data the user enters into the input form to a CSV file.
This is what I have tried so far:
<form id="form">
Type the latitude of the crime: <input type="text" name="latitude"><br>
Type the longitude of the crime: <input type="text" name="latitude"><br>
Enter the date in which the incident took place: <input type="text" name="latitude"><br>
<input type="button" value="submit" id="submit-btn" onclick="submitCrime">
</form>
<script>
//Clear form once submitted
function clearForm(){
document.getElementById("form").reset();
}
function submitCrime() {
var formData = $("form").serializeArray();
let csv = "data:/Users/duvalbalogun-palmer/Desktop/VGIS/php-shit/assault.csv;charset=utf-8,"; // accept data as CSV
formData.forEach(function(item) {
csv += item.value + ";"; // concat form value on csv var and add ; to create columns (you can change to , if want)
});
var encodedUri = encodeURI(csv);
clearForm();
</script>
</body>
</head>
Whenever clicking on the "submit" button, nothing happens. Any help would greatly be appreciated!
You've got a number of things going on here
<form id="form">
You are posting crime data, so form should have the attribute method="form"' If what you posted isn't a part of a larger servlet / php / aspx file where you are handling the form submission, you should set the action` attribute on your form.
Type the latitude of the crime: <input type="text" name="latitude"><br> Type the longitude of the crime: <input type="text" name="latitude"><br> Enter the date in which the incident took place: <input type="text" name="latitude"><br> <input type="button" value="submit" id="submit-btn" onclick="submitCrime"> </form>
You need to change the name attribute in longitude and date. Also, while you are at it, change type to number and set min and max values for latitude and longitude, and date should be type=date
And as for your submitCrime function, you need to call return true at the end or the data won't get submitted.
<script>
//Clear form once submitted
function clearForm(){
document.getElementById("form").reset();
}
function submitCrime() {
var formData = $("form").serializeArray();
let csv = "data:/Users/duvalbalogun-palmer/Desktop/VGIS/php-shit/assault.csv;charset=utf-8,"; // accept data as CSV
formData.forEach(function(item) {
csv += item.value + ";"; // concat form value on csv var and add ; to create columns (you can change to , if want)
});
var encodedUri = encodeURI(csv);
clearForm();
</script>