Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question
1  
I want to mention, you are not closing your form tag. – Sllix Jul 8 '12 at 12:48
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 8 '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 8 '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 8 '12 at 13:56
@rlemon; is there any way to do this with a client side script? – Chris Jul 8 '12 at 13:57
show 2 more comments

1 Answer

up vote 1 down vote accepted

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.
share|improve this answer
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 8 '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 8 '12 at 14:35
actually it's possible to do that. you can read the doc here. i've also also your demo accorodingly jsbin.com/ekenow/edit#javascript,html,live – Saurabh Jul 8 '12 at 15:03
   
Updated the script as OP and @Saurabh requested – Markus Jarderot Jul 8 '12 at 15:45
@MarkusJarderot thankx bro. keep rockin' – Saurabh Jul 8 '12 at 16:30
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.