点击注册按钮时AJAX无法获取表单输入值该如何解决？

问题根源 #

你的代码在页面初次加载完成后就立即执行了获取表单三个输入框值的逻辑，此时用户还未在表单中输入任何内容，username、full_name、password三个变量存储的都是初始空值。后续点击注册按钮时，你调用的还是页面加载时提前存储的旧空值，自然无法获取到用户最新输入的内容。

修复后的代码 #

你只需要将获取表单值的逻辑移动到点击事件的回调函数内部即可，每次点击注册按钮时都会重新读取输入框的最新值：

<?php include 'partials/footer.php'; ?>
<script>
  $(document).on('click','#btn_register',function() {
    // 把取值逻辑放到点击事件内部，每次点击实时读取最新输入
    var username = $('#us').val();
    var full_name = $('#fn').val();
    var password =$('#pw').val();
    console.log(username + full_name + password);
    // 后续如果要发送AJAX请求也写在这里即可
  })
</script>

额外优化建议 #

• 可以在获取到表单值后先增加非空校验，避免提交无效空数据
• 表单可以增加id属性，通过serialize()方法批量获取表单值，减少重复代码
• 提交请求后可以根据后端返回结果在#message节点展示操作提示

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