Hey Johan, no worries—let's get this form redirect working properly. The core idea is to intercept the form's submit event, grab the values from your check-in/check-out fields (and any other data you need), then redirect to your target page with those values as URL query parameters.

Step 1: Complete Your Form Structure #

First, let's make sure your form has the necessary visible fields (I'll assume you have check-in and check-out date inputs here, since that's your use case):

<form class="form book-now-form" role="form" id="widget_booking_form" name="widget_booking_form">
  <input id="action" type="hidden" value="2" name="action">
  <input id="clone_id" type="hidden" value="YOUR_CLONE_ID" name="clone_id">
  
  <!-- Add your visible check-in/check-out fields (adjust type if you're using a date picker instead of native date input) -->
  <label for="checkin">Check-in Date:</label>
  <input type="date" id="checkin" name="checkin" required>
  
  <label for="checkout">Check-out Date:</label>
  <input type="date" id="checkout" name="checkout" required>
  
  <button type="submit">Book Now</button>
</form>

Step 2: Add JavaScript to Handle Submission and Redirect #

Add this script either right before the closing </body> tag or in an external JS file to control the form's behavior:

// Wait for the page to fully load before attaching listeners
document.addEventListener('DOMContentLoaded', function() {
  // Grab the form element
  const bookingForm = document.getElementById('widget_booking_form');
  
  // Listen for the form's submit event
  bookingForm.addEventListener('submit', function(e) {
    // Stop the default form submission (which would reload the page)
    e.preventDefault();
    
    // Pull values from all relevant form fields
    const action = document.getElementById('action').value;
    const cloneId = document.getElementById('clone_id').value;
    const checkin = document.getElementById('checkin').value;
    const checkout = document.getElementById('checkout').value;
    
    // Quick validation to ensure dates are filled (optional but user-friendly)
    if (!checkin || !checkout) {
      alert('Please fill in both check-in and check-out dates!');
      return;
    }
    
    // Build your redirect URL with query parameters
    // Replace "your-target-page.html" with your actual redirect page URL
    const redirectUrl = `your-target-page.html?action=${action}&clone_id=${cloneId}&checkin=${checkin}&checkout=${checkout}`;
    
    // Send the user to the target page with the parameters
    window.location.href = redirectUrl;
  });
});

Step 3: Access the Values on the Redirected Page #

On your target page, you can easily pull the passed values from the URL using this snippet:

// Helper function to get specific query parameters from the URL
function getQueryParam(paramName) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(paramName);
}

// Retrieve your values
const action = getQueryParam('action');
const cloneId = getQueryParam('clone_id');
const checkinDate = getQueryParam('checkin');
const checkoutDate = getQueryParam('checkout');

// Example: Use the values (display them, populate fields, etc.)
console.log('Check-in:', checkinDate);
console.log('Check-out:', checkoutDate);
// Or insert into page elements:
// document.getElementById('display-checkin').textContent = checkinDate;

Quick Tips: #

• If you're using a custom date picker (not the native type="date"), just adjust the way you retrieve the value (most pickers have a method to get the selected date string).
• Add more fields to the URL string if your form has additional inputs (e.g., number of guests).
• For better security, if you're passing sensitive data, consider using POST instead—but for booking dates, query parameters are totally fine.

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