如何使用JavaScript实现点击打开新窗口并填充表单值？

我来帮你排查下问题所在，你的代码里有几个关键错误导致功能无法正常运行，咱们一步步修正：

1. 获取输入框值的方式完全错误 #

你现在用的 document.getElementById("catID").document.getElementsByTagName("value") 是不符合DOM操作规范的写法，获取input元素的当前值应该直接使用 .value 属性，比如 document.getElementById("catID").value。

2. 新窗口DOM未加载完成就尝试操作 #

你打开新窗口后立刻去设置它的表单值，但新窗口的HTML可能还没加载完毕，此时它的DOM元素还不存在，自然无法完成赋值。必须等待新窗口的load事件触发后，再执行填充数据的操作。

3. 提交按钮的默认行为未阻止 #

你的按钮是type="submit"，点击后会触发表单的提交动作，导致当前页面刷新，这会直接打断后续的脚本执行，所以需要先阻止这个默认行为。

修正后的完整代码 #

起始页面HTML（修正了拼写错误的methed） #

<form id="memCat" method="get" class="member_catalogue"> 
  <button type="submit" class="prodBtn" id="catOrder" onclick="openMemberOrder(event)">
    <img class="prodImg" src="../../../Images/bcpot002_thumb.jpg" name="Red Bowl">
  </button> 
  <div class="cat_block"> 
    <label class="cat_label" for="cat_name">Product Name:</label> 
    <input class="cat_input" type="text" id="catID" value="bepot002" readonly> 
  </div> 
  <div class="cat_block"> 
    <label class="cat_label" for="cat_description">Product Description:</label> 
    <input class="cat_input" type="text" id="catDesc" value="Ocre Red Pot" readonly> 
  </div> 
  <div class="cat_block"> 
    <label class="cat_label" for="cat_price">Per unit price:$</label> 
    <input class="cat_input" type="number" id="catVal" value="10" readonly> 
  </div> 
</form>

修正后的核心脚本 #

function openMemberOrder(event) {
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();

  // 先获取当前页面的产品数据
  const productId = document.getElementById("catID").value;
  const productDesc = document.getElementById("catDesc").value;
  const productPrice = document.getElementById("catVal").value;

  // 打开新窗口
  const memberOrderWindow = window.open('Member_Orders/members_order.html','_blank','width=1000,height=1000');

  // 等待新窗口加载完成后，再填充数据到对应表单
  memberOrderWindow.addEventListener('load', function() {
    memberOrderWindow.document.getElementById("orderID").value = productId;
    memberOrderWindow.document.getElementById("orderDesc").value = productDesc;
    memberOrderWindow.document.getElementById("orderVal").value = productPrice;
    // 顺便初始化总价为单价（默认数量1）
    memberOrderWindow.document.getElementById("orderTotal").value = productPrice;
  });
}

额外优化：新页面的总价计算功能（可选） #

如果需要实现点击「Calculate Total」自动计算总价的功能，可以在新页面的脚本中添加以下代码：

document.getElementById("orderCalc").addEventListener('click', function(event) {
  event.preventDefault();
  const unitPrice = parseFloat(document.getElementById("orderVal").value);
  const quantity = parseInt(document.getElementById("orderOrder").value);
  // 保留两位小数，确保金额格式正确
  document.getElementById("orderTotal").value = (unitPrice * quantity).toFixed(2);
});

这样修改后，你的功能应该就能正常运行了：点击按钮会打开新窗口，等新窗口加载完成后自动把当前页面的产品信息填充到对应字段里，同时不会触发当前页面的刷新。

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