Calculate two input values of fetched data using jquery

Question

The code below displays a table of data in input box based on drop down selection. Then I want to multiply row1 and row2 values and should display in row3. But the calculation between row1 and row2 is not working using jQuery. Need help!

display.php

<!DOCTYPE html>
<html lang="en">
<head>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","ajax.php?q="+str,true);
        xmlhttp.send();
    }
}
$(document).ready(function() {
    $('#form').on('keyup', '.test1', calcTotal) ;
    $('#form').on('keyup', '.test2', calcTotal) ;
    function calcTotal() {
        var $row2 = $(this).closest('tr'),
        test_row  = $row2.find('.test1').val(),
        test_row2 = $row2.find('.test2').val(), 
        total     = test_row * test_row2;
        $row2.find('.test3').val(total);
    }
});
</script>
</head>
<body>
<form name="form_name" method="post" id="form_name" action="" >
<select name="select_name" id="select_name" onchange="showUser(this.value)">
<option value="22">22</option><option value="33">33</option></select>
<div id="txtHint"></div>
</form>
</body>
</html>

ajax.php

<?php
$q = $_GET['q'];
include('connection.php');
$sql="SELECT * from clients where value='".$q."' ";
$result = mysql_query($sql);
echo "<table id='form'>
<tr>
<th>row1</th>
<th>row2</th>
<th>row3</th>
</tr>";
while($row = mysql_fetch_array($result)) {
    $row1=$row['row1'];
    $row2=$row['row2'];
    $row3=$row['row3'];
    echo "<tr>";
    echo "<td><input type='text' name='test1[]' class='test1' value='$row1' /></td>";
    echo "<td><input type='text' name='test2[]' class='test2' value='$row2' /></td>";
    echo "<td><input type='text' name='test3[]' class='test3' value='$row3'/></td>";
    echo "</tr>";
} 
echo "</table>";
?>

There is no class called, test1..also you placed comma instead of semicolons at the end of the variable declaration..var $row2 = $(this).closest('tr'), test_row = $row2.find('.test1').val(), test_row2 = $row2.find('.test2').val(), — abhij89
– abhij89, Commented Feb 14, 2015 at 11:46
sry, I posted wrong. Updated now. It was class only. But also not working. — vas_bar_code
– vas_bar_code, Commented Feb 14, 2015 at 11:53
@hudixt display.php is a view page. i am including ajax.php in display.php — vas_bar_code
– vas_bar_code, Commented Feb 14, 2015 at 12:13

void · Accepted Answer · 2015-02-14 12:14:15Z

1

Replace these two line

 $('#form').on('keyup', '.test1', calcTotal) ;
 $('#form').on('keyup', '.test2', calcTotal) ;

With this

 $(document).on('keyup', '.test1, .test2', calcTotal) ;

Because #form was added in the DOM after it's construction.

edited Feb 14, 2015 at 12:14

answered Feb 14, 2015 at 11:56

void

36.8k10 gold badges72 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

vas_bar_code Over a year ago

#form- i am getting the id of table.

void Over a year ago

#form- i am getting the id of table. What do you mean by that?

vas_bar_code Over a year ago

$(document).on('keyup', '.test1', calcTotal) ; i don't get ur answer

void Over a year ago

Cool! I hope you understood the concept.

vas_bar_code Over a year ago

Let us continue this discussion in chat.

habib ul haq · Accepted Answer · 2015-02-14 12:26:39Z

0

I think

$('#form').on('keyup','.test1',calcTotal) ;

should be replaced with

 $('#form').on('keyup', '#test1', calcTotal) ;

as test1 is id of input and not class.

edited Feb 14, 2015 at 12:26

habib ul haq

8246 silver badges13 bronze badges

answered Feb 14, 2015 at 11:44

CodeWithCoffee

1,9042 gold badges15 silver badges37 bronze badges

2 Comments

vas_bar_code Over a year ago

sry, I posted wrong. Updated now. It was class only. But also not working.

void Over a year ago

I dont think anywhere it is ID. Its class only. Correct me if I am wrong.

Collectives™ on Stack Overflow

Calculate two input values of fetched data using jquery

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related