使用jQuery序列化表单数据失败求助（基于Bulma框架）

看起来你遇到的核心问题是无法正确获取表单输入值，导致弹出的提示框内容为空。结合你给出的代码片段，我先帮你排查几个常见的坑，再给出可行的解决方案：

第一步：先修正HTML里的拼写错误 #

你代码里的这段：

<div clas...

明显是class属性拼写漏了一个s，写成了clas。这个错误会导致Bulma的样式失效，更关键的是，如果这个div是包裹用户名输入框的容器，可能会间接影响jQuery对输入框的选择逻辑。修正后应该是：

<div class="control">
  <input class="input" type="text" id="username" name="username" placeholder="Username">
</div>

第二步：正确编写jQuery提交逻辑 #

很多时候提示框为空，是因为DOM还没加载完成就执行了JS，或者没有阻止表单默认提交行为（页面直接刷新，导致提示框一闪而过或者根本没执行）。下面是完整的可行代码：

完整HTML+jQuery示例 #

<form method="post" action="" id="userForm">
  <div class="field">
    <label class="label">Name</label>
    <div class="control">
      <input class="input" type="text" id="yrname" name="yrname" placeholder="Text input">
    </div>
  </div>
  <div class="field">
    <label class="label">Username</label>
    <div class="control">
      <input class="input" type="text" id="username" name="username" placeholder="Username">
    </div>
  </div>
  <div class="field is-grouped">
    <div class="control">
      <button class="button is-link">Submit</button>
    </div>
  </div>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // 绑定表单提交事件
  $('#userForm').submit(function(e) {
    // 阻止表单默认提交行为（关键！不然页面会刷新，提示框看不到）
    e.preventDefault();
    
    // 获取输入值：可以用id选择器，或者name选择器
    var name = $('#yrname').val();
    var username = $('input[name="username"]').val();
    
    // 验证值是否存在，再弹出提示
    if (name && username) {
      alert(`Name: ${name}, Username: ${username}`);
      // 如果需要AJAX提交，可以在这里写$.post或者$.ajax逻辑
      // $.post('', { yrname: name, username: username }, function(response) {
      //   // 处理返回结果
      // });
    } else {
      alert('请填写完整信息！');
    }
  });
});
</script>

关键知识点说明 #

• $(document).ready()：确保DOM完全加载后再执行JS，避免找不到表单元素的问题。
• e.preventDefault()：阻止表单默认的提交跳转，这样页面不会刷新，JS逻辑能完整执行。
• .val()方法：jQuery中获取输入框值的正确方式，不要用.text()或者.html()，这两个是针对普通文本内容的，输入框的值存在value属性里，.val()专门用来获取/设置这个值。

额外排查点 #

如果还是不行，打开浏览器的开发者工具（F12），切换到Console标签，看看有没有JS报错：

• 如果提示$ is not defined，说明jQuery没正确引入，检查CDN链接是否有效，或者本地jQuery文件路径是否正确。
• 如果提示某个元素is null，说明选择器写错了，检查输入框的id/name是否和JS里的一致。

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