javascript - jquery和javascript获得输入类型的输入值等于文本，但它是空的，即使它不是

Question

当我尝试获取输入类型=文本的值时，即使它们不是空的，也是如此。知道为什么吗？

 var form_data = new FormData(document.getElementById('box')); // Creating object of FormData class
        var cust_name = document.getElementById("cust_name").value;
        var order_num = $("#order_num").val();
 $("#search").click(function(){
            console.log(cust_name) //they are empty even though it's not
            console.log(order_num) //they are empty even though it's not
             $.ajax({
                    url: "search.php",
                    method: "POST",
                    data: {cust_name: cust_name, order_num: order_num}, 
                    error: function (request, status, error) {
                        $("body").append("<div style='background:rgba(255,0,0,0.8);float:left;position:fixed'>" + request.responseText + "</div>")
                    }                   
             }).done(function(msg) {
              $("body").append("<div style='background:rgba(255,0,0,0.8);float:left;position:fixed'>" + msg + "</div>")
              });
             });    

         });

这是我的 html 代码:

<form id="box" method="post">


<input type="text" id="order_num" name="order_num" placeholder="🔠Order number"/> <br/>
<input type="text" id="cust_name" name="cust_name" placeholder="🔠Customer name"/> <br/>
sent date: <input type="date" name="sent_date" id="sent_date"/><br/>
<input type="text" id="sales_person" name="sales_person" placeholder="🔠sales person"/><br/>
<input type="button" id="search" class="button" value="search" name="search"/>
</form>

Answer 1

您需要将事件监听器附加到 submit您的事件form当用户提交时获取值。这是一个精简的工作示例。

您的代码的问题在于，它在页面加载时立即运行，并且由于 JavaScript 是一种运行时语言，因此它不会返回并用当前值更新这些变量。

您还可以将这两个变量声明放在 click 内处理程序(显示在底部解决方案中)。

解决方案(首选)

document.getElementById('box').addEventListener('submit', function(e) {
  e.preventDefault();
  var form_data = new FormData(this);
  var cust_name = document.getElementById("cust_name").value;
  var order_num = document.getElementById("order_num").value;
  console.log(cust_name, order_num);
});

<form id="box" method="post">
  <input type="text" id="order_num" name="order_num" placeholder="🔠Order number"/> <br/>
  <input type="text" id="cust_name" name="cust_name" placeholder="🔠Customer name"/> <br/>
  <button type="submit">Search</button>
</form>

注释

• 我用过<button>而不是<input type="button">
• 我通过了this至FormData因为我们从事件处理程序中引用了它
• 我用过e.preventDefault()默认情况下停止页面刷新。

解决方案(最少的代码更改)

$("#search").click(function(){
  var form_data = new FormData(document.getElementById('box'));
  var cust_name = document.getElementById("cust_name").value;
  var order_num = $("#order_num").val();
  console.log(cust_name);
  console.log(order_num);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="box" method="post">
  <input type="text" id="order_num" name="order_num" placeholder="🔠Order number"/> <br/>
  <input type="text" id="cust_name" name="cust_name" placeholder="🔠Customer name"/> <br/>
  sent date: <input type="date" name="sent_date" id="sent_date"/><br/>
  <input type="text" id="sales_person" name="sales_person" placeholder="🔠sales person"/><br/>
  <input type="button" id="search" class="button" value="search" name="search"/>
</form>