如何合并两个按钮为一个，实现单次点击同时完成订单确认与下单操作

核心逻辑 #

原有两个按钮的分工为：

• 「Confirm Order」按钮：负责表单校验、订单信息确认，校验通过后自动解除「Place Order」按钮的禁用状态
• 「Place Order」按钮：绑定下单提交逻辑，解除禁用后点击生效
  合并方案将两个步骤整合到同一个按钮的点击事件中，无需用户二次点击，且完全复用原有逻辑，不需要改动原有功能绑定。

操作步骤 #

1. 给原有所有按钮（你提供的两组共4个元素：2个input确认按钮、2个包含下单按钮的a标签）都添加style="display:none"属性隐藏，不要删除原有代码，避免已绑定的事件失效。
2. 在原按钮的位置添加以下合并按钮代码即可：

<input 
  class='contact-form-button' 
  type='button' 
  value='确认并提交订单'
  onclick="handleCombinedSubmit()"
/>
<script>
function handleCombinedSubmit() {
  // 触发原有确认按钮的校验逻辑
  const confirmBtn = document.querySelector('.soracustomform-ok');
  if (confirmBtn) confirmBtn.click();

  // 等待校验完成后自动触发下单
  setTimeout(() => {
    const placeOrderBtn = document.getElementById('ContactForm1_contact-form-submit');
    const checkoutLink = document.querySelector('.simpleCart_checkout');
    // 仅校验通过后执行下单操作
    if (placeOrderBtn && !placeOrderBtn.disabled && checkoutLink) {
      checkoutLink.click();
    }
  }, 300); // 可根据实际校验响应速度调整延迟时长
}
</script>

如果你不需要修改按钮显示文本，直接把value属性值改为你需要的内容即可，保留contact-form-button类可以和原有按钮样式完全一致，不会产生视觉差异。

异步校验兼容方案 #

如果原有表单校验是异步逻辑（比如需要调用接口校验库存、地址合法性），可以用监听属性变化的方案代替固定延迟，避免提前触发下单：

function handleCombinedSubmit() {
  const confirmBtn = document.querySelector('.soracustomform-ok');
  if (confirmBtn) confirmBtn.click();

  const placeOrderBtn = document.getElementById('ContactForm1_contact-form-submit');
  const checkoutLink = document.querySelector('.simpleCart_checkout');
  
  // 监听下单按钮的禁用状态变化
  const observer = new MutationObserver(() => {
    if (!placeOrderBtn.disabled && checkoutLink) {
      checkoutLink.click();
      observer.disconnect();
    }
  });
  observer.observe(placeOrderBtn, { attributes: true, attributeFilter: ['disabled'] });
}

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