將HTML表單數據下載為xml文件時出現問題

Question

我正在嘗試從html表單下載數據並將所述數據另存為XML文件。 我找到了有關如何使用JS在線執行此操作的教程，但是在成功實現它方面存在一些問題。

當我單擊“創建文件”時，我會在文本區域中短暫看到所需的輸出顯示，但是隨着頁面刷新，該輸出立即消失，並且我無法使下載按鈕正常工作。 如果有人可以建議我如何使XML保留在文本區域中以及如何使下載按鈕正常工作，謝謝。

本教程的工作示例介紹了如何實施http://jsbin.com/xusekaqoma/edit?html,js,output

的JavaScript

<script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

</script>

<script>

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

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

    function update() {
      var variables = {
        'Satisfaction': $('#Satisfaction').val(),
        'FutureProducts': $('#FutureProducts').val(),
        'HearAboutCompany': $('#HearAboutCompany').val(),
        'Contact': $('#Contact').val(),
        'Promotions': $('#Promotions').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;
      };
    }

</script>

html

<div id ="main">


        <form action ="" name = "myForm" class = "contact" >

        <h3>Please take a moment to fill out this short survey </h3></br>

        <label>
        <span>Satisfaction with service</span></br>

        <select id="Satisfaction">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3" >3</option>
                <option value="4">4</option>
                <option value="5">5</option>
        </select></br>

        </label>
        <label>
        <span>Future products your intrested in?</span></br>

        <select id="FutureProducts">
                <option value="Smartwatch">Smart Watch</option>
                <option value="VirtualRealitydevices">Virtual Reality devices</option>

        </select></br>

        </label>            
        <label>
        <span>How did you hear about the company?</span></br>

        <select id="HearAboutCompany">
                <option value="friend">friend</option>
                <option value="online">online</option>
                <option value="local">local advertisement</option>

        </select></br>
        </label>


        <label>
        <span>Preferred means of contact</span></br>

        <select id="Contact">
                <option value="mobile">mobile</option>
                <option value="post">post</option>
                <option value="email">email</option>

        </select></br>

        </label>


        <label>
        <span>Do you wish to be contacted about future promotions ?</span></br>


          <select id="Promotions">
                <option value="yes">yes</option>
                <option value="no">no</option>


        </select></br>


         <button id="DownloadButton">Create file</button>

        </label>

        </form>

          <div id="generated" style="">
        <h2>autounattended.xml</h2>
            <a href="#" id="DownloadLink">Download</a>
            <textarea id="ResultXml" style="width: 100%; height: 30em" readonly="readonly"></textarea>
        </div>

        </div>

Answer 1

<button>元素的默認行為類似於<input type="submit"/> ，它將自動提交表單。 嘗試<button type="button">