CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
vas_bar_code
vas_bar_code

Reputation: 213

Calculate two input values of fetched data using jquery

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>";
?>

Upvotes: 0

Views: 1118

Answers (2)

CodeWithCoffee
CodeWithCoffee

Reputation: 1904

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.

Upvotes: 0

void
void

Reputation: 36703

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.

Upvotes: 1

Related Questions