按钮仅打开空白标签页求助：表单与脚本异常排查

Hey there! Let's dig into why your form's only spitting out a blank tab instead of loading your /specials/test-page-only page. I'll break down possible issues and fixes based on the code you shared.

First, let's recap the code you provided:

Your Form Code #

<form method="get" action="/specials/test-page-only"> 
  <button class="btn btn-label btn-block btn-lg btn-primary"> 
    <label><i class="fa fa-angle-right fa-2x"></i> </label>Reshare This Special
  </button> 
</form>

Your Incomplete Script Snippet #

var myNodelist = document.querySelectorAll(".btn.btn-label.btn-block.btn-lg....

Possible Issues & Fixes #

1. Target Page Doesn't Exist (or Path Is Wrong) #

First things first: double-check if /specials/test-page-only is a valid path. Try typing your full domain + this path (e.g., https://your-site.com/specials/test-page-only) directly into your browser. If it loads a blank page here too, the problem is with the target page itself—not your form or script.

• Fix: Confirm the page exists on your server, or correct the action attribute to match the actual path (e.g., maybe it's /special/test-page-only missing an "s", or a full URL like https://your-site.com/specials/test-page-only).

2. Your Script Is Blocking Default Form Behavior #

Since your script snippet cuts off, it’s likely you’re adding a click event listener to the button that’s accidentally preventing the form from submitting properly. For example:

// ❌ This would block the form and leave you with a blank tab
document.querySelector(".btn.btn-label.btn-block.btn-lg.btn-primary").addEventListener('click', function(e) {
  e.preventDefault(); // Stops the form from submitting
  // No code to redirect or load the target page here
});

• Fix Option 1: Remove the e.preventDefault() line if you want the form to submit normally.
• Fix Option 2: If you need the script for other logic, manually trigger the redirect after your code runs:

  document.querySelector(".btn.btn-label.btn-block.btn-lg.btn-primary").addEventListener('click', function(e) {
    e.preventDefault();
    // Add your custom logic here first
    window.open('/specials/test-page-only', '_blank'); // Opens in new tab
    // Or use window.location.href = '/specials/test-page-only'; to open in current tab
  });
  

3. Missing type="submit" on the Button #

By default, browsers treat <button> elements inside a form as type="submit", but sometimes omitting this can lead to inconsistent behavior across browsers.

• Fix: Add type="submit" to your button to make its purpose explicit:

  <button type="submit" class="btn btn-label btn-block btn-lg btn-primary">
    <label><i class="fa fa-angle-right fa-2x"></i></label>Reshare This Special
  </button>
  

4. Method Mismatch (Less Likely, But Worth Checking) #

Your form uses method="get", which is standard for loading pages. If the target page is set up only to accept POST requests, submitting with GET might return a blank or error page.

• Fix: If your server expects POST, change the form’s method to post:

  <form method="post" action="/specials/test-page-only">
  

Start with the first check (validating the target page path) since that’s the most common culprit. If that’s good, move on to checking your full script code for unintended default behavior blocks.

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