hi i have a form which dynamically generates fields when i select a value from a combo box with the value associated with the combo box value the problem is i have a jquery calculation function too which will calculate percentage from the textbox generated by ajax. can any one help me in this here is my ajax file
<?php
session_start();
require("includes/dbconnect.php");
require("includes/function.php");
$zdb = $_SESSION["zdbyear"];
mysql_select_db($zdb);
$code = $_GET["code"];
$ztit = $_SESSION["tit"];
//browse($code);
$result = mysql_query("SELECT * FROM `loctype` WHERE code='".$code."'") or die(mysql_error());
require("includes/dbconnect.php");
$getcomp = mysql_query("SELECT * FROM `compyear` WHERE finyear='".$ztit."'") or die(mysql_error());
$st = mysql_fetch_array($getcomp);
$row = mysql_fetch_array($result);
echo "<table border='1'>";
echo "<tr>";
echo '<td align="left"> <font color="green"><b>Deposit</b></font> <input type="text" size="20" maxlength="40" name="deposit" value="'.$row["deposit"].'" class="qty form-input-rate" text-align:left ; /></td>';
echo '<td align="right"> <font color="red"><b>Rent</b></font> <input type="text" id="rent" size="20" maxlength="40" name="rent" value="'.$row["rent"].'" class="form-input-rate" /></td>';
echo '<td align="right"> <font color="#D2691E"><b>S.T</b></font> <input type="text" id="stperc" size="5" maxlength="40" name="servtax" style="width: 50px;" value="'.$st["stperc"].'" class="form-input-rate" text-align:left ; />%</td>';
echo '</tr>';
echo '<tr>';
echo '<td align="right"> <font color="green"><b>S.T</b></font> <input type="text" size="20" maxlength="40" id="stamt" name="stamt" value="" class="form-input-rate" text-align:left ; /></td>';
echo '<td align="right"> <font color="red"><b>Amount</b></font><input type="text" size="20" maxlength="40" id="totamt" name="totamt" value="" class="form-input-rate" readonly/></td>';
echo '<tr>';
echo "</table>";
}
?>
here is my jquery calculation part
$(document).ready(function () {
$("#stperc").keyup(function () {
alert($("#stperc").val());
var value = $("#stperc").val();
var value2 = $("#rent").val();
$('#stamt').val((value * value2) / 100).toFixed(2);
});
$("#stperc").blur(function () {
var val = parseInt($("#rent").val());
$('#totamt').val(val + Number($("#stamt").val())).toFixed(2);
});
});
Use delegation:
$("#some_table_id").on('keyup', '#stperc', function(){
// do it here
});
Similarly you can delegate blur event
$("#some_table_id").on('blur', '#stperc', function(){
// do it here
});
Give an id to the table in your html code so that the action can be executed on any inputs added in that table (some_table_id is the dummy id I use)
echo "<table border='1' id='some_table_id'>";
The events might not be triggered because they are created before the #stperc is in the DOM. You could bind this to document like this:
$(document).on({
"keyup":function() {
alert($(this).val());
var value = $(this).val();
var value2 = $("#rent").val();
$('#stamt').val((value * value2) / 100).toFixed(2);
},
"blur":function() {
var val = parseInt($("#rent").val());
$('#totamt').val(val + Number($("#stamt").val())).toFixed(2);
}
},"#stperc");
Since you're adding these events to the same element, you could queue it up together.
I also changed #stperc inside the keyup event to $(this).
Here's a demo at jsFiddle
Alternatively, you could bind these events to the parent of table. You can't use table as a parent here because <table> is also dynamic. For more info, see on()