0

I've got a form that I'd like to be able to download offline, that should be compatible with most, if not all browsers (IE10,11 especially). I've seen a couple of solutions that don't work on IE or Chrome.

I've been trying to figure out how to do it in JQuery. A user is meant to fill out the form, and when they submit, the form should download a CSV file locally.

Unfortunately, I'm unable to use a server or any PHP, so I've resorted to JQuery/JavScript.

Here's what I have so far:

HTML5 Form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>

<div class="container-fluid">
    <form action="" id="formCsv" style="padding-top: 20px">
        <div class="form-group row">
            <label for="clientName" class="col-lg-1">Client Name</label>
            <div class="col-lg-3">
            <input type="text" name="Name" class="form-control" id="clientName" required>
            </div>
        </div>
        <div class="form-group row">
            <label for="clientEmail" class="col-lg-1">Client Email</label>
            <div class="col-lg-3">
                <input type="email" name="Email" class="form-control" id="clientEmail"  >
            </div>
        </div>
        <div class="form-group row">
            <label for="clientCountry" class="col-lg-1">Client Country</label>
            <div class="col-lg-3">
                <input type="text" name="Country" class="form-control" id="clientCountry" >
            </div>
        </div>
        <div class="form-group row">
            <label for="clientState" class="col-lg-1">Client State</label>
            <div class="col-lg-3">
                <input type="text" name="State" class="form-control" id="clientState" >
            </div>
        </div>
        <input class="btn btn-primary" id="Submit" type="button" value="Submit">
    </form>
</div>

<div id="results"></div>

<script src="formArray.js"></script>
</body>
</html>

JavaScript file that takes inputs and creates array (formArray.js)

$(document).ready(function () {
    $("#Submit").click(function (e) {
        var x = $("form").serializeArray();
            $.each(x, function (i, field) {
                $("#results").append(field.name + ":" + field.value+ '</br>');
            });
    });
});

How would I then have it so that when a user clicks "submit", a correctly formatted CSV file is generated?

boyshiny
  • 1
  • 3
  • Possible duplicate of [Javascript: Create and save file](http://stackoverflow.com/questions/13405129/javascript-create-and-save-file) – CodingWithSpike Aug 22 '16 at 02:39
  • Many duplicates; short answer is no good way in IE without Flash. In newer browsers there are a couple ways like data URLs that would work. – CodingWithSpike Aug 22 '16 at 02:41
  • @CodingWithSpike ooooh, this looks promising. I'll have a look at it! I've noticed there are, and have also looked at, multiple answers, but I appreciate the one you've provided. I'll try this one out and see how it goes. I think we can live with Chrome and FF. – boyshiny Aug 22 '16 at 04:24

0 Answers0