如何让基于表单字段与JS构建的自定义URL在新窗口打开？

当然可以实现这个需求！只需要调整一下你的表单提交逻辑，几步就能搞定：

核心修改步骤 #

• 首先阻止表单的默认提交行为：避免浏览器用默认方式提交表单，覆盖我们的自定义逻辑
• 构建好目标URL后，使用window.open()方法在新窗口打开它

修改后的完整代码示例 #

jQuery(function() {
  var form = jQuery('form#form1');
  form.submit(function(e) {
    // 阻止表单默认提交行为，关键第一步
    e.preventDefault();
    
    // 这里保留你原来获取表单字段、构建URL的逻辑，以下是示例
    var checkin = form.find('input[name="checkin"]').val();
    var checkout = form.find('input[name="checkout"]').val();
    // 根据你的实际字段补充其他参数，记得用encodeURIComponent编码值
    var customUrl = 'https://your-target-url.com?' + 
      'checkin=' + encodeURIComponent(checkin) + 
      '&checkout=' + encodeURIComponent(checkout);
    
    // 在新窗口打开自定义URL，添加安全参数提升安全性
    window.open(customUrl, '_blank', 'noopener,noreferrer');
  });
});

关键细节说明 #

1. e.preventDefault()：这是必须的，如果不加，浏览器会执行表单的默认提交动作（比如当前页面跳转），我们的新窗口逻辑就不会生效
2. encodeURIComponent()：一定要用这个方法对每个参数值进行编码，避免日期中的斜杠、空格等特殊字符破坏URL结构，保证参数传递正确
3. window.open()参数：
   • 第二个参数_blank强制在新窗口/标签页打开URL
   • 第三个参数里的noopener,noreferrer是安全设置，防止新打开的页面获取原页面的控制权，符合现代浏览器的安全规范

注意事项 #

如果遇到浏览器拦截弹窗的情况，大概率是浏览器的弹窗拦截机制在起作用。不过因为我们是在用户主动触发的submit事件中调用window.open()，属于用户主动操作，绝大多数浏览器不会拦截，但如果真的出现，需要提示用户允许当前网站的弹窗权限。

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