Saving data from HTML form into XML or CSV

Question

Need your advice on how best to proceed in the following scenario. I have a pretty long HTML form which is designed for an OFFLINE user to complete. Since the form is long (rather an electronic checklist) I need to provide an ability for user to save and re-open data for further completion of the form. This is all happening offline, so javascript only I suppose? Target formats, perhaps XML or CSV? What difficulties I will have to face in either of the option? Any preferences and why? Sorry if this is not in line with Stackoverflow policy of questioning))))

Sample of the form is below, if it helps:

<div id="Q403">
        <table class="QTable">
            <tr>
                <td width="45"  align="left" valign="top" scope="row"><div class="QNumber">4.3</div></td>
                <td width="100%"  align="left" valign="top">
                <div class="QText"Question</div>
                </td>
            </tr>
        </table>
        </div>

        <div>
        <table class="RTable">
            <tr>
            <td width="100%"  align="left" valign="top" style="padding-right:20px">
        <div class="Guidance">
            <p>Various Content</p>
        </div>
            </td>

            <td width="550" align="left" valign="baseline">
            <div class="Response">
                <label><input type="radio" name="Radio403" value="Y" id="Radio_403Y" onchange='radioChange(this, "403")'>Yes</label>
                <label><input type="radio" name="Radio403" value="N" id="Radio_403N" onChange='radioChange(this, "403")'>No</label>
                <label><input type="radio" name="Radio403" value="NS" id="Radio_403NS" onChange='radioChange(this, "403")'>Not Seen</label>
                <label><input type="radio" name="Radio403" value="NA" id="Radio_403NA" onChange='radioChange(this, "403")'>Not Applicable</label>
            </div>
            <div class="responseDetails">
                <div class="Observation">
                    <label for="Obs403">Observation:</label>
                    <textarea name="observation" id="Obs403" rows="6" disabled style="width: 530px;"></textarea>
                </div>
                <div>
                    <label for="DueDate">Due date:<br></label>
                <input name="DueDate" class="DueDate" type="date" id="DueDate403"/>
                </div>

                <div class="actions">
                    <label for="pa403">Actions required to correct and/or prevent this observation:</label>
                    <textarea name="actions" id="pa403" rows="6" style="width: 530px;"></textarea>
                </div>
              </div>
            </td>
            </tr>
        </table>
        </div>

I am sure some of you guys had been doing a similar stuff, hopefully))))

Thanks in advance)))!

Answer 1

To get started, you could use the "innerHTML" and "localStorage" JavaScript functions:

This will keep your content (up to a few megabyte) stored persistently inside your Browser-DB .

Get the container element:

var content = document.getElementById("YourContainerID");

Save:

localStorage["YourFormID"] = content.innerHTML;

Load:

content.innerHTML = localStorage["YourFormID"];

---

To read from a file , you can use the new experimental HTML5 file API (read only).

http://www.w3.org/TR/FileAPI/

To write to a file , you have no direct option yet, except a Browser-plugin, like "Adobe Flash", where you also can write files. Alternatively, you could (via JavaScript) open a new window, then write the XML/CSV into it and ask the user to save the new window content as a file manually, by asking the user to press "Ctrl + S" .