获取表格输入值到 jQuery AJAX 调用 URL 变量

Question

Trying to get the HTML Input Form value to a jQuery AJAX call's URL as amt in url: "http://localhost:8080/orderNo?amount=" + amt, . Trying to get the HTML Input Form value to a jQuery AJAX call's URL as amt in url: "http://localhost:8080/orderNo?amount=" + amt, . I'm able to get the input value to log to the console by calling getAmtValue() but seem to be unable to get the amt value outside.我可以通过调用 getAmtValue() 获取输入值以登录到控制台，但似乎无法在外部获取 amt 值。 What am I doing wrong here please?请问我在这里做错了什么？ Scoping issue?范围问题？

<body>

 <form class="form-inline" onsubmit = " return getAmtValue()">

      Find orders by amount :<br>

      <div class="form-group">
        <input type="text" class="form-control inputArea" id="getAmt" placeholder="Enter Amount">
      </div>

      <button type="submit" class="btn btn-default submit">Submit</button>
    </form>



</body>

<script>
$(document).ready(function() {

    var amt = "";




    $.ajax({
        type: "GET",
        url: "http://localhost:8080/orderNo?amount="  + amt ,

        xhrFields: {
            withCredentials: true
         },
         dataType : "json",
         success : function(data) {
            let text = "";
            for (let x in data) {

                 $('.order_amt').append("<br>" + data[x].amt + "<br>");
                 $('.order_number').append("<br>" + data[x].order_no + "<br>");
                 $('.order_date').append("<br>" + data[x].date + "<br>"):
                 }


            }


    });//End AJAX





});//End $(document).ready(function()) 

function getAmtValue(){
      amt = document.getElementById("getamt").value;

      console.log("Value from input : " + amt);

      return false;
     };

</script>

Update:更新：

Per McB & Nawed Khan, now working like below. Per McB & Nawed Khan，现在工作如下。

$(document).ready(function() {

    let amt = "";

});//End $(document).ready(function()) 

function getAmtValue(){
      amt = document.getElementById("getamt").value;

      console.log("Value from input : " + amt);

      $.ajax({
        type: "GET",
        url: "http://localhost:8080/orderNo?amount="  + amt ,

        xhrFields: {
            withCredentials: true
         },
         dataType : "json",
         success : function(data) {
            let text = "";
            for (let x in data) {

                 $('.order_amt').append("<br>" + data[x].amt + "<br>");
                 $('.order_number').append("<br>" + data[x].order_no + "<br>");
                 $('.order_date').append("<br>" + data[x].date + "<br>"):
                 }


            }


    });//End AJAX

      return false;
    };

Answer 1

Move the ajax call inside the function that is called on form submit.在表单提交时调用的 function 中移动 ajax 调用。 So the whole javascript will look like this:所以整个 javascript 将如下所示：

<script>
function getAmtValue(){
   var amt = document.getElementById("getAmt").value;
   console.log("Value from input : " + amt);

   $.ajax({
     type: "GET",
     url: "http://localhost:8080/orderNo?amount="  + amt ,

     xhrFields: {
        withCredentials: true
     },
     dataType : "json",
     success : function(data) {
        let text = "";
        for (let x in data) {           
          $('.order_amt').append("<br>" + data[x].amt + "<br>");
          $('.order_number').append("<br>" + data[x].order_no + "<br>");
          $('.order_date').append("<br>" + data[x].date + "<br>"):
        }
     }
   });//End AJAX

   return false;
};
</script>

获取表格输入值到 jQuery AJAX 调用 URL 变量

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-10-28 19:50:58

获取表格输入值到 jQuery AJAX 调用 URL 变量

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-10-28 19:50:58

解决方案1
1 已采纳 2019-10-28 19:50:58