如何获取动态新增文本框的元素值并写入可下载的txt文件？

你代码的核心问题有三点，已全部修复：

• 导出逻辑中workouts变量未正确定义，且没有遍历所有动态添加的产品输入框取值
• 新增产品的JS逻辑错误，原代码取ID的逻辑不符合DOM结构，会生成无效ID
• 下拉选择框的默认选项存在拼写错误<opition>，已修正为<option>
• 地址输入框存在多余的字符w，已清理

修改后完整代码如下：

<html>
<head>
    <title>New agreement</title>
    <style>
        * {
            box-sizing: border-box;
        }
        div {
            padding: 10px;
            background-color: #ffffff;
            overflow: hidden;
        }
        input[type=text], textarea, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type=button]{ 
            width: auto;
            float: right;
            cursor: pointer;
            padding: 7px;
        }
    </style>
</head>
<body>
    <div>
<b> Purchaser: </b>
        <div>
            <input type="text" id="txtName" placeholder="Name and surname" required>
        </div>
        <div>
            <input type="text" id="txtAdress" placeholder="Adress"/>
        </div>
        <div>
            <input type="text" id="txtPersonalid" placeholder="Personal ID number" />
        </div>
         <div>
            <input type="text" id="txtPhone" placeholder="Phone number" />
        </div>
        <div>
            <input type="text" id="txtextraAdress" placeholder="Additional Adress" />
        </div>
        <div>
            <input type="text" id="txtpaymentAdress" placeholder="Payment e-mail adress" />
        </div>
         <div>
            <input type="text" id="txtDeadline" placeholder="Deadline" />
        </div>
        <div>
            <input type="text" id="txtMoney" placeholder="Value with tax" /> 
          </div> <div>
            <select id="selTax">
            <option selected value="">-- Choose your % of VAT --</option>
            <option value="8">8% VAT</option>
            <option value="23">23% VAT</option>
            </select> </div>
            
        <div>
            <input type="text" id="txtPrepaid" placeholder="Prepaid" />
            </div>
        <div>
            <textarea id="txtMsg" name="msg" placeholder="Additional message" style="height:100px"></textarea>
        </div>
        
        <b> Products: </b>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="workouts">
    <div class="workout">
      <input type="text" placeholder="New product">
    </div>
  </div>

  <button id="addWorkout" type="button">Add new</button>
</form>
<script>
  $("#addWorkout").on("click", function(e) {
    e.preventDefault();
    // 按现有产品数量生成新ID，避免逻辑错误
    const workoutCount = $(".workout").length;
    const template = `<div class='workout' id='workout${workoutCount + 1}'> <input type='text' placeholder='New product'> </div>`
    $("#workouts").append(template);
  });
</script>

        <div>
            <input type="button" id="bt" value="Download txt" onclick="saveFile()" />
        </div>
    </div>
    
</body>
<script>
    let saveFile = () => {
        
        const name = document.getElementById('txtName');
        const adress = document.getElementById('txtAdress');
        const personalid = document.getElementById('txtPersonalid');
        const phone = document.getElementById('txtPhone');
        const extraadress = document.getElementById('txtextraAdress');
        const paymentadress = document.getElementById('txtpaymentAdress');
        const deadline = document.getElementById('txtDeadline');
        const money = document.getElementById('txtMoney');
        const tax = document.getElementById('selTax');
        const prepaid = document.getElementById('txtPrepaid');
        const msg = document.getElementById('txtMsg');

        // 新增：收集所有非空的产品输入值
        const productInputs = document.querySelectorAll(".workout input");
        const productList = [];
        productInputs.forEach(input => {
            if (input.value.trim()) productList.push(input.value.trim());
        });
        const workoutsText = productList.length ? productList.join('、') : '未填写产品';
        
        
        let data = 
            '\r Name: ' + name.value + ' \r\n ' + 
            'Adress: ' +adress.value + ' \r\n ' + 
            'Personal ID: ' + personalid.value + ' \r\n ' + 
            'Phone: ' + phone.value + ' \r\n ' +
            'Additional adress: ' + extraadress.value + ' \r\n ' +
            'Payment adress: ' + paymentadress.value + ' \r\n ' +
            'Deadline: ' + deadline.value + ' \r\n ' + 
            'Value with '+ tax.value + '% TAX: ' + money.value + ' \r\n ' +
            'Prepaid: ' + prepaid.value + ' \r\n ' + 
            'Products: ' + workoutsText + ' \r\n ' + 
            'Message: ' + msg.value;
        
        
       
        const textToBLOB = new Blob([data], { type: 'plain/text' });
        const sFileName = 'Agreement.txt';

        let newLink = document.createElement("a");
        newLink.download = sFileName;

        if (window.webkitURL != null) {
            newLink.href = window.webkitURL.createObjectURL(textToBLOB);
        }
        else {
            newLink.href = window.URL.createObjectURL(textToBLOB);
            newLink.style.display = "none";
            document.body.appendChild(newLink);
        }

        newLink.click(); 
    }
</script>
</html>

功能验证：支持动态添加任意数量的产品，导出TXT时会自动合并所有非空的产品填写内容，用顿号分隔，不会再出现undefined的问题。

内容的提问来源于stack exchange，提问作者Michał