如何通过链接自动填充另一页面表单的subject输入框？

Got it, let's get this working for you! The root issue here is that even though you're passing the subject parameter in your link's URL, your contact form page doesn't have any code to read that parameter and populate the subject input field. Here's a straightforward fix:

Step 1: Ensure your links pass the correct subject value #

First, double-check your main page links to make sure the subject parameter is set to the product title you want. For example, if your product title is "Title of the product here", your link should look like this (note spaces are URL-encoded as %20, though browsers will often handle this automatically if you use plain spaces):

<div class="squareIndexContentBox1" style="background-color: #fff">
 <a href="contact%20us.html?subject=Title%20of%20the%20product%20here">
 <h3>Title of the product here</h3>
 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
 <div class="learn-more">
 <span id="learn-more">Contact us</span>
 <span class="fa fa-hand-o-left"></span>
 </div>
 </a>
</div>

Step 2: Add JavaScript to your contact form page #

Add this script right before the closing </body> tag on your contact us.html page. It will read the subject parameter from the URL and fill the input field automatically:

// Wait until the page's HTML is fully loaded
document.addEventListener('DOMContentLoaded', function() {
  // Parse the URL's query parameters
  const urlParams = new URLSearchParams(window.location.search);
  // Grab the value of the 'subject' parameter
  const subjectFromUrl = urlParams.get('subject');

  // If we found a subject value, populate the input field
  if (subjectFromUrl) {
    // Decode any URL-encoded characters (like spaces or special symbols)
    const decodedSubject = decodeURIComponent(subjectFromUrl);
    // Find the subject input by its ID
    const subjectInput = document.getElementById('subject');
    // Set the input's value if the element exists
    if (subjectInput) {
      subjectInput.value = decodedSubject;
    }
  }
});

How this works #

• URLSearchParams is a modern browser API that makes parsing URL query parameters super easy (no messy string splitting needed).
• decodeURIComponent ensures any special characters or spaces in your product title are converted back to their original form.
• We wrap the code in DOMContentLoaded to make sure the script runs only after the form input element exists on the page.

Test it out #

Click your product link from the main page, and you should see the subject input field pre-filled with the product title you passed in the URL.

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