如何在PayPal表单的invoice变量前拼接PickUpDate文本随表单提交？

故障原因 #

现有代码不生效的核心问题是你在datetime-local类型的输入框上重复定义了两个id属性：id="date"和id="invoice"，浏览器会默认忽略重复声明的id属性，导致$('#invoice')选择器找不到目标元素，前缀拼接逻辑自然无法生效。

最简解决方案 #

你可以直接修改现有代码，改用表单提交事件处理拼接逻辑，无需监听输入框变化，还能避免用户未触发change事件导致的前缀遗漏问题，修改步骤如下：

1. 先给表单新增id标识，方便JS选择：

<form id="paypalForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" style="margin:0;padding:0;" target="PayPal">

2. 替换原有JS逻辑：

jQuery(document).ready(function($){
  $('#paypalForm').on('submit', function() {
    // 获取用户选择的自提时间
    const pickUpTime = $('input[type="datetime-local"]').val();
    // 拼接前缀后赋值给invoice字段
    $('input[name="invoice"]').val('PickUpDate:' + pickUpTime);
    return true;
  });
});

3. 移除datetime-local输入框上重复的id属性，修改后输入框代码如下：

<input type="datetime-local" name="invoice" min="2021-08-26T09:00" class="form-control-sm" required>

修改完成后提交表单即可自动在invoice字段前拼接PickUpDate:文本，PayPal通知里就会显示你需要的格式。

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