表单提交前修改输入字段传值 保持用户可见输入不变

对接支付网关表单提交时，需满足以下金额处理规则：

• 提交拼接请求URL时，自动在用户输入的金额末尾追加00作为实际传递的参数值
• 金额输入框对用户展示的内容始终保持用户输入的原始值，不发生变化
• 示例：用户输入150时，URL中金额参数值为15000，输入框内仍显示150

现有代码片段 #

目标金额输入框代码：

<input type="text" style="width: 100%; height: 40px;" name="z24_kwota">

完整表单代码：

<form action="https://sklep.przelewy24.pl/zakup.php" method="get">
  <input name="z24_id_sprzedawcy" type="hidden" value="xxx" />
  <input name="z24_crc" type="hidden" value="xxx" />
  <input name="z24_nazwa" type="hidden" value="xxx" />
  <input name="z24_return_url" type="hidden" value="xxx" />
  <input name="z24_language" type="hidden" value="pl" />
  <table style="width: 100%;">
    <tbody>
      <tr>
        <td><input type="text" style="width: 100%; height: 40px;" name="z24_kwota"></td>
      </tr>
    </tbody>
  </table>
  <p><input id="submit_button" class="button" type="submit" value="PAY" /><br /><br /></p>
</form>

核心逻辑是拦截表单默认提交事件，不要直接修改输入框的value（会直接改变用户可见内容），在提交时单独处理金额参数再跳转即可，代码如下：

const payForm = document.querySelector('form[action*="przelewy24"]');
payForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const kwotaInput = this.querySelector('input[name="z24_kwota"]');
  const rawValue = kwotaInput.value.trim();

  // 简单校验金额格式，可根据自身需求调整规则
  if (!/^\d+$/.test(rawValue)) {
    alert('请输入正确的整数金额');
    return false;
  }

  // 按要求追加两个0作为实际提交的金额值
  const submitKwota = rawValue + '00';
  // 组装所有表单参数
  const params = new URLSearchParams(new FormData(this));
  params.set('z24_kwota', submitKwota);
  // 发起跳转
  window.location.replace(`${this.action}?${params.toString()}`);
});

逻辑说明 #

• 全程没有修改原输入框的value属性，用户在页面上看到的输入内容始终是自己输入的原始值
• 仅在表单提交触发时，单独处理金额参数拼接进URL，完全符合需求
• 如果需要支持小数金额输入，只需要调整金额处理部分的逻辑，把小数部分补位到两位后去掉小数点即可，不影响核心交互

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