Trying to append to CSV file using JS

Question

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!

ControlAltDel · Accepted Answer · 2022-04-29 15:02:25Z

1

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>

answered Apr 29, 2022 at 15:02

ControlAltDel

35.2k10 gold badges60 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Duval Balogun-Palmer Over a year ago

Appreciate the help, @ControlAltDel ! I have made the changes to the script but still no success :( Do you think there is something wrong with the "let csv" variable?

ControlAltDel Over a year ago

@DuvalBalogun-Palmer Try stepping through in the debugger

Collectives™ on Stack Overflow

Trying to append to CSV file using JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related