表单提交前延迟功能失效：页面仅刷新不提交问题求助

看起来你遇到的问题核心是固定延迟的不可靠性，以及可能对表单提交机制的小误解。咱们一步步来解决：

为什么你的代码会出现“只刷新不提交”？ #

你用setTimeout硬等5秒，但这个逻辑有两个隐患：

• 万一Google API的请求超过5秒返回，那提交表单时隐藏字段还没拿到经纬度，甚至可能表单因为数据不完整被浏览器拦截；
• 虽然你用了form.submit()（原生DOM方法）不会再次触发submit事件（不会被preventDefault拦住），但如果你的代码里在延迟期间没正确完成地理数据的写入，或者表单本身的action/method属性配置有问题，就会出现看似刷新但没提交的情况。

正确的做法：等待API请求完成再提交 #

固定延迟是偷懒的做法，靠谱的方式是在Google地理编码API的回调里触发表单提交，确保数据拿到后再提交。给你调整后的代码示例：

$('#orderform').submit(function(event) {
  const form = this;
  event.preventDefault(); // 先阻止默认提交行为

  // 1. 获取用户输入的地址（根据你的实际DOM结构调整选择器）
  const address = $('#your-address-input').val();
  
  // 2. 初始化Google地理编码器
  const geocoder = new google.maps.Geocoder();
  
  // 3. 调用API获取经纬度
  geocoder.geocode({ 'address': address }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      // 4. 提取经纬度并写入隐藏字段
      const lat = results[0].geometry.location.lat();
      const lng = results[0].geometry.location.lng();
      $('#lat-hidden-input').val(lat);
      $('#lng-hidden-input').val(lng);
      
      // 5. 确认数据写入后，用原生方法提交表单
      form.submit();
    } else {
      // 处理API请求失败的情况，比如提示用户
      alert(`获取地理数据失败：${status}`);
    }
  });
});

额外的调试检查点 #

如果还是有问题，你可以做这几个排查：

• 检查表单的action属性是否指向正确的后端处理地址，method属性是否设置为POST/GET（根据你的需求）；
• 在提交前用console.log($('#lat-hidden-input').val())打印隐藏字段的值，确认数据已经正确写入；
• 确保没有其他JS代码阻止了表单提交（比如表单验证插件的拦截）。

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