Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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>');
});
$("#balance").html("");
$.each(response.balancedata,function(key,item){
$('#balance').val(item.mybalance);
});
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 >Avaliable Balance :<input type="text" id="balance" required class="total form-control" readonly /></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 but this balance value not work with span tag . Although show data in frontend, it pass with empty string and cannot compare .So I change with input readonly to get data.
let balan = $('#balance').text();
console.log(balan);
let total = $('#total').val();
console.log(total);
if(total >balan){
console.log(yes);
}else{
console.log("total is less than ");
}
After I get balance value by changing input readonly value, I get data value but
I found two problems. 1- total value cannot update without reload page although it use jquery. 2-after reload , although total value appear in console, it cannot compare with balance, it has empty value cannot compare . here is cosole after reload.
99944 trade:198:16
26666664 trade:199:16
total is less than
So How can solve this problem. How can I compare this two values , can someone show me solution. please check my codes,
So basically this?
function increase() {
let fieldQuantity = document.querySelector('#quantity-field');
if (parseInt(response.quantity) > parseInt(fieldQuantity.value)) {
fieldQuantity.value = parseInt(fieldQuantity.value) + 1;
return;
}
document.querySelector('#increase-button').disabled = true;
}
@Tray2 sorry , I not get the point, please check my code. if with span tag ,how can query value that get from ajax call . and how can compare ,
@zwarkyaw response.quantity is part of the response from an ajax call, and if you have the value in a span rather than an input use .innerHTML instead of value
@Tray2 let balan = $('#balance').innerHTML; , not get value from span tag , show NaN ,
@zwarkyaw You need to parseInt the value and of course check that its not and empty string.
@Tray2 still show NaN, this balance value get from ajax response
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>');
});
dynamically response? cannot call from span tag?
let balan = $('#balance').innerHTML;
console.log(parseInt(balan));
@zwarkyaw This line
$('#balance').append('<span>'+item.mybalance+'</span>');
Appends another span to the element, and you have several elements with the same id on the page, which will not work at all.
Can you please show the response you are getting from AJAX call ?
@dev-chahal hello bro
$("#balance").html("");
$.each(response.balancedata,function(key,item){
console.log(response.balancedata);
$('#balance').text(item.mybalance);
});
Array [ {…} ]
0: Object { id: 1, coinbalance: 24, mybalance: 99944, … }
length: 1
I take mybalance value to span tag , after that I call this span tag value from jquery again, this not work
Where is balancedata key that you are using here ?
$.each(response.balancedata,function(key,item){
@dev-chahal get from controller
public function marketbuyshow(){
$balance = CoinBalance :: all();
return response()->json([
'balancedata' => $balance,
]);
}
I just noticed, you have same id for span and input tag. Using different is recommended. Now is the mybalance value updated in span using ?
$('span#balance').text(item.mybalance);
@dev-chahal this input tag id just for example , not real use, if span tag not work, I will use input readonly tag ,So it is not problem.
@zwarkyaw Ok, Is text updated in span which is not calculated or is it not even updated there
@dev-chahal
Avaliable Balance : 99944 get in frontend , but I need to compare this value to total input value.
i call this by let balan = Number($("#balance").text());
in console ,zero .
I not know why this happen.
Using this will update balance in span tag.
$("#balance").html("");
$.each(response.balancedata,function(item){
$('span#balance').text(item.mybalance);
});
After that when fetching the value, use
let balan = parseInt($('span#balance').text());
It should work.
@dev-chahal it showNaN. this mean nothing pass
@zwarkyaw Did you use span#balance there ?
What the following is giving you ?
console.log($('span#balance').text());
@dev-chahal yes let balan = parseInt($('span#balance').text());
@dev-chahal show empty string in console
@zwarkyaw When is your following event triggered ? After value is updated in span right ?
@dev-chahal in console
<empty string>
NaN
170933331
total is less than
170933331 is total value in input field ,when enter input values, price , amount and total , total value is update /after that i need to compare total value to balance value , after that i will click buy button , if toatl > balance , button will disable .
@zwarkyaw Something seems to be missing. Please share screenshots that cover everything.
@dev-chahal
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<!-- ------------------------------------ -->
<div class="col-sm-8">
<div class="row justify-content-start">
<div class="col-sm-4">
<form>
<div class="title"> COIN </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 id="balance" class="form-text">Avaliable Balance <p ></p></div> -->
</div>
<button type="submit" id="btnn" class="btn btn-primary marketbuy">Buy</button>
</form>
</div>
</div>
</div>
</div>
</div>
@section('script')
<script>
$(document).ready(function () {
let balan = parseInt($('span#balance').text());
console.log($('span#balance').text());
let total = $('#total').val();
console.log(balan);
console.log(total);
if(total >balan){
console.log("yes")
// $("#btnn").attr("disabled", true);
}else{
console.log("total is less than ");
//$("#btnn").attr("disabled", false);
}
marketbuyshow();
function marketbuyshow(){
$.ajax({
type: "GET",
url: "/showmarketbuydata",
dataType: "json",
success: function (response) {
$("#balance").html("");
$.each(response.balancedata,function(key,item){
// console.log(response.balancedata);
$('span#balance').text(item.mybalance);
});
})
}
@zwarkyaw Oh here it is
You are this piece of code on document ready
let balan = parseInt($('span#balance').text());
console.log($('span#balance').text());
let total = $('#total').val();
console.log(balan);
console.log(total);
if(total >balan){
console.log("yes")
// $("#btnn").attr("disabled", true);
}else{
console.log("total is less than ");
//$("#btnn").attr("disabled", false);
}
Due to which it run when the document is ready. At that time span is empty. Span is filled once ajax is completed.
You need to run this on click of buy now. So for that you can do something like
function compareBalance(){
let balan = parseInt($('span#balance').text());
console.log($('span#balance').text());
let total = $('#total').val();
console.log(balan);
console.log(total);
if(total >balan){
console.log("yes")
// $("#btnn").attr("disabled", true);
}else{
console.log("total is less than ");
//$("#btnn").attr("disabled", false);
}
}
And call it onclick of buy button
<button type="button" onclick="compareBalance()" id="btnn" class="btn btn-primary marketbuy">Buy</button>
@dev-chahal but i want to disable buy button if total > balance . it is not work. Uncaught ReferenceError: compareBalance is not defined
@zwarkyaw Okay, if not this way, then you can use it like
For button,
<button type="button" id="btnn" class="btn btn-primary marketbuy">Buy</button>
For jQuery,
$(document).ready(function () {
$('#btnn').click(function(){
let balan = parseInt($('span#balance').text());
console.log($('span#balance').text());
let total = $('#total').val();
console.log(balan);
console.log(total);
if(total >balan){
console.log("yes")
// $("#btnn").attr("disabled", true);
}else{
console.log("total is less than ");
//$("#btnn").attr("disabled", false);
}
});
}
@dev-chahal balance is already show in frontend ,but not show in jquery call again.
@zwarkyaw You just need to change this part of jquery not whole.
@dev-chahal i make auto calculation of total amount when fill amount value into input. can trigger event after fill amount value into input form that will fill total input automatically.?
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<!-- ------------------------------------ -->
<div class="col-sm-8">
<div class="row justify-content-start">
<div class="col-sm-4">
<form>
<div class="title"> COIN </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 id="balance" class="form-text">Avaliable Balance <p ></p></div> -->
</div>
<button type="submit" id="btnn" class="btn btn-primary marketbuy">Buy</button>
</form>
</div>
</div>
</div>
</div>
</div>
@section('script')
<script>
$(document).ready(function () {
let $price = $('#price');
let $amount = $('#amount');
let updateTotal = () => $('#total').val($price.val() * $amount.val());
updateTotal(); // on page load
$('form input').on('input', updateTotal); // on value change
let balan = parseInt($('span#balance').text());
console.log($('span#balance').text());
let total = $('#total').val();
console.log(balan);
console.log(total);
if(total >balan){
console.log("yes")
// $("#btnn").attr("disabled", true);
}else{
console.log("total is less than ");
//$("#btnn").attr("disabled", false);
}
marketbuyshow();
function marketbuyshow(){
$.ajax({
type: "GET",
url: "/showmarketbuydata",
dataType: "json",
success: function (response) {
$("#balance").html("");
$.each(response.balancedata,function(key,item){
// console.log(response.balancedata);
$('span#balance').text(item.mybalance);
});
})
}
@zwarkyaw Yes you can use onkeyup event
@dev-chahal please show me example bro.
@zwarkyaw Do you want something like, sum of price and amount as value of total input automatically ?
@dev-chahal I got it .thank you bro
@dev-chahal please check
let $price = $('#price');
let $amount = $('#amount');
let updateTotal = () => $('#total').val($price.val() * $amount.val());
updateTotal(); // on page load
$('form input').on('input', updateTotal); // on value change
$("input").keyup(function(){
$("input").css("background-color", "pink");
let balan = parseInt($('span#balance').text());
console.log($('span#balance').text());
let total = $('#total').val();
console.log(balan);
console.log(total);
if(total >balan){
console.log("yes")
$("#btnn").attr("disabled", true);
}else{
console.log("total is less than ");
$("#btnn").attr("disabled", false);
}
});
@zwarkyaw Yes it should work fine. Hope your issue was resolved.
@dev-chahal you are the best ,thanks you . I got solution now.
Please or to participate in this conversation.