I am trying to pass an argument to a JavaScript function getConfirmation() and my code is as follows. The call to function is not executed at all. So I guess I am going wrong with calling it. Please help.
<html>
<head>
<script type="text/javascript">
<!--
function getConfirmation(var value1)
{
var retVal = confirm("Pop Code:" + value1 + "\n" + "Amount:" + "" + "\n" + "Updated Balance:" + "" + "\nPlease confirm!");
if( retVal == true )
{
alert("User wants to continue!");
return true;
}else{
alert("User does not want to continue!");
return false;
}
}
//-->
</script>
<body>
<div align="center" style="width:100%; margin: 0px auto;">
<div align="center" style="width:100%; margin: 0px auto; background-color:f0f0f0">
<div id="child" style=" align="center" style="width:100%; margin:0px auto;" >
<div style=" right:5%; top:5%; z-index: 100; position:absolute;">
</div>
<img src = "images/header.png" width ="100%" />
</div>
</div>
<div align="center">
<?php
require 'config.php';
mysql_connect ($dbhost, $dbusername, $dbuserpass);
mysql_select_db($dbname) or die('Cannot select database');
$query = "SELECT * FROM cust_info;";
$result = mysql_query($query) or die(mysql_error());
echo "</br>";
echo "<table border='1'>
<tr>
<th>Pop Code</th>
<th>Open_Date</th>
<th>Maturity_Date</th>
<th>Amount</th>
<th>Balance</th>
<th>Col Amount</th>
</tr>";
while($row1 = mysql_fetch_array($result))
{
if ($row1['status'] == 'DONE')
{
continue;
}
echo "<div class=\"addform\"><form method='post' action=\"txn.php\">\n";
echo "<tr>";
echo "<td><input type='hidden' name='pop_code' value='".$row1['pop_code']."'>" . $row1['pop_code'] . "</td>";
echo "<td><input type='hidden' name='open_date' value='".$row1['open_date']."'>" . $row1['open_date'] . "</td>";
echo "<td><input type='hidden' name='mat_date' value='".$row1['mat_date']."'>" . $row1['mat_date'] . "</td>";
echo "<td><input type='hidden' name='depoamt' value='".$row1['depoamt']."'>" . $row1['depoamt'] . "</td>";
echo "<td><input type='hidden' name='balance' value='".$row1['balance']."'>" . $row1['balance'] . "</td>";
echo "<td>" . " <input type=\"text\" name=\"amount\"/>\n" . "</td>";
//echo "<td>" . "<input type=\"button\" value=\"Make Entry\" onclick=\"getConfirmation();\"" . "</td>";
echo "<td>" . " <input type=\"image\" src=\"images/update.png\" onclick=\"getConfirmation(".$row1['pop_code'].");\" alt=\"Update Row\" class=\"update\" title=\"Update Row\">\n" . "</td>";
echo "</tr>";
echo "</form></div>";
}
echo "</table>";
?>
<div align="center" style="width:100%; margin: 0px auto;">
<img src="images/footer.png" style="width:100%;"/>
</div>
</div>
</body>
</html>
It should be:
function getConfirmation(value1){
and form:
echo "<div class=\"addform\"><form method='post' action=\"txn.php\" onsubmit=\"return getConfirmation('".$row1['pop_code']."');\">";
and you can leave the submit image alone without any javascript calls.
Final code:
echo "<div class=\"addform\"><form method='post' action=\"txn.php\" onsubmit=\"return getConfirmation('".$row1['pop_code']."',this,'".$row1['balance']."');\">\n";
echo "<tr>";
echo "<td><input type='hidden' name='pop_code' value='".$row1['pop_code']."'>" . $row1['pop_code'] . "</td>";
echo "<td><input type='hidden' name='open_date' value='".$row1['open_date']."'>" . $row1['open_date'] . "</td>";
echo "<td><input type='hidden' name='mat_date' value='".$row1['mat_date']."'>" . $row1['mat_date'] . "</td>";
echo "<td><input type='hidden' name='depoamt' value='".$row1['depoamt']."'>" . $row1['depoamt'] . "</td>";
echo "<td><input type='hidden' name='balance' value='".$row1['balance']."'>" . $row1['balance'] . "</td>";
echo "<td><input type=\"text\" name=\"amount\"/>\n</td>";
echo "<td><input type=\"image\" src=\"images/update.png\" alt=\"Update Row\" class=\"update\" title=\"Update Row\">\n</td>";
echo "</tr>";
echo "</form></div>";
and javascript:
<script type="text/javascript">
<!--
function getConfirmation(value1,form,balance)
{
var retVal = confirm("Pop Code:" + value1 + "\n" + "Amount:" + form.amount.value + "\n" + "Updated Balance:" + balance + "\nPlease confirm!");
if( retVal == true )
{
alert("User wants to continue!");
return true;
}else{
alert("User does not want to continue!");
return false;
}
}
//-->
</script>
try changing
function getConfirmation(var value1)
to
function getConfirmation(value1)
You cannot use the var keyword as a function parameter.
try this
function getConfirmation(value1){
//Your function
}
first call the function from your button code just like this
echo "<td><input type="image" src="images/update.png" onclick="getConfirmation('".$row1['pop_code']."');" alt="Update Row" class="update" title="Update Row"></td>";
when we define the function parameter the there is no need to declare
variable as using var keyword so after that replace your javascript
function declaration
<script type="text/javascript">
function getConfirmation(value1)
{
var retVal = confirm("Pop Code:" + value1 + "\n" + "Amount:" + "" + "\n" + "Updated Balance:" + "" + "\nPlease confirm!");
if( retVal == true )
{
alert("User wants to continue!");
return true;
}else{
alert("User does not want to continue!");
return false;
}
}
</script>
I think there is 2 issues with the code.
Remove the var from the function
function getConfirmation(value1)
The code onclick=\"getConfirmation(".$row1['pop_code'].");\" will create proper code on integer values for $row1['pop_code') ie getConfirmation(10), but when the code is text it will be incorrect getConfirmation(test). So you have to add quote the values.
ie onclick=\"getConfirmation('".$row1['pop_code']."');\"
Related
I am trying to create a page to allow toggling on and off certain forums in website, created from raw data in an SQL server. However I need each to have an individual ID so I can show/hide them based on user preference. I am not sure how to go about it. Here is my existing code, disregard the connection values, I am hiding them on purpose. thanks.
$db_host = "host";
$db_username = "username";
$db_pass = "pass";
$db_name = "name";
$db = new PDO('mysql:host='.$db_host.';dbname='.$db_name,$db_username,$db_pass);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
$query = $db->query('SELECT p.name, p.company, o.prodtype AS Type
FROM ownedproducts AS o
JOIN product as p ON p.productID = o.productID
WHERE o.usersID = 2');
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title> User Forum Selection </title>
</head>
<body>
<div>
<input type="text" id="userid">
</div>
<div>
<hr>
<table id=table border = '2'>
<tr id=table-row>
<th id=table-header>Name</th>
<th id=table-header>Company</th>
<th id=table-header>Type</th>
</tr>
<?php
while ($row = $query->fetch())
{
echo "<tr id=table-row >";
echo "<td>" . $row['name'] ."</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
?>
</table>
</div>
</body>
</html>
What about using the product id ? That sounds logical here.
Select it :
$query = $db->query('SELECT p.productID, p.name, p.company, o.prodtype AS Type ...
Then use it in your rows :
while ($row = $query->fetch())
{
echo "<tr id='table-row-" . $row['id'] . "' >";
echo "<td>" . $row['name'] ."</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
Always use single and double quote in id as (id=' ', id=" ")
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title> User Forum Selection </title>
</head>
<body>
<div>
<input type="text" id="userid">
</div>
<div>
<hr>
<table id=table border = '2'>
<tr id=table-row>
<th id=table-header>Name</th>
<th id=table-header>Company</th>
<th id=table-header>Type</th>
</tr>
<?php
while ($row = $query->fetch())
{
echo "<tr id=table-row >";
echo "<td>" . $row['name'] ."</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
?>
</table>
</div>
</body>
</html>
use it in your rows :
<?php
foreach( $query->fetch() as $rows=> $row)
{
echo "<tr id='table-row-'.$rows >";
echo "<td>" . $row[or</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
?>
I'd probably do it in a foreach and use the key.
foreach( $query->fetch() as $key => $row)
{
echo "<tr id='table-row-'.$key >";
echo "<td>" . $row['name'] ."</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
I want to remove DB row data from HTML table. I have an HTML table where I have called all the database table values. I want to give a delete order option to the user. I have used a delete button for that. To do this, I am trying to use ajax and jquery with php delete query. But the issue is When I click on delete it just deletes the HTML row data. It should delete that particular id row from DB as well. I need your help. Please let me know what I have done wrong? I am very much new to ajax and jquery.
remove.php
<?php
include "config.php";
$id = $_REQUEST['id'];
// Delete record
$query = "DELETE FROM mi_home_tv WHERE id='$id'";
mysqli_query($link,$query);
echo 1;
jquery+ajax code
<script src='jquery-3.0.0.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
// Delete
$('.delete').click(function(){
var el = this;
var id = this.id;
var splitid = id.split("_");
// Delete id
var deleteid = splitid[1];
// AJAX Request
$.ajax({
url: 'remove.php',
type: 'POST',
data: { id:deleteid },
success: function(response){
// Removing row from HTML Table
$(el).closest('tr').css('background','tomato');
$(el).closest('tr').fadeOut(800, function(){
$(this).remove();
});
}
});
});
});
</script>
Button Code:
echo "<td> <span id='del_<?php echo $id; ?>' type='submit' class=' delete btn c-theme-btn c-btn-uppercase btn-xs c-btn-square c-font-sm'>Delete</span> </td>";
php code:
<form method="post" action="remove.php">
<?php
echo " <thead>
<tr>
<th>Order ID</th>
<th>Date</th>
<th>Name</th>
<th>Store Name</th>
<th>Zip</th>
<th>City</th>
<th>Address</th>
<th>Contact</th>
<th>Tv Varient</th>
<th>Total</th>
<th>Delivery</th>
<th>Action</th>
</tr>
</thead>
<tbody>";
while($row = mysqli_fetch_array($result))
{
$id = $row['id'];
echo"<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['rdate'] . "</td>";
echo "<td>" . $row['rname'] . "</td>";
echo "<td>" . $row['rstore'] . "</td>";
echo " <td>" . $row['rzip'] . "</td>";
echo "<td>" . $row['rcity'] . "</td>";
echo "<td>" . $row['raddress'] . "</td>";
echo "<td>" . $row['rphone'] . "</td>";
echo "<td>" . $row['rtv_varient'] . "</td>";
echo"<td>" . $row['ramount'] . "</td>";
echo"<td>" . $row['rdelivery'] . "</td>";
echo "<td> <input type='submit' value='delete' id='del_<?php echo $id; ?>' type='submit' class=' delete btn c-theme-btn c-btn-uppercase btn-xs c-btn-square c-font-sm'>Delete</button> </td>";
echo"</tr>";
}
?>
</form>
You should have a form which will have an input as follows:
<form method="post" action="remove.php">
<input type="submit" value="Delete" name="id" />
</form>
i am retrieving some data from database and show them in a html table.but right now i am struggling with the following scenario.
if user clicks disable button it should be hide and enable button should be show.if user clicks on enable button it should be hide and disable button should be show.
Here is my code
<html>
<title></title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
</script>
</head>
<body>
<?php
echo "<table border='1' align='center' width='100%'>
<tr>
<th>ID</th>
<th>Image</th>
<th>Modified Date</th>
<th>URL</th>
<th>Clicks</th>
<th>Status</th>
<th>Action</th>
</tr>";
while($row = mysqli_fetch_array($query))
{
$id = $row['img_id'];
echo "<tr>";
echo "<td align='center'>" . $row['img_id'] . "</td>";
echo "<td align='center' width='500px'>" . '<img width = 200px; height=100px; src=" '. ($row['img_path']) . '"/>'. "</td>";
echo "<td align='center' width='350px'>" . $row['date'] . "</td>";
echo "<td align='center'>" . $row['url'] . "</td>";
echo "<td align='center'>" . $row['clicks'] . "</td>";
echo "<td align='center'>" . $row['status'] . "</td>";
echo "<td align='center'><a href='image_update.php?id=$id'><button>Update</button></a>
<form method='post' >
<input type='hidden' name='tid' value='$id'/>
<input type='submit' name='disable' id='disable' value='Disable'>
<input type='submit' name='enable' id='enable' value='Enable'>
</form>
</td>";
$id = $_POST['tid'];
if($_SERVER['REQUEST_METHOD']=='POST') {
$sql = "UPDATE advertisementnew SET status = 'Disabled' WHERE img_id='$id'";
mysqli_query($con, $sql);
}
echo "</tr>";
}
echo "</table>";
try this js:
$('#enable').css("display", "none");
$('#disable').click(function(){
$('#enable').css("display", "block");
$('#disable').css("display", "none");
});
instead of:
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
can you try this hope this is works
<script type = "text/javascript" >
$('input:submit').click(function () {
var check = $(this).attr('id');
if (check == 'disable') {
$('#enable').show();
$('#disable').hide();
}
if (check == 'enable') {
$('#disable').show();
$('#enable').hide();
}
});
</script>
You can have class
.hide-show{
display : none;
}
HTML :
<input type='submit' name='disable' id='disable' value='Disable' class="enable-disable-btn">
<input type='submit' name='enable' id='enable' value='Enable' class="enable-disable-btn hide-show">
Initially put the hide-show class on the button which should be need to hide.
Add class enable-disable-btn to both button enabled/disbaled
JS:
You can use jQuery#toggleClass
$(".enable-disable-btn").on('click',function(){
$(".enable-disable-btn").toggleClass('hide-show')
})
You need to add unique id dynamically created in while loop in your case id is not unique
for this
changes in php replace these two lines
<input type='submit' onclick='doEnableDesable(this)' name='disable' id='disable".$id."' value='Disable'>
<input type='submit' onclick='doEnableDesable(this)' name='enable' id='enable".$id."' value='Enable'>
And in javascript define function for dynamic Id
function doEnableDesable(params)
{
if (params.value == 'disable') {
$('#'+params.id).show();
$('#'+params.id).hide();
}
if (params.value == 'enable') {
$('#'+params.id).show();
$('#'+params.id).hide();
}
}
I set up a table that grabs information from a Mysql database and displays it quit nicely. However i would like the table "row" to change colors based off the aging of the account? Any simple easy ways of achieving this?
Home.php
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-responsive">
<tr class="header">
<td>Rep</td>
<td>Date</td>
<td>Name</td>
<td>P_O</td>
<td>Due Date</td>
<td>Terms</td>
<td>Aging</td>
<td>Open Balance</td>
</tr>
<?php
while($row = mysql_fetch_array($query)) {
$className ="";
if ($row['Aging'] >= 45)
{
$className="clsRedRow";
}
else if($row['Aging'] >= 25 && $row['Aging'] <= 44)
{
$className="clsYellowRow";
}
echo "<tr class='$className'>";
echo "<td>".$row[Rep]."</td>";
echo "<td>".$row[Date]."</td>";
echo "<td>".$row[Name]."</td>";
echo "<td>".$row[P_O]."</td>";
echo "<td>".$row[Due_Date]."</td>";
echo "<td>".$row[Terms]."</td>";
echo "<td>".$row[Aging]."</td>";
echo "<td>".$row[Open_Balance]."</td>";
}
?>
</table>
</div>
</div>
Try adding a class inline to the <tr> elements. Something like this:
<?php
while ($row = mysql_fetch_array($query))
{
$className = "";
if ($row['Aging'] < 50)
{
$className = "clsRedRow";
}
else
{
$className = "clsGreenRow";
}
echo "<tr class='$className'>";
echo "<td>" . $row[Rep] . "</td>";
echo "<td>" . $row[Date] . "</td>";
echo "<td>" . $row[Name] . "</td>";
echo "<td>" . $row[P_O] . "</td>";
echo "<td>" . $row[Due_Date] . "</td>";
echo "<td>" . $row[Terms] . "</td>";
echo "<td>" . $row[Aging] . "</td>";
echo "<td>" . $row[Open_Balance] . "</td>";
}
?>
Then, you'd need to have the proper styles set up in the HTML document (above the PHP script, not sure where the rest of your styles are set):
<style>
.clsRedRow{ background-color: red; }
.clsGreenRow{ background-color: green; }
</style>
I would probably add a class to the aging cells, and then iterate over them and check the value in a jQuery function to apply your styling based on the range the number falls in.
$("#some-table .aging").each(function() {
var age = $(this).html();
if (age <= 2) {
$(this).parent().css({"background-color" : "blue"});
} else if (age <= 5) {
$(this).parent().css({"background-color" : "yellow"});
} else if (age <= 8) {
$(this).parent().css({"background-color" : "red"});
}
});
Like this: http://codepen.io/jonathanrbowman/pen/epVBox
I have a jQuery function (follows:
$(this).ready(function () {
$("#stake").on('keyup', function () {
var newVal = (parseFloat($("#stake").val(), 10) * parseFloat($('#__odds').val(), 10)) + parseFloat($("#stake").val(), 10) || 0;
$("#showdynamicreturn").val(parseFloat(newVal).toFixed(2));
});
});
) and I have more than one attribute with the same ID, this means that I need to get the function to allow for more than one thing to change it, what is the best way to go about this?
Also I want the new value to be added to the value displayed in the showdynamicreturn area for each one that is typed in, how do I do this?
Example
1) User input 1 - return f 2
2) User input 2 - return of 4
Displayed in showdynamicreturn - 6
HTML code here
<div style="border: 1pt solid black; width: 99%;">
<h2>1:55 Scottsville - Win</h2>
<form action="/sports/football/" method="post">
<table>
<tbody>
<tr>
<td style="width: 50%;">Sport: </td>
<td>Horse Racing</td>
</tr>
<tr>
<td style="width: 50%">Participant: </td>
<td>Legend Dancer</td>
</tr>
<tr>
<td>Market: </td>
<td>Scottsville</td>
</tr>
<tr>
<td>Time: </td>
<td>13:55</td>
</tr>
<tr>
<td>Odds: </td>
<td>8/1<input type="hidden" value="8" id="__odds"></td>
</tr>
<tr>
<td>Stake: </td>
<td>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">£</span><input style="width: 100%" type="text" name="stake" id="stake" aria-describedby="basic-addon1" placeholder="Stake"></div>
</td>
</tr>
<tr>
<td>
<center><label for="eachWay">Each way bet? </label><input type="checkbox" id="eachWay" name="eachWay"></center>
</td>
<td>
<center><input type="submit" name="submitTo__OpenBets" value="Open Bet"></center>
</td>
</tr>
<input type="hidden" name="betslip_id" value="36"><input type="hidden" name="sport" value="football"><input type="hidden" name="odds" value="8/1"><input type="hidden" name="sport" value="Horse Racing"><input type="hidden" name="bettilldate" value="2015-05-13"><input type="hidden" name="bettilltime" value="13:55:00">
<tr>
<td colspan="100%">
<center><input type="submit" name="delete_betslip_item" value="Delete this bet"></center>
</td>
</tr>
</tbody>
</table>
</form>
</div>
Generating code:
public function ReadBets_Bet($id, $currentpage, $loggedIn = true) {
$queryBase = "SELECT * FROM `vr_wp_bets` WHERE `id` = '%s' AND `is_open` = 'false' ORDER BY `sport` ASC;";
if ($loggedIn == true) {
$queryBase2 = sprintf($queryBase, $id);
}
else {
$queryBase2 = sprintf($queryBase, $id);
}
$selectQuery = mysql_query($queryBase2);
$return = "<div style='max-height: 400px; overflow: scroll;'>";
while ($result = mysql_fetch_array($selectQuery)) {
$_odds = explode("/", $result['odds']);
$odds = $_odds[0] / $_odds[1];
$return .= "<div style='border: 1pt solid black; width: 99%;'>";
$return .= "<h2>" . $result['title'] . "</h2>";
$return .= "<form action='/sports/" . CURRENT_PAGE . "/' method='post'>";
$return .= "<table>";
$return .= "<tr><td style='width:50%;'>Sport: </td><td>" . $result['sport'] . "</td></tr>";
$return .= "<tr><td style='width:50%'>Participant: </td><td>" . stripslashes($result['participant']) . "</td></tr>";
$return .= "<tr><td>Market: </td><td>" . stripslashes($result['market']) . "</td></tr>";
$return .= "<tr><td>Time: </td><td>" . date("H:i", strtotime($result['bettilltime'])) . "</td></tr>";
$return .= "<tr><td>Odds: </td><td>" . $result['odds'] . "<input type='hidden' value='" . $odds . "' id='__odds' /></td></tr>";
$return .= "<tr><td>Stake: </td><td><div class='input-group'><span class='input-group-addon' id='basic-addon1'>£</span><input style='width:100%' type='text' name='stake' id='stake' aria-describedby='basic-addon1' placeholder='Stake' /></div></td></tr>";
if ($result['ew_available'] == "true") {
$return .= "<tr><td><center><label for='eachWay'>Each way bet? </label><input type='checkbox' id='eachWay' name='eachWay' /></center></td>" . "<td><center><input type='submit' name='submitTo__OpenBets' value='Open Bet' /></center></td></tr>";
}
else {
$return .= "<tr><td colspan='10'><center><input type='submit' name='submitTo__OpenBets' value='Place Bet' /></center></td></tr>";
}
$return .= "<!-- Hidden fields for the horses information. -->";
$return .= "<input type='hidden' name='betslip_id' value='" . $result['bet_id'] . "' />";
$return .= "<input type='hidden' name='sport' value='" . $currentpage . "' />";
$return .= "<input type='hidden' name='odds' value='" . $result['odds'] . "' />";
$return .= "<input type='hidden' name='sport' value='" . $result['sport'] . "' />";
$return .= "<input type='hidden' name='bettilldate' value='" . $result['bettilldate'] . "' />";
$return .= "<input type='hidden' name='bettilltime' value='" . $result['bettilltime'] . "' />";
$return .= "<!-- Area to \"submit a delete\" and remove an item from the bet slip. -->";
$return .= "<tr><td colspan='100%'><center><input type='submit' name='delete_betslip_item' value='Delete this bet' /></center></td></tr>";
$return .= "</table>";
$return .= "</form>";
$return .= "</div><br>";
}
$return .= "</div>";
$return .= "<tr id='dynamic_return'><td colspan='10'><center><div class='input-group'><span class='input-group-addon' id='basic-addon2'>£</span><input style='width:100%' type='text' id='showdynamicreturn' aria-describedby='basic-addon2' placeholder='0.00' readonly /></div></center></td></tr>";
//$return .= $queryBase2;
return $return;
}
NOTE
mysql_* functions are used (yes I know depreciated) due to client needs and requirements.
EDIT
The jQuery I now have:
var count_div = 0;
$(this).ready(function () {
$("div").each(function () {
++count_div;
console.log("Counter: " + count_div);
});
for (var i = 0; i < count_div; ++i) {
$("#stake-" + i).each(function () {
console.log("Found stake " + i);
});
}
for (var i = 0; i < count_div; ++i) {
$("#__odds-" + i).each(function () {
console.log("Found stake " + i);
});
}
$("#showdynamicreturn").each(function () {
console.log("Found text area");
});
for (var i = 0; i < count_div; ++i) {
$("#stake-" + i).on('keyup', function () {
var newVal = (parseFloat($("#stake-" + i).val(), 10) * parseFloat($("#__odds-" + i).val(), 10)) + parseFloat($("#stake-" + i).val(), 10) || 0;
$("#showdynamicreturn").val(parseFloat(newVal).toFixed(2));
});
}
});
You can't do that, as IDs must be unique within the tree (stated in the spec at 3.2.5.1).
When duplicate IDs are present -- which most browsers will permit -- the return order of them is at best undefined and at worst you will only retrieve a single element.
The simplest solution, which should work with your code, is to append a numeric suffix to the ID to enforce uniqueness. You may be able to use a unique identifier that already exists in your data or, if you have a loop, simply keep a counter and append that to a fixed string. foo-1 will work much better than multiple foos.
With numeric IDs, you'll need to modify your jQ function to be something like:
var items = 100;
$(this).ready(function () {
for (var i = 0; i < items; ++i) {
$("#stake-" + i).on('keyup', function () {
var newVal = (parseFloat($("#stake-" + i).val(), 10) * parseFloat($('#__odds').val(), 10)) + parseFloat($("#stake-" + i).val(), 10) || 0;
$("#showdynamicreturn-" + i).val(parseFloat(newVal).toFixed(2));
});
}
});