CODEWITHSUNDEEP
javascriptjqueryajax
DevWithSigns
DevWithSigns

Reputation: 725

cannot update values of textbox in jQuery

I'm trying to update values of three textboxes in three different table rows but it is only updating one textbox value in one row. I'm sharing my code please guide me.

HTML:

<table>
<tr>
    <td>
      <input class="ppp" type="text" id="ItemBuyingPrice0" value="10" style="width:55px;" />
    </td>
    <td>
      <input type="text" id="Itembpusd0" readonly value="1.22" style="width:50px;" />
    </td>
</tr>
<tr>
    <td>
      <input class="ppp" type="text" id="ItemBuyingPrice1" value="10" style="width:55px;" />
    </td>
    <td>
      <input type="text" id="Itembpusd1" readonly value="1.22" style="width:50px;" />
    </td>
</tr>
<tr>
    <td>
      <input class="ppp" type="text" id="ItemBuyingPrice2" value="10" style="width:55px;" />
    </td>
    <td>
      <input type="text" id="Itembpusd2" readonly value="1.22" style="width:50px;" />
    </td>
</tr>
</table>

jQuery:

var BindBPCustom = function (id, BPUSD) {
    var errormsg = "";
    var amount = $(id).val();
    var country21 = $('#CurrencyValue').val();    
    $.ajax({
        type: "GET",
        url: cc,
        data: { amount: amount, country: country21 },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $(BPUSD).val(data);
        },
        error: function (jqXHR, exception) {            
        }
    });
}
$(".ppp").on("keydown", function () {
    var cnt = 0;
    var bp = $("#ItemBuyingPrice" + cnt);
    var converted = $("#Itembpusd" + cnt);
    cnt++;
    BindBPCustom(bp, converted);
    alert(cnt);
});

I want to change every Itembpusd0,1,2 values on each corresponding text typed in ItemBuyingPrice0,1,2. Currently it is just changing only one textbox value if i type in ItemBuyingPrice0 it is changing Itembpusd0 value but i want this in other textboxes as well. Please guide me

Upvotes: 0

Views: 124

Answers (5)

Rel
Rel

Reputation: 2804

You don't have a loop so it will only ever update #ItemBuyingPrice0.

Put a loop in or use a class selector:

Put the class buyingprice on your inputs you want to update, ie:

<input class="buyingprice" type="text" id="Itembpusd0" readonly value="1.22" style="width:50px;" />

And then update:

$(".ppp").on("keydown", function () {
    $(".buyingprice").each(function(){
        BindBPCustom($(this), converted);
    });
});

Upvotes: 0

Catwood
Catwood

Reputation: 157

I might be missing something but do you need a for loop?

$(".ppp").on("keydown", function () {


    for(var cnt = 0; cnt <2;cnt ++){

        var bp = $("#ItemBuyingPrice" + cnt);
        var converted = $("#Itembpusd" + cnt);
        cnt++;
        BindBPCustom(bp, converted);
        alert(cnt);
   }
}

});

Upvotes: 0

webNeat
webNeat

Reputation: 2828

From the documentation

"json": Evaluates the response as JSON and returns a JavaScript object.

So here your data is an Object and to pass it to val() you need to stringify it.

  $(BPUSD).val(data.stringify());

Upvotes: 0

SSA
SSA

Reputation: 5493

I think you are making things extra complicated.

Example in jsfiddle

var BindBPCustom = function (id, BPUSD) {
    var errormsg = "";
    var amount = $(id).val();
    var country21 = $('#CurrencyValue').val();    
    $.ajax({
        type: "GET",
        url: cc,
        data: { amount: amount, country: country21 },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $(BPUSD).val(data);
        },
        error: function (jqXHR, exception) {            
        }
    });
}
$(".ppp").on("keydown", function () {

    var bp = $(this);

    var eletoUpdate = bp.parent().siblings('td').find('input:text');

    BindBPCustom(bp, eletoUpdate);

});

Upvotes: 1

T J
T J

Reputation: 43156

You can use this inside an event handler to refer to the element. You can use jquery selectors to access the next textbox as follows:

$(".ppp").on("keydown", function () {
  //var bp = $("#ItemBuyingPrice" + cnt); this can be replaced with $(this)
   var converted = $(this).parent().next().find("input");
   BindBPCustom($(this), converted);
   alert(cnt);
});

Upvotes: 1

Related Questions