Get Form Input value to jQuery AJAX call URL variable

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

$(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. So the whole javascript will look like this:

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

Get Form Input value to jQuery AJAX call URL variable

Question

1 answers

solution1
1 ACCPTED 2019-10-28 19:50:58

Get Form Input value to jQuery AJAX call URL variable

Question

1 answers

solution1 1 ACCPTED 2019-10-28 19:50:58

solution1
1 ACCPTED 2019-10-28 19:50:58