如何利用表单提交数据生成带统一筛选参数的自定义iframe

Hey Luke, awesome concept for consolidating cricket store results—let's get this working smoothly! Here's a step-by-step breakdown to turn your form into a tool that generates multiple filtered iFrames:

Step 1: Update Your HTML Structure #

First, let's add a container to hold the generated iFrames, and tweak your existing form a bit for better usability:

<!-- Brand selection form -->
<select id="brand">
  <option value="">Select a Brand</option> <!-- Updated default for validation -->
  <option value="graynicolls">Gray-Nicolls</option>
  <option value="kookaburra">Kookaburra</option>
  <option value="m&h">Millichamp and Hall</option>
  <option value="newbalance">New Balance</option>
</select>

<input type="button" onclick="getOption()" value="Load Filtered Stores">

<!-- Container for generated iFrames (with responsive grid layout) -->
<div id="iframe-container" style="margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 15px;"></div>

The grid layout ensures your iFrames will stack neatly on different screen sizes—feel free to adjust the minmax values to match your design needs.

Step 2: Implement the JavaScript Logic #

Now let's write the getOption() function to handle form submission, build filtered URLs, and create the iFrames:

function getOption() {
  // Grab the selected brand value
  const selectedBrand = document.getElementById('brand').value;
  
  // Make sure a brand was actually selected
  if (!selectedBrand) {
    alert('Please pick a brand first!');
    return;
  }
  
  // List of cricket store base URLs you want to display
  // Adjust these to match the actual URL structure of each store
  const storeBaseUrls = [
    'https://www.cricketwebsite.com',
    'https://anothercricketstore.co.nz',
    'https://nzcricketequipment.com'
  ];
  
  // Clear any existing iFrames before loading new ones
  const iframeContainer = document.getElementById('iframe-container');
  iframeContainer.innerHTML = '';
  
  // Loop through each store and create a filtered iframe
  storeBaseUrls.forEach(baseUrl => {
    // Build the filtered URL (adjust this to match each store's filtering pattern)
    // Example path-based filter: cricketwebsite.com/kookaburra
    // If a store uses query params, use: `${baseUrl}?brand=${selectedBrand}`
    const filteredUrl = `${baseUrl}/${selectedBrand}`;
    
    // Create the iframe element
    const iframe = document.createElement('iframe');
    iframe.src = filteredUrl;
    iframe.width = '100%';
    iframe.height = '600';
    iframe.frameBorder = '0';
    iframe.loading = 'lazy'; // Boosts page load performance
    iframe.title = `${selectedBrand} products at ${baseUrl}`; // Improves accessibility
    
    // Add the iframe to the container
    iframeContainer.appendChild(iframe);
  });
}

Key Details to Adjust: #

• URL Structure: Double-check each store's filtering pattern—some might use query parameters (like ?brand=kookaburra) instead of a path. Update the filteredUrl string to match what each store expects.
• Validation: The empty value check prevents broken iFrames if the user clicks submit without selecting a brand.
• Performance: loading="lazy" ensures iFrames only load when they enter the viewport, keeping your page fast even with multiple frames.

Optional Enhancements #

If you want to expand this project later, here are some ideas:

• Add a price sort dropdown (like your sortby=lowest example) and include that parameter in the filtered URLs
• Add a loading spinner while iFrames are loading
• Let users toggle which stores to display with checkboxes

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