Question 36755 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How compare data value get from ajax call database with html input value in realtime – Jquery

I try to compare two data values .
one value get from database by ajax jquery call


function marketbuyshow(){

  $.ajax({
          type: "GET",
          url: "/showmarketbuydata",
          dataType: "json",
          success: function (response) {

   $("#balance").html("");
            $.each(response.balancedata,function(key,item){
              $('#balance').append('<span>'+item.mybalance+'</span>');
                      
            });

other one get from input value. I have this form for data input , price / amount / total input


                  <form>
                          <div class="title"> </div>
                          <div >Avaliable Balance : <span id="balance"></span></div>
                        <div class="mb-3">
                          <label for="">Price</label>
                          <input type="text" id="price" required class="price form-control" />
                        </div>
                        <div class="mb-3">
                          <label for="">Amount</label>
                          <input type="text" id="amount" required class="amount form-control" />
                        </div>
                        <div class="mb-3">
                          <label for="">Total</label>
                          <input type="text" id="total" required class="total form-control" readonly />
                         
                        </div>
                        <button type="submit" id="btnn" class="btn btn-primary marketbuy">Buy</button>
                      </form>

if total value greater than avaliable balance
I want to disable buy button by jquery as follow
but this balance value not work.
Although show data in frontend,
it pass with empty string and cannot compare in real time.

 let balan = $('#balance').val();
       console.log(balan);
       let total = $('#total').val();
       console.log(total);
if(total >balan){
         console.log($('#total').val());
         $("#btnn").attr("disabled", true);
       }else{
       // console.log("total is less than ");
        $("#btnn").attr("disabled", false);
       }

enter image description here

How can I get balance value in realtime and can compare whenever total values get in inputform .
How can I do this .
Please someone help me.

Tags:

3

Answers


  1. 0

    Span won’t have a val(). If you want to use val(), make it a readonly input. You could also use .text() to get what’s in the span.

    Login or Signup to reply.
  2. 0

    General idea of solution:

    For real time you might consider using Socket.io (HTML version). This way you will create a direct, two-way connection with your Server. This way you can push the new value to the client whenever it changes in the backend. Anytime you write in the input, you could in the onChange compare the user input with the current value pushed by Socke.io, which will constantly update in real time.

    Why do I recommend Socket.io?

    Forgive me, I took apart your entire code and I am aware of that, however, I wanted to make you aware of a slightly different handling of the problem. Socket.io is a clean solution in that the server contacts you only when that value actually changes and so client-side you don’t need long polling or anything like that.

    Login or Signup to reply.
  3. 0

    Here’s an example of getting the span contents:

    https://jsfiddle.net/642s8nau/2/

    <form>
  <div class="title"> </div>
  <div >Avaliable Balance : <span id="balance">1000</span></div>
  <div >Another Value : <span id="anotherValue">500</span></div>
  <button type="button" id="getValues" class="btn btn-primary">Compare Values</button>
</form>  
    
$(document).on("click", "#getValues", function (event) {
    alert(Number($("#balance").text()) > Number($("#anotherValue").text()));
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search