如何在Camunda中实现表单间的输入数据传递？

方法1：使用localStorage（新手友好） #

无需处理复杂的参数拼接，直接把数据存在浏览器本地，步骤简单：

1. 订单表单提交时保存数据
   给订单表单添加提交事件，捕获输入值并存入localStorage：

<!-- 订单表单 -->
<form id="orderForm">
  <input type="text" id="customerName" placeholder="客户姓名">
  <input type="number" id="orderAmount" placeholder="订单金额">
  <button type="submit">提交订单</button>
</form>

<script>
// 监听表单提交事件
document.getElementById('orderForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认页面跳转
  
  // 获取用户输入的表单值
  const customerName = document.getElementById('customerName').value;
  const orderAmount = document.getElementById('orderAmount').value;
  
  // 将数据转为JSON字符串存入localStorage
  localStorage.setItem('orderData', JSON.stringify({
    customerName: customerName,
    orderAmount: orderAmount
  }));
  
  // 跳转到收据页面
  window.location.href = 'receipt.html';
});
</script>

2. 收据页面读取并展示数据
   在收据页面加载时，从localStorage取出数据并填充到页面：

<!-- 收据表单 -->
<div id="receipt">
  <h3>订单收据</h3>
  <p>客户姓名：<span id="receiptName"></span></p>
  <p>订单金额：<span id="receiptAmount"></span></p>
</div>

<script>
// 页面加载完成后执行
window.onload = function() {
  // 读取localStorage中的数据并转为对象
  const orderData = JSON.parse(localStorage.getItem('orderData'));
  
  if (orderData) {
    // 将数据填充到收据对应的位置
    document.getElementById('receiptName').textContent = orderData.customerName;
    document.getElementById('receiptAmount').textContent = orderData.orderAmount;
    
    // 可选：用完数据后删除，避免下次打开页面还显示旧数据
    localStorage.removeItem('orderData');
  }
};
</script>

方法2：使用URL参数传递（适合简单非敏感数据） #

直接在跳转时把数据拼接到URL地址后，收据页面读取URL参数：

1. 订单表单提交时拼接参数

<form id="orderForm">
  <input type="text" id="customerName" placeholder="客户姓名">
  <input type="number" id="orderAmount" placeholder="订单金额">
  <button type="submit">提交订单</button>
</form>

<script>
document.getElementById('orderForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  // 对特殊字符编码，避免URL解析错误
  const customerName = encodeURIComponent(document.getElementById('customerName').value);
  const orderAmount = encodeURIComponent(document.getElementById('orderAmount').value);
  
  // 拼接带参数的跳转URL
  const url = `receipt.html?name=${customerName}&amount=${orderAmount}`;
  window.location.href = url;
});
</script>

2. 收据页面读取URL参数

<div id="receipt">
  <h3>订单收据</h3>
  <p>客户姓名：<span id="receiptName"></span></p>
  <p>订单金额：<span id="receiptAmount"></span></p>
</div>

<script>
window.onload = function() {
  // 解析URL中的参数
  const urlParams = new URLSearchParams(window.location.search);
  const customerName = urlParams.get('name');
  const orderAmount = urlParams.get('amount');
  
  // 解码后填充到页面
  document.getElementById('receiptName').textContent = decodeURIComponent(customerName);
  document.getElementById('receiptAmount').textContent = decodeURIComponent(orderAmount);
};
</script>

额外提示（针对BPD场景） #

如果你的表单是在BPD（如IBM BPM的业务流程设计器）流程内创建的，优先用流程变量传递数据：

• 在订单表单中，将输入框的值绑定到对应的流程变量（比如customerName、orderAmount）
• 收据表单直接引用这些流程变量即可，无需编写JavaScript，具体语法参考你使用的BPD版本文档

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