Table row Values changes based on selected drop down jquery ajax php - javascript

I am trying to create a page which has a form which contains Total and Converted Total Value. And this total is generating from a do while loop in php. At top there is a currency drop down. When i select any currency from the dropdown, the page redirects in ajax mode to another php page called currency1.php and get the required values from currency1.php and fill the appropriate values in Converted total value. Following is the markup page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Get Currency Values</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#cur').change(function() {
$.get('currency1.php', {
cur: $(this).val()
}, function(data) {
$('#emp_id').val(data);
});
});
});
</script>
</head>
<body>
<table border=1>
<tr>
<td colspan=3>
<select name="cur" id="cur">
<option value="1">US Dollar</option>
<option value="2">Indian Rupee</option>
<option value="3">British Pound</option>
<option value="4">Euro</option>
<option value="5">Singapore Dollar</option>
<option value="6">Australian Dollar</option>
<option value="7">Canadian Dollar</option>
<option value="8">Swiss Franc</option>
<option value="9">Japanese Yen</option>
<option value="10">Malaysian Ringgit</option>
<option value="11">South African Rand</option>
</select>
<input type="text" name="emp_id" id="emp_id" />
</td>
{Do while loop in PHP}
<tr>
<td><b>Total Value</b>
</td>
<td><b>Converted Value</b>
</td>
</tr>
<tr>
<td>
<input type="text" name="box1" id="box1" value="1000">
</td>
<td>
<input type="text" name="con_ver1" id="con_ver1" />
</td>
</tr>
<tr>
<td>
<input type="text" name="box2" id="box2" value="2200">
</td>
<td>
<input type="text" name="con_ver2" id="con_ver2" />
</td>
</tr>
<tr>
<td>
<input type="text" name="box3" id="box3" value="900">
</td>
<td>
<input type="text" name="con_ver3" id="con_ver3" />
</td>
</tr>
<tr>
<td>
<input type="text" name="box4" id="box4" value="3200">
</td>
<td>
<input type="text" name="con_ver4" id="con_ver4" />
</td>
</tr>
<tr>
<td colspan=2>The Records continues..........</td>
</tr>
{end of php do while loop}
</table>
</body>
</html>
My currency1.php which is getting the ajax query is as follows: This page should return back the results in array to the previous page. Iam not getting how to achieve this in array and return back the results in ajax. Currency1.php is as follows:
<?php
include('config.php');
$sql = "select rate from currency1 where currency='INR' LIMIT 1";
$result_gt = mysql_query($sql) or die($sql."<br/><br/>".mysql_error());
$list_gt = mysql_fetch_array($result_gt);
$inrvalue=$list_gt['rate'];
if(isset($_REQUEST['cur'])){
// connection should be on this page
$sql = mysql_query("select currency,rate from currency1 where id =".$_REQUEST['cur']);
$res = mysql_fetch_assoc($sql);
$rate=$res['rate'];
//$gt=($inrvalue*10)/$res['rate'];
//$gt=($inrvalue*10)/$res['rate'];
//$gt=($inrvalue/$rate)*total[$i];
$gt=($inrvalue/$rate);
echo json_encode($gt);die;
}
?>
Is my coding correct? Is there any other procedure to achieve the same. I mean with just javascript? Pls help me? Thanx in advance.

Basic concept
You should rewrite your success function, instead of:
function(data) {
$('#emp_id').val(data);
});
Put some code that parse the json and produce a table content, for example:
function(data) {
var content_table = '';
var array_data = JSON.parse(data);
for(var i=0; i<array_data.length; i++){
var line_content = array_data[i];
//TODO: set up correctly the line content...
var line_html = '<td>'+line_content+'</td>';
//...once done, append to the html
content_table+='<tr>'+line_content+'</tr>';
}
//update table body (do not reload the full page)
$('tbody').html(content_table);
});
Better way, using the library
According to the library documentation, you can load directly the json by :
$(selector_datatable).dataTable( {
"ajax": '../ajax/data/arrays.txt'
} );
I your case, that file is generated by the php script.
The flaw is that every web browser will see the same result, because you load a hard set file.
To get a personalized experience to all users, you can either produce a file for each currency, or go to real ajax.
Good luck!

Related

how to get table rows select option value using checkbox

I have the following html table with select option in one of the columns. I want to display the values of the rows that are checked but don't know how to work with the select option value. Can someone help me modify the code? If not using DOM, can we just use PHP to get all checked values and store in $ variable? Finally I will submit the checked values and insert into table using PHP. Thanks a lot.
<?php
require_once("connMysql.php");
$stu_add = mysqli_query($db_link, "SELECT * FROM stu");
$rowcount = mysqli_num_rows($stu_add);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to get options value in html table</title>
</head>
<body>
<table id="table" border="1">
<tr>
<th style="text-align:center; width:70px">Classname</th>
<th style="text-align:center; width:100px">Student ID</th>
<th style="text-align:center; width:100px">Name</th>
<th style="text-align:center; width:100px">Grade</th>
<th style="text-align:center; width:100px">Select</th>
</tr>
<?php
if($stu_add-> num_rows > 0 ){
while ($row = $stu_add-> fetch_assoc()){
?>
<tr>
<td id="classname" style="text-align:center;"><?php echo $row['classname'];?></td>
<td id="stuid" style="text-align:center;"><?php echo $row['stuid'];?></td>
<td id="stu_name" style="text-align:center;"><?php echo $row['stu_name'];?></td>
<td><select name="grade" id="grade">
<option value="">-Please select-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
<td align="center">
<input type="checkbox" id="checked" name="checked[]" value="<?php echo $row['stuid'];?>">
</td>
</tr>
<?php
}
}
?>
<input type="text" id="classname" size="10">
<input type="text" id="stuid" size="10">
<input type="text" id="stu_name" size="10">
<input type="text" id="grade" size="10">
<button class="" onclick="showData()">Show data</button>
</table>
<script>
function showData()
{
var table = document.getElementById('table');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
// document.getElementById("classname").value = this.cells[0].innerHTML;
// document.getElementById("stuid").value = this.cells[1].innerHTML;
// document.getElementById("stu_name").value = this.cells[2].innerHTML;
// document.getElementById("grade").value = this.cells[3].innerHTML.options[0].text;
var a = this.cells[0].innerHTML;
var b = this.cells[1].innerHTML;
var c = this.cells[2].innerHTML;
var d = this.cells[3].innerHTML.options[0].text;
var data = a + b + c + d;
alert(data);
};
}
}
</script>
As the above user says you can get the id of the checkbox and use onchange then pass the value to the function.
```
$('#checkbox').change(function(){
var query = $(this).val();
showdata(query);
});
```

how to set unique name and id of HTML Table columns which are dynamically created using ajax

I am creating one JSP page in which there is a textfield and button. If user enters some integer value lets say 2 in textfield, then 2 rows will be appended in Html table at last. So the rows of HTML table are being created dynamically.
I am implementing this using ajax call to a page which has <tr> data which is to be added to the main table after last row.
Everything is working fine. Rows are created dynamically using ajax call. But the problem is that all rows added to table have same column name attributes.
Below is my code:
main JSP page:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.table {
font-size: 11px;
}
#dailyTableDiv {
height: 70%;
overflow: scroll;
}
</style>
<script>
function addTask(){
var n=$("#dailytsks").val();
for(i=1;i<=n;i++){
$.ajax({url:"employeeSection/dailyTableRow.jsp",success:function(result){
$('#dailyTable tr:last').after(result);
}});
}
//------------------------------
// i am trying this code to set different names for different select box column.
//but this is not happenting.
for(i=1;i<=n;i++){
$("#chSelect").attr("name","chSelect"+i);
}
//------------------------------
}
function add1Row(){
$.ajax({url:"employeeSection/dailyTableRow.jsp",success:function(result){
$('#dailyTable tr:last').after(result);
}});
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="well">
<input type="text" id="dailytsks" name="dailytsks" /><input
type="button" name="addTsks" value="add" onclick="addTask();" /> <span
style="margin-left: 20px;"></span><input type="button" value="+"
id="add1" name="add1" onclick="add1Row();" /> <span
style="margin-left: 20px;"></span><input type="button" value="-"
id="minus" name="minus" />
</div>
</div>
<div class="container-fluid">
<div id="dailyTableDiv">
<table id="dailyTable" class="table table-bordered">
<thead>
<tr>
<th>Select</th>
<th>Date</th>
<th>Client Name</th>
<th>Task-Type</th>
<th>NBPE-Type</th>
<th>Task-Name</th>
<th>Planned-Hrs</th>
<th>Priority</th>
<th>Cross-Team</th>
<th>Current-Status</th>
<th>Is-Completed</th>
<th>Actual-Hrs</th>
<th>SMC-ID</th>
<th>SMC-URL</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
dailyTableRow.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<tr>
<!-- -------------------------------------------------------------------- -->
<!-- currently I am trying to set unique name for Select column only so i hv given it a ID -->
<td><input type="checkbox" id="chSelect" name="chSelect" /></td>
<!-- -------------------------------------------------------------------- -->
<td width="3"><input type="text" style="max-width: 80px;"
name="tskDate" /></td>
<td><select name="cliName">
<option>select client</option>
<option>RWS</option>
<option>Orgbase</option>
<option>RW-MAAS</option>
<option>WSO2</option>
</select></td>
<td><input type="checkbox" name="chTskType" />NBPE?</td>
<td><select name="tskNBPEType">
<option>select NBPE type</option>
<option>meeting</option>
<option>on leave</option>
<option>mom</option>
</select></td>
<td><input type="text" name="tskName" /></td>
<td><input type="text" style="max-width: 15px;" name="plndHrs" /></td>
<td><select name="tskPriority">
<option>select priority</option>
<option>low</option>
<option>med</option>
<option>high</option>
</select></td>
<td><input type="text" style="max-width: 80px;"
name="crosTeamMate" /></td>
<td><select name="curStatus">
<option>select status</option>
<option>on hold</option>
<option>in progress</option>
<option>completed</option>
</select></td>
<td><input type="radio" name="isCompleted" value="N">No <br>
<input type="radio" name="isCompleted" value="Y">Yes</td>
<td><input type="text" style="max-width: 15px;" name="actHrs" /></td>
<td><input type="text" style="max-width: 80px;" name="smcID" /></td>
<td><input type="text" style="max-width: 160px;" name="smcURL" /></td>
<td><textarea name="comment" rows="3" cols="10"></textarea></td>
</tr>
here all columns have same name which is wrong.
how can I make unique name attribute pairs for the column in rows which are added. Currently, as seen in the code I am only trying to set unique name attribute values to Select column only. But I am not able to do.
I want something like:
if name of column is "chSelect" then for two rows, it should become as :
chSelect1 & chSelect2, respectively.
This might help you
HTML:-
<input type="checkbox" name="chSelect" class="chSelect" />
<input type="checkbox" name="chSelect" class="chSelect" />
<input type="checkbox" name="chSelect" class="chSelect" />
JAVASCRIPT:-
var i = 0;
$('.chSelect').each(function () {
$(this).attr('name', "chSelect"+i);
i++;
});
LINK :-
https://jsfiddle.net/ft0uefaL/
The basic idea is to store the row number in a global variable that you'll increase each time you add a row via Ajax.
When your Ajax calls resolve, you parse the resulting html (result) using JQuery, change the name property of the chSelect element, and append the change to the last tr as you did previously:
// add a global variable to store row number
var row = 0;
function addTask(){
var n = $("#dailytsks").val();
var max = parseInt(n);
for(i=1; i<=max; i++){
$.ajax({
url: "employeeSection/dailyTableRow.jsp",
success: function(result){
row += 1
var newName = "chSelect" + row;
var html = $('<div>').append(result);
$(html).find("#chSelect").attr("name", newName)
$('#dailyTable tr:last')
.after( html.html() )
}
});
}
}
function add1Row(){
$.ajax({
url: "employeeSection/dailyTableRow.jsp",
success: function(result){
row += 1;
var newName = "chSelect" + row;
var html = $('<div>').append(result);
$(html).find("#chSelect").attr("name", newName)
$('#dailyTable tr:last')
.after( html.html() )
}
});
}

Display Value on Textbox on selection of Dropdownlist option

i want to display a value in textbox based on selection of Combobox.. my code is below
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Account Open Page</title>
<script type="text/javascript">
function selectvalue(acct)
{
var savingamt=1000;
var currentamt=500;
var selectedText = acct.options[acct.selectedIndex].innerHTML;
var selectedValue = acct.value;
if (current) {
alert("Account Type is " + selectedText + " and " + selectedValue);
document.getElementById("depositamt").value = currentamt;
} else if (saving) {
alert("Account Type is " + selectedText + " and " + selectedValue);
document.getElementById("depositamt").value = savingamt;
}
}
</script>
</head>
<body>
<form name="frmAccount" action="com.bank.Handler.RegHandler" method="post">
<table>
<tr>
<td>Account Type</td>
<td>
<select name="cmbacttype" id="acct" onchange="selectvalue(this)">
<option value="">---Select Account Type---</option>
<option value="Deposit Amount Should be minimum 1000 Rupee" id="saving">Saving Account</option>
<option value="Deposit Amount Should be minimum 500 Rupee" id="current">Current Account</option>
</select>
</tr>
<tr>
<td>Deposit Amount</td>
<td><input type="text" name="deposit" id="depositamt"></td>
</tr>
<tr>
<td>Enter Amount</td>
<td><input type="text" name="amount" id="amount"></td>
</tr>
<tr>
<td>Total Amount</td>
<td><input type="text" name="totalamount" id="totalamount"></td>
</tr>
<tr>
<td><input type="submit" value="SUBMIT"></td>
</tr>
</table>
</form>
</body>
</html>
from the above code, on Selection of saving account 1000 value should get display on Deposit Amount textbox and on selection of current account it should display 500 value.
in javascript code , its displaying only the value of current , but if i select saving account it did not do anything... how can we display saving account value on selection of saving account option?
You are using the variable current inside your if condition. I do not know where you are getting the value of current. Looks like it is missing. If you add this line before accessing that in your if condition, It will work.
var current = selectedText==="Current Account";
if (current) {
}
else {
}
The expression selectedText==="Current Account" will return true or false based on the value of selectedText variable and you are good to use current in your if condition now.
Here is a working sample.

im making a golf scorecard program in php but want to use javascript for counting the hits

now i have programmed in php to hit a button after every hit you make but thats in php so after hit the button the program takes contact with the server.
i would like to know if it is possible to make the hit calculation via javascrit sothat the program does not upgrade to the server an the hits will be visable in the screen and be upgraded everytime via javascript. sothat after ending the hole i can save the result to the server.
i had made the following for test . but still the computer goes to update via the server.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<?
if ($aantalslagen_plus==""){
$aantalslagen_plus="0";
}
?>
<script type="text/javascript">
var a = <? echo $aantalslagen_plus; ?>
function bereken() {
a += 1;
document.getElementById('aantalslagen').value = a;
};
</script>
</head>
<body>
<form method="post" action="" . $_SERVER['PHP_SELF'] . "">
<br><br><br>
<table width="422" height="179" border="0">
<tr>
<td>totaal aantal slagen: </td>
<td> </td>
</tr>
<?php
$aantalslagen_plus = htmlentities($_POST['aantalslagen_plus']);
?>
<tr>
<td>totaal aantal slagen php:</td>
<td>
<? echo "<input type=\"text\" VALUE=\"$aantalslagen_plus\" name=\"aantalslagen_plus\" id=\"aantalslagen\" size=\"10\">"; ?>
<td><? echo $aantalslagen_plus; ?></td>
</tr>
</table>
<br>
<button onclick="bereken();"> + </button>
</form>
</body>
</html>
Just initialize aantalslagen to 0 in JavaScript and don't mess with any <form> or POST request or anything like that because you don't need to since it doesn't seem like you're saving the value in some cookie so the value will stay if the user refreshes the page. If you do want the value to stay once the user refreshes, I suggest you look into localStorage.
//The input element:
var input = document.getElementById("aantalslagen-input");
//The td element:
var td = document.getElementById("aantalslagen-td");
//The button element:
var button = document.getElementById("aantalslagen-button");
//The variable:
var aantalslagen = 0;
//When the button is clicked...
button.addEventListener("click", function() {
//Increment aantalslagen:
aantalslagen += 1;
//Update it in the input and td:
input.value = aantalslagen;
td.textContent = aantalslagen;
});
<br><br><br>
<table width="422" height="179" border="0">
<tr>
<td>totaal aantal slagen: </td>
<td> </td>
</tr>
<tr>
<td>totaal aantal slagen php:</td>
<td><input type="text" VALUE="0" name="aantalslagen_plus" id="aantalslagen-input" size="10">
<td id="aantalslagen-td">0</td>
</tr>
</table>
<br>
<button id="aantalslagen-button"> + </button>
Your <button> is inside of a <form> element and the default behaviour is for the form to submit to the server.
Remove the <form> element since it no longer seems to serve any purpose.

Tried Every Thing But Still Getting OBJECT NOT FOUND error in Xamp when i hit submit button?

I was following some tutorials about ecommerce site in PHP and MySQL.
But when i hit submit button I get OBJECT NOT FOUND ERROR.
Below is the code,please guide me. Directories etc. are fine. I've also tried enclosing the button in seprate form tag but nothing worked.
<?php
include("includes/db.php");
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add Products</title>
</head>
<body bgcolor="#3B6AD8">
<form method="post" action="insert_product" enctype="multipart/form-data">
<table width="700" height="650" align="center" border="2" bgcolor="#F3F3F3">
<tr>
<td colspan="2">
<h2 align="center">Insert Product Here</h2>
</td>
</tr>
<tr>
<td><b>Product Title</b></td>
<td><input type="text" name="product_title" /></td>
</tr>
<tr>
<td><b>Product Category</b></td>
<td>
<select name="product_cat">
<option>Select a Category</option>
<?php
$get_categories = "SELECT * FROM categories";
$run_categories = mysqli_query($con,$get_categories);
while($row_categories =mysqli_fetch_array($run_categories) ) {
$cat_id = $row_categories['cat_ID'];
$cat_title = $row_categories ['cat_title'];
echo "<option value='$cat_id'>$cat_title</option>";
}
?>
</td>
</select>
<tr>
<td><b>Product Brand</b></td>
<td><select name="product_brand">
<option>Select a Category</option>
<?php
$get_brands = "SELECT * FROM brands";
$run_brands = mysqli_query($con,$get_brands);
while($row_brands =mysqli_fetch_array($run_brands) ) {
$brand_id = $row_brands['brand_ID'];
$brand_title = $row_brands['brand_title'];
echo "<option value='$brand_id'>$brand_title</option>";
}
?>
</td>
</select>
</td>
</tr>
<tr>
<td><b>Product Image 1</b></td>
<td>
<input type="file" name="product_img1" />
</td>
</tr>
<tr>
<td><b>Product Image 2</b></td>
<td>
<input type="file" name="product_img2" />
</td>
</tr>
<tr>
<td><b>Product Image 3</b></td>
<td>
<input type="file" name="product_img3" />
</td>
</tr>
<tr>
<td><b>Product Price</b></td>
<td>
<input type="text" name="product_price" />
</td>
</tr>
<tr>
<td><b>Product Description</b></td>
<td>
<textarea name="product_desc" cols="30" rows="5"></textarea>
</td>
</tr>
<tr>
<td>Product Keywords</td>
<td>
<input type="text" name="product_keywords" />
</td>
</tr>
<tr align="center">
<td colspan="2">
<form method="post">
<input type="submit" name="add_product" value="Add Product"/>
</form>
</td>
</tr>
</table>
</form>
</body>
</html>
<?php
if(isset($_POST['add_product'])){
//text data variables
$product_title = $_POST['product_title'];
$product_cat = $_POST['product_cat'];
$product_brand = $_POST['product_brand'];
$product_price = $_POST['product_price'];
$product_desc = $_POST['product_desc'];
$product_keywords = $_POST['product_keywords'];
$product_status = 'on';
//Produt Images
$product_img1 = $_FILES['product_img1']['name'];
$product_img2 = $_FILES['product_img2']['name'];
$product_img3 = $_FILES['product_img3']['name'];
//Image Temp Names
$temp_name1 = $_FILES['product_img1']['tmp_name'];
$temp_name2 = $_FILES['product_img2']['tmp_name'];
$temp_name3 = $_FILES['product_img3']['tmp_name'];
if($product_title=="" OR $product_cat=="" OR $product_brand=="" OR $product_price=="" OR $product_desc=="" OR $product_keywords=="" OR $product_img1==""){
echo "<script>alert('Please Fill All The Fields')</script>";
exit();
}
else {
move_uploaded_file($temp_name1,"product_images/product_img1");
move_uploaded_file($temp_name2,"product_images/product_img2");
move_uploaded_file($temp_name3,"product_images/product_img3");
$insert_product_query = "INSERT INTO products(category_ID,brand_ID,date,product_title,product_img1,
product_img2,product_img3,product_price,product_desc,product_status)
values ('$product_cat','$brand_id',
NOW,'$product_title','$product_img1','$product_img2','$product_img3','$product_price','$product_desc',
'$product_status')";
$run_products = mysqli_query($con,$insert_product_query);
if ($run_products){
/*echo "<script>alert('Product inserted successfully')</script>";*/
}
}
}
?>
try to put an extension to your form action="insert_product" ... like .php or .asp .. Also, reform your title to something more like "Object not found on form submit."
Try this:
<form method="post" enctype="multipart/form-data">
Ther are two problems:-
The problem is you write form contains only submit button.Try to remove <form method="post">before button
You write all your code in same page but in form your action is insert_product which have no extension like .php.It's totally wrong
so try to do any one of these two.
a) either define it action= insert_product.php and make a file with that name and put your last form processing code in that file.
b) Or remove form action attribute and write like <form method="post" enctype="multipart/form-data">.
Try 1 point and 2 nd b) point at-once. And check once.

Categories