提交邮箱触发PDF下载功能失效问题求助

问题详情 #

在WordPress站点实现「提交邮箱获取PDF下载权限」功能时，输入邮箱后点击提交按钮无任何响应。已将emailScript.js放置在/public_html/wp-admin/js目录，HTML中正确引入该文件，更换JS文件位置及路径后问题仍未解决。

相关代码 #

HTML代码 #

<style>
    /* Basic styling (optional) */
    .container { text-align: center; padding: 20px; }
    #downloadBtn { display: none; } /* Hide button initially */
</style>
</head>
<body>
  <div class="container">
    <h4>download our brochure</h4>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    <button id="submitBtn">submit</button>

    <a id="downloadBtn" href="your_pdf_file.pdf" download>Download PDF</a> 
  </div>

  <script src="/public_html/wp-admin/js/emailScript.js"></script>

JavaScript代码 #

const emailInput = document.getElementById("email");
const submitBtn = document.getElementById("submitBtn");
const downloadBtn = document.getElementById("downloadBtn");

submitBtn.addEventListener("click", () => {
  const email = emailInput.value;
  if (validateEmail(email)) { // (Optional) Add email validation
    // 1. Here, you'd typically send the email to your server/backend for storage/processing.

    // 2. After successful email submission:
    submitBtn.style.display = "none";
    downloadBtn.style.display = "block";
  } else {
    alert("Please enter a valid email address.");
  }
});

function validateEmail(email) {
  const excludedDomains = ["hotmail.com", "hotmail.co.uk", "gmail.com", "gmail.co.uk"];
  const domain = email.split("@")[1];

  if (!email.includes("@") || excludedDomains.includes(domain.toLowerCase())) {
    return false;
  }
  return true;
}

排查与解决步骤 #

1. 修正JS文件路径与权限
   WordPress的wp-admin目录有访问权限限制，前端页面无法直接加载该目录下的资源。建议将emailScript.js移动到主题目录的js文件夹（如/wp-content/themes/你的主题名称/js/），然后修改HTML中的引入路径：

   • 若使用WordPress模板，用函数获取主题路径：

     <script src="<?php echo get_template_directory_uri(); ?>/js/emailScript.js"></script>
     

   • 静态页面则使用相对路径：

     <script src="/wp-content/themes/你的主题名称/js/emailScript.js"></script>
     

   同时在浏览器开发者工具的「网络」标签中，确认JS文件返回200状态码，无404错误。

2. 确保DOM加载完成后执行JS
   若JS执行时机早于DOM渲染完成，会导致无法获取到submitBtn等元素，进而无法绑定点击事件。修改JS代码，用DOM加载事件包裹逻辑：

   document.addEventListener('DOMContentLoaded', () => {
     const emailInput = document.getElementById("email");
     const submitBtn = document.getElementById("submitBtn");
     const downloadBtn = document.getElementById("downloadBtn");
   
     submitBtn.addEventListener("click", () => {
       const email = emailInput.value;
       if (validateEmail(email)) {
         submitBtn.style.display = "none";
         downloadBtn.style.display = "block";
       } else {
         alert("Please enter a valid email address.");
       }
     });
   
     function validateEmail(email) {
       const excludedDomains = ["hotmail.com", "hotmail.co.uk", "gmail.com", "gmail.co.uk"];
       const domain = email.split("@")[1];
       if (!email.includes("@") || excludedDomains.includes(domain.toLowerCase())) {
         return false;
       }
       return true;
     }
   });
   

3. 检查邮箱验证逻辑
   当前验证规则会拒绝gmail、hotmail等主流邮箱，若测试时使用这类邮箱，会触发alert但可能被浏览器弹窗拦截。可临时注释验证逻辑，测试按钮功能是否正常：

   // if (validateEmail(email)) {
     submitBtn.style.display = "none";
     downloadBtn.style.display = "block";
   // } else {
   //   alert("Please enter a valid email address.");
   // }
   

4. 阻止表单默认提交行为（若存在）
   如果按钮被包裹在<form>标签内，点击会触发表单默认提交，导致页面刷新。需在点击事件中添加阻止默认行为的代码：

   submitBtn.addEventListener("click", (e) => {
     e.preventDefault(); // 阻止页面刷新
     // 后续逻辑...
   });
   

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