Mencoba mendapatkan nilai Formulir Input HTML ke URL panggilan AJAX jQuery sebagai amt di url: "http://localhost:8080/orderNo?amount=" + amt,. Saya bisa mendapatkan nilai input untuk masuk ke konsol dengan memanggil getAmtValue() tetapi sepertinya tidak bisa mendapatkan nilai amt di luar. Apa yang saya lakukan salah di sini tolong? Masalah ruang lingkup?

<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>

Memperbarui:

Per McB & Nawed Khan, sekarang berfungsi seperti di bawah ini.

$(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;
    };

-1
wallwalker 28 Oktober 2019, 22:12

1 menjawab

Jawaban Terbaik

Pindahkan panggilan ajax ke dalam fungsi yang dipanggil pada pengiriman formulir. Jadi seluruh javascript akan terlihat seperti ini:

<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>
1
Nawed Khan 28 Oktober 2019, 19:50