模态框输入值获取异常：jQuery无法获取邮箱输入值

我帮你排查了代码里的几个可能问题，大概率是以下原因导致alert弹不出邮箱值：

• jQuery未正确引入：这是最容易忽略的点！如果你的页面没有加载jQuery库，所有$相关的代码都不会执行，自然不会触发alert。请确保在你的自定义<script>代码之前引入jQuery（可以用本地文件，比如：

  <script src="path/to/jquery.min.js"></script>
  

  注意路径要正确指向你的jQuery文件）。

• 事件绑定方式不够可靠：虽然你用了$(document).ready()，但Bootstrap模态框的DOM有时候会有重新渲染的情况，直接绑定submit事件可能失效。换成事件委托的方式绑定会更稳妥，它能监听动态添加到DOM中的元素事件：

  $(document).ready(function(){
      // 用事件委托绑定表单提交事件
      $(document).on('submit', '#optin_form', function(event){
          event.preventDefault(); // 先阻止表单默认提交行为（比return false更可靠）
          var emailValue = $('#optin_email').val();
          alert(emailValue);
          // 如果后续要提交表单或者做其他操作，在这里添加逻辑
          return false;
      });
  });
  

• 表单默认提交行为的干扰：你原来的代码里写了return false;，但有时候在复杂的DOM环境中，先调用event.preventDefault()来阻止表单的默认提交（比如页面跳转）会更可靠，避免代码还没执行alert就已经提交表单刷新页面了。

另外，你可以先做个简单测试：打开浏览器的开发者工具（按F12），在控制台里输入$('#optin_email').val()，然后回车，如果能获取到你输入的邮箱值，说明选择器是没问题的；如果返回undefined，那就要检查输入框的id是否和选择器完全一致（注意大小写，HTML的id是区分大小写的）。

这里给你整理了修复后的完整代码片段，你可以参考：

<p><img src="images/img-get-discount.png" data-toggle="modal" data-target="#optin_modal" alt="Get your discount on <?= htmlspecialchars($this->getTitle()) ?>"></p>

<div id="optin_modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h6>Enter your email and get a discount on <strong><?= htmlspecialchars($this->getTitle()) ?></strong></h6>
      </div>
      <form id="optin_form" method="post" name="contact" role="form">
        <div class="modal-body">
          <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="optin_email" name="optin_email" class="form-control">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <input type="submit" class="btn btn-success" id="submit" value="I Want The Discount!">
        </div>
      </form>
    </div>
  </div>
</div>

<?php if (isset($_POST['optin_email'])) { echo $_POST['optin_email']; } ?>

<!-- 先引入jQuery -->
<script src="path/to/jquery.min.js"></script>
<!-- 再引入Bootstrap的JS（如果用了Bootstrap模态框的话） -->
<script src="path/to/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
    $(document).on('submit', '#optin_form', function(event){
        event.preventDefault();
        var email = $('#optin_email').val();
        alert(email);
        // 这里可以添加保存邮箱到txt文件的后端逻辑，比如用AJAX提交
        // $.post('save-email.php', {email: email}, function(response){
        //     // 处理后端返回的结果
        // });
        return false;
    });
});
</script>

另外，关于保存邮箱到.txt文件的逻辑，你可以用AJAX把邮箱发送到后端PHP脚本，比如写一个save-email.php，里面用file_put_contents('emails.txt', $_POST['email'] . "\n", FILE_APPEND);来追加保存邮箱，这样页面不会刷新，用户体验更好。

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