Joomla网站文章内创建双下拉选择框表单实现页面跳转

Got it, let's solve this for your Joomla site. You need a form with two required dropdowns that sends users to different pages based on their selections—here's a step-by-step solution that works right in your Joomla articles:

1. Update the Form Code #

First, tweak your original form to remove the fixed action (we'll handle redirects with JavaScript instead) and add empty default options to make the required validation work properly. Here's the adjusted code:

<form id="dynamicRedirectForm" method="post">
  <select id="select1" name="select1" required>
    <option value="">Choose an option</option>
    <option value="A">OptionA</option>
    <option value="B">OptionB</option>
    <option value="C">OptionC</option>
  </select>

  <select id="select2" name="select2" required>
    <option value="">Choose an option</option>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
  </select>

  <button type="submit">Submit</button>
</form>

The empty default options ensure users can't submit the form without picking a valid choice—this makes the HTML5 required attribute do its job properly.

2. Add JavaScript for Dynamic Redirects #

Next, add this script right after the form to handle the logic of sending users to different pages based on their dropdown selections. Customize the URL mappings to match your site's pages:

<script>
document.getElementById('dynamicRedirectForm').addEventListener('submit', function(e) {
  e.preventDefault(); // Stop the default form submission behavior

  // Grab the selected values from both dropdowns
  const select1Val = document.getElementById('select1').value;
  const select2Val = document.getElementById('select2').value;

  // Define your redirect rules (swap these URLs with your actual pages!)
  let redirectUrl = '';
  if (select1Val === 'A' && select2Val === '1') {
    redirectUrl = 'page-a1.html';
  } else if (select1Val === 'A' && select2Val === '2') {
    redirectUrl = 'page-a2.html';
  } else if (select1Val === 'B' && select2Val === '1') {
    redirectUrl = 'page-b1.html';
  } else if (select1Val === 'C' && select2Val === '3') {
    redirectUrl = 'page-c3.html';
  } else {
    // Fallback URL if no specific rule matches
    redirectUrl = 'default-compare-page.html';
  }

  // Send the user to the target page
  if (redirectUrl) {
    window.location.href = redirectUrl;
  }
});
</script>

Just replace the example URLs with your actual Joomla page paths (use full paths like /compare/option-a-1 if needed).

3. Embed the Form in Your Joomla Article #

Joomla's editors often filter HTML/JavaScript by default, so follow these tips to make sure your code stays intact:

• Open your article, switch to the HTML Source Code mode (look for a button like < > or "Source" in your editor toolbar).
• Paste the form code followed by the JavaScript into the source editor.
• If you're using JCE Editor: Go to Editor Profiles > Your Profile > Plugin Parameters > HTML Filtering, then add form, select, button, script to the "Allowed Tags" list to prevent your code from being stripped.
• For more reliability, you can create a Custom HTML Module with the form/script, then embed it into your article using the syntax {loadmodule mod_custom, Your Module Name}.

4. Test Everything Before Publishing #

Don't skip this step:

• Try submitting the form without selecting options—you should see the browser's built-in required field warning.
• Test every dropdown combination to confirm you're redirected to the correct page.

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