How to output HTML form data to a XML file using Javascript?

Question

I'm currently trying to figure out how to output my HTML form data to an XML file. This is an idea I've been playing around with for the past couple of days in order to create a autounattended.xml file to be used with Windows 7 installations.

Currently my HTML is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Windows 7 Answer File Generator</title>
    </head>
    <body>
        <form>
            <h1>Windows 7 Answer File Generator</h1>
            <h2>General Settings</h2>
            <table>
                <tr>
                    <td width="200px">Skip product key:</td>
                    <td>
                        <select name="SkipProductKey">
                            <option value="Yes" selected="selected">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="200px">Skip automatic activation:</td>
                    <td>
                        <select name="SkipAutoActivation">
                            <option value="Yes" selected="selected">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </td>
                </tr>
            </table>
        </body>
    </html>

This is just a snippet of what I've been working on. So, I was wondering if its possible to use javascript to create an XML file based on the select values and ask the user where to save the xml file. Any information regarding this would be a big help.

In order to save the file, you will need some kind of script that receives the content and has access to your filesystem. The browser (for very good reasons) has no direct access to the filesystem. — danp, Jul 08 '12 at 12:54
You would need to *serialize* the data as XML on the server and send it to the client with appropriate headers for them to download. — rlemon, Jul 08 '12 at 13:29
@Slixx, Im now aware of this. I only copied and pasted a section of my html and that section didnt include the end form tag — Chris, Jul 08 '12 at 13:56
@rlemon; is there any way to do this with a client side script? — Chris, Jul 08 '12 at 13:57
@user1509999 possibly in modern browsers but the user would still have to take additional steps. the easiest and most client friendly way is to do this type of data manipulation on the server. — rlemon, Jul 08 '12 at 14:13
http://stackoverflow.com/questions/6796974/force-download-an-image-using-javascript here is an outline of 'no automatic save of images via js', however you can give them a "right click save as" kinda scenario. see the answer from Markus — rlemon, Jul 08 '12 at 14:14

Markus Jarderot · Accepted Answer · 2012-07-08T15:44:06.667

5

Demo here

$(function () {
  $('#DownloadButton').click(update);
});

var template = [
  '<?xml version="1.0"?>',
  '<unattend xmlns="urn:schemas-microsoft-com:unattend">',
  '...',
  '<SkipProductKey><?SkipProductKey?></SkipProductKey>',
  '...',
  '<SkipAutoActivation><?SkipAutoActivation?></SkipAutoActivation>',
  '...',
  '</unattend>'
].join('\r\n');

function update() {
  var variables = {
    'SkipProductKey': $('#SkipProductKey').val(),
    'SkipAutoActivation': $('#SkipAutoActivation').val()
  };

  var newXml = template.replace(/<\?(\w+)\?>/g,
    function(match, name) {
      return variables[name];
    });


  $('#ResultXml').val(newXml);
  $('#DownloadLink')
    .attr('href', 'data:text/xml;base64,' + btoa(newXml))
    .attr('download', 'autounattended.xml');
  $('#generated').show();
}

if (!window.btoa) {
  // Source: http://www.koders.com/javascript/fid78168FE1380F7420FB7B7CD8BAEAE58929523C17.aspx
  btoa = function (input) {
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';

    var result = '';
    var chr1, chr2, chr3;
    var enc1, enc2, enc3, enc4;
    var i = 0;

    do {
      chr1 = input.charCodeAt(i++);
      chr2 = input.charCodeAt(i++);
      chr3 = input.charCodeAt(i++);

      enc1 = chr1 >> 2;
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
      enc4 = chr3 & 63;

      if (isNaN(chr2)) {
        enc3 = enc4 = 64;
      } else if (isNaN(chr3)) {
        enc4 = 64;
      }

      result += chars.charAt(enc1) + chars.charAt(enc2) + chars.charAt(enc3) + chars.charAt(enc4);
    } while (i < input.length);

    return result;
  };
}

Edit:

Added the download-button as requested from OP.
Added the download-attribute to the link to show the Save As-dialog when clicked. (Thanks Saurabh)
Demo updated.

edited Jul 08 '12 at 15:44

answered Jul 08 '12 at 14:13

Markus Jarderot

86,735
21
136
138

that is kinda what I'm after. It works pretty well with the html I have in place. Is there a way to use a button to start the script to take the form data and output it to a xml? – Chris Jul 08 '12 at 14:23
You can't trigger the Save-As dialog from Javascript, but you could trigger the `update()` function with a button-press. Just replace the selectors at the top with one for your button. `$('#CreateXmlButton').click(update);` – Markus Jarderot Jul 08 '12 at 14:35
actually it's possible to do that. you can read the doc [here](http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download). i've also also your demo accorodingly http://jsbin.com/ekenow/edit#javascript,html,live – Saurabh Kumar Jul 08 '12 at 15:03
Updated the script as OP and @Saurabh requested – Markus Jarderot Jul 08 '12 at 15:45
Thanks @MarkusJarderot! I've made some modifications to your code. Now I just need to test the final result in vmware – Chris Jul 08 '12 at 17:41
Markus, would it be possible to have a button comment out one area of 'var template' and activate another? For example; '', //'', (Comment out) '', '', (Comment in) – Chris Jun 22 '14 at 19:24
Easiest would be to use two templates, and have the button choose between them. `if (template === template1) { template = template2; } else { template = template1; }` – Markus Jarderot Jun 22 '14 at 22:08
Another way would be to have have the fields generate the whole tag, instead of just the content. `` to just `` and use `ProductKey: $('#ProductKey').val() ? '' + $('#ProductKey').val() + ''` in the `update()` function. – Markus Jarderot Jun 22 '14 at 22:13

How to output HTML form data to a XML file using Javascript?

1 Answers1

Linked