使用jQuery获取表单输入值时变量始终为undefined的问题

问题核心是变量赋值时机错误：你在页面刚加载完成时就执行了var temp=document.getElementById("name").value;和var temp1=document.getElementById("address").value;，此时用户还未在输入框中输入任何内容，temp和temp1会被赋值为空字符串或undefined。后续点击提交按钮时，调用的仍是这个初始固定值，自然无法获取用户后来输入的内容。

修复方案 #

将获取输入框值的逻辑移到点击事件的回调函数内部，每次点击提交时实时读取当前输入框的内容：

<body>
    <input type="text" name="name" id="name" placeholder="enter your name">
    <input type="email" name="address" id="address" placeholder="enter your mail address">
    <input type="submit" name="submit">
    <div id="id0">

    </div>

    <script>
        var a = $('input');
        var i = 0;
        var c;
   
        a.eq(2).on('click', function(){
            // 每次点击时实时获取输入框当前值
            var temp = document.getElementById("name").value;
            var temp1 = document.getElementById("address").value;
            
            alert(temp);
        
            c = document.getElementById('id' + i);
            i++;
            c.innerHTML = "<hr> Hi, " + temp + " Your address is " + temp1 + "<div id='id" + i + "'></div>";
        })
   </script>
</body>

如果使用jQuery，也可以用更简洁的写法获取输入值：$('#name').val()代替document.getElementById("name").value，效果一致。

内容的提问来源于stack exchange，提问作者Muhammad Aamir Khan