Question

我正在建立一个用户提交系统，用户可以输入数据并导出XML（可以通过不同的软件读取），但我遇到了一个问题。当我复制表单以供用户输入信息时，XML只从第一个获取信息。

有关如何做的任何建议？

个人测试代码：

HTML：

＆＃13;

$(function () {
        $('#SubmitButton').click(update);
      });
    
      var added = [
        '\t\t
<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
        '\t\t</bam_file>
'
      ].join('\r\n');
    
      var adding = [
        '\t\t
<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
        '\t\t</bam_file>
'
      ].join('\r\n');
    
      function update() {
        var variables = {
          'channeldescription': $('#channeldescription').val(),
          'channelrecordnumber': $('#channelrecordnumber').val(),
          'channelhexcolor': $('#channelhexcolor').val(),
          'channelbamlink': $('#channelbamlink').val()
        };
    
        var newXml = added.replace(/<\?(\w+)\?>/g,
          function(match, name) {
            return variables[name];
          });
    
        var finalXML = newXml;
    
        $('#ResultXml').val(finalXML);
        $('#DownloadLink')
          .attr('href', 'data:text/xml;base64,' + btoa(finalXML))
          .attr('download', 'bamdata.xml');
        $('#generated').show();
      }
    
      $(function () {
        $("#CloneForm").click(CloneSection);
      });
    
      function CloneSection() {
        added = added + '\n' + adding;
        $("body").append($("#Entries:first").clone(true));
      }

＆＃13;

<!DOCTYPE html>
<html>
<head>
<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>
<body>
<div id="Entries" name="Entries">
  <legend class="leftmargin"> Entry </legend>
  <form class="form">
    <fieldset>
      <div class="forminput">
        <label for="channel-description" class="formtextarea">Description</label>
        <textarea id="channeldescription" name="channeldescription" type="text"></textarea>
      </div>
      <div class="forminput">
        <label for="channel-record_number">Record number</label>
        <input id="channelrecordnumber" name="channelrecordnumber"/>
      </div>
      <div class="forminput">
        <label for="channel-hex_color">Hex color</label>
        <input id="channelhexcolor" name="channelhexcolor"/>
      </div>
      <div class="forminput">
        <label for="channel-bam_link">RNA-Seq Data/BAM file Repsitory Link</label>
        <input id="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
      </div>
    </fieldset>
  </form>
</div>
</body>
<div id="Cloning" class="button_fixed">
  <p>
    <button id="CloneForm">Add another entry</button>
    <button id="SubmitButton">Generate XM</button>
  </p>
</div>
<div id="generated" style="display:none">
  <h2>bamdata.xml</h2>
  <a href="#" id="DownloadLink">Download XML</a>
  <textarea id="ResultXml" style="width: 100%; height: 30em" readonly></textarea>
</div>
</div>
</html>

＆＃13;

http://www.w3schools.com/code/tryit.asp?filename=F0TWR6VRQZ3J

Answer 1

将您的ID更改为类使用循环来获取所有条目

   <!DOCTYPE html>
<html>
<head>
  <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>
    .leftmargin {
      margin-left: 2%;
    }

    .form {
      background-color: #CBE8BA;
      border-radius: 25px;
      margin-left: 2%;
      margin-right: 2%;
      padding-top: 1%;
      padding-bottom: 1%;
    }

    .forminput {
      padding-left: 1.5%;
      padding-top: 0.5%;
      display: flex;
    }

    .button_fixed {
      position: fixed;
      margin-left: 2%;
      bottom: 1%;
    }
  </script>
  <script>
  $(function () {

    $('#SubmitButton').click(function(){
         var finalXML = '';
         $(".Entries").each(function(i,v) {finalXML +=update(finalXML,v)
           $('#ResultXml').val(finalXML);
    $('#DownloadLink')
      .attr('href', 'data:text/xml;base64,' + btoa(finalXML))
      .attr('download', 'bamdata.xml');
    $('#generated').show();
            });
    });
  });

  var added = [
    '\t\t<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
    '\t\t</bam_file>'
  ].join('\r\n');

  var adding = [
    '\t\t<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
    '\t\t</bam_file>'
  ].join('\r\n');

  function update(finalXML,v) {
    var variables = {
      'channeldescription': $(v).find('.channeldescription').val(),
      'channelrecordnumber': $(v).find('.channelrecordnumber').val(),
      'channelhexcolor': $(v).find('.channelhexcolor').val(),
      'channelbamlink': $(v).find('.channelbamlink').val()
    };

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

    return newXml;


  }

  $(function () {
    $("#CloneForm").click(CloneSection);
  });

  function CloneSection() {
    $("body").append($(".Entries:first").clone(true));
  }
  </script>
<body>
<div class="Entries" name="Entries">
<legend class="leftmargin"> Entry </legend>
  <form class="form">
    <fieldset>
      <div class="forminput">
        <label for="channel-description" class="formtextarea">Description</label>
        <textarea class="channeldescription" name="channeldescription" type="text"></textarea>
      </div>
      <div class="forminput">
        <label for="channel-record_number">Record number</label>
        <input class="channelrecordnumber" name="channelrecordnumber"/>
      </div>
      <div class="forminput">
        <label for="channel-hex_color">Hex color</label>
        <input class="channelhexcolor" name="channelhexcolor"/>
      </div>
      <div class="forminput">
        <label for="channel-bam_link">BAM file Repsitory Link</label>
        <input class="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
      </div>
    </fieldset>
  </form>
</div>
</body>
<div id="Cloning" class="button_fixed">
  <p>
    <button id="CloneForm">Add another entry</button>
     <button id="SubmitButton">Generate XM</button>
  </p>
</div>
<div id="generated" style="display:none">
  <h2>bamdata.xml</h2>
  <a href="#" id="DownloadLink">Download XML</a>
  <textarea id="ResultXml" style="width: 100%; height: 30em" readonly="readonly"></textarea>
</div>
</div>
</html>

演示：http://www.w3schools.com/code/tryit.asp?filename=F0TXIUR1CYE4

使用JavaScript复制条目和XML

1 个答案: