CODEWITHSUNDEEP
javascriptjqueryhtml
user3810795
user3810795

Reputation: 162

Can't get the value of closest prev td input

I need your help!

I have fiddle and what I want is multiplicate two td's values and the result go to the next td.

$(document).ready(function(){
$( "input[id^='unitval']" ).keyup(function() { 

var input_value = parseFloat($(this).val());
var Cant = $("#item_Cant").text(); 
var totval = (input_value * Cant);

    if (!isNaN(input_value)) { // the input is a number
    //$("#totval1").val(totval); // update second field
         $(this).closest('td').next().find('input').val(totval);

    } else { // the input wasn't a number
        $("#totval1").val("not a number?"); // show an error mesage
    }
});
});

But just works with the first row because the second one still multiplicating with the td of first row not the actual td

I tried to change the:

 var Cant = $("#item_Cant").text();

with 

var Cant = $("input[id^='item_Cant']").text();

But don't works, I have not idea why, even first row.

But in this line I need the correct Jquery for get the last td input value in the same tr.

I tried many lines but without success, hope you can understand me.

Thanks for your help.

Upvotes: 0

Views: 1076

Answers (2)

Steve
Steve

Reputation: 20469

You cannot have multiple identical ids on a page.

Use classes instead:

$(document).ready(function(){
$( "input.unitval" ).keyup(function() { 

var input_value = parseFloat($(this).val());
var Cant = $(this).parent().prev().text(); 
var totval = (input_value * Cant);

    if (!isNaN(input_value)) { // the input is a number
    //$("#totval1").val(totval); // update second field
         $(this).parent().parent().find('.totval').val(totval);

    } else { // the input wasn't a number
        $("#totval1").val("not a number?"); // show an error mesage
    }
});
});

<table width="500" border="1">
    <tr>
        <td>Quantity</td>
        <td>VAL1</td>
        <td>RESULT Quantity*VAL1</td>
        <td>VAL2</td>
        <td>RESULT Quantity*VAL2</td>
    </tr>
    <tr>
        <td>5</td>
        <td><input class="unitval" type="text"/></td>
        <td><input readonly class="totval"  type="text"/></td>
        <td><input class="unitval" type="text"/></td>
        <td><input readonly class="totval"  type="text"/></td>
    </tr>
    <tr>
        <td>4</td>
        <td><input class="unitval" type="text"/></td>
        <td><input readonly class="totval"  type="text"/></td>
        <td><input class="unitval" type="text"/></td>
        <td><input readonly class="totval"  type="text"/></td>
    </tr>

</table>

http://fiddle.jshell.net/8CGXf/

Upvotes: 1

sahbeewah
sahbeewah

Reputation: 2690

You are always referring to item_Cant ID every time you do your calculation. You need to find the quantity element with respect to your current input field.

Here's one approach that'll work with your current structure:

$(document).ready(function () {
    $("input[id^='unitval']").keyup(function () {
        var input_value = parseFloat($(this).val());
        var Cant = $(this).closest('tr').find('[id^="item_Cant"]').text();
        var totval = (input_value * Cant);

        if (!isNaN(input_value)) { // the input is a number
            //$("#totval1").val(totval); // update second field
            $(this).closest('td').next().find('input').val(totval);

        } else { // the input wasn't a number
            $("#totval1").val("not a number?"); // show an error mesage
        }
    });
});

Here's a fiddle: http://fiddle.jshell.net/P89Tj/1/

Upvotes: 1

Related Questions