将预订小部件转换为生成指定URL的GET表单技术求助

Hey Alex, no worries at all—let's get this sorted out for you! Since you want to keep your existing CSS and turn your booking widget into a form that generates that specific path-based URL when the button is clicked, here's a straightforward, no-fuss approach you can follow:

1. 保留现有CSS（无需任何修改！） #

你完全不用动一行CSS代码，只要确保表单元素使用和原预订小部件一致的类名，原有样式就会自动应用到新表单上。

2. 调整HTML表单结构 #

把你现有的预订输入框包裹在<form>标签里，给每个输入框加上id方便后续获取值。下面是适配你需求的示例结构：

<!-- 这里用你原小部件的容器类，确保样式继承 -->
<div class="your-existing-widget-container">
  <form id="bookingForm">
    <div class="your-existing-input-group">
      <label for="checkin">入住日期</label>
      <input type="date" id="checkin" name="checkin" required>
    </div>
    <div class="your-existing-input-group">
      <label for="checkout">退房日期</label>
      <input type="date" id="checkout" name="checkout" required>
    </div>
    <div class="your-existing-input-group">
      <label for="adults">成人数量</label>
      <input type="number" id="adults" name="adults" min="1" value="1" required>
    </div>
    <div class="your-existing-input-group">
      <label for="children">儿童数量</label>
      <input type="number" id="children" name="children" min="0" value="0" required>
    </div>
    <!-- 用你原按钮的类，保留原有样式 -->
    <button type="submit" class="your-existing-button-style">生成预订链接</button>
  </form>
</div>

把示例中的占位类名（比如your-existing-widget-container）替换成你当前代码里的实际类名——这是保留所有原有样式的关键。

3. 添加少量JavaScript生成目标URL #

这段代码会阻止表单默认提交行为，按照你需要的格式拼接URL，然后跳转至该地址。把它粘贴到HTML页面底部（</body>标签之前）即可：

document.getElementById('bookingForm').addEventListener('submit', function(e) {
  // 阻止表单默认提交逻辑
  e.preventDefault();
  
  // 获取表单输入值
  const checkin = document.getElementById('checkin').value;
  const checkout = document.getElementById('checkout').value;
  const adults = document.getElementById('adults').value;
  const children = document.getElementById('children').value;
  
  // 拼接成你指定的URL格式
  const baseUrl = 'https://sampleurl.com/booking';
  const finalUrl = `${baseUrl}/${checkin}/${checkout}/${adults}/${children}`;
  
  // 跳转到生成的URL（如果想打开新标签页，改用 window.open(finalUrl, '_blank')）
  window.location.href = finalUrl;
});

几个让效果更完美的小细节 #

• 日期格式适配：HTML的type="date"输入框默认返回YYYY-MM-DD格式，正好匹配你URL里的日期要求，不需要额外处理格式。
• 表单验证：required属性确保用户必须填完所有字段，min属性限制成人数量至少1位、儿童数量最少0位，你可以根据需求调整这些规则。
• 已有输入框的适配：如果你的现有小部件已经有这些输入框，只需要把它们包裹进<form>标签、给表单加id="bookingForm"、把按钮改成type="submit"，再加上上面的JS代码就搞定了！

这套方案能让用户填完表单后点击按钮，直接跳转到你指定格式的URL，同时完整保留你原有的所有CSS样式。

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