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.
Related
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() )
}
});
}
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.
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!
How would I go about extracting the info from the input boxes and display it in a separate popup window at the click of a button?
Example below:
HTML coding:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table style="width: 50%" cellspacing="0" cellpadding="0">
<tr>
<td>Firstname</td>
<td><input type="text" id="firstname"></td>
</tr>
<tr>
<td>Lastname</td>
<td><input type="text" id="lastname"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" id="address"></td>
</tr>
<tr>
<td>Telephone</td>
<td><input type="text" id="telephone"></td>
</tr>
</table>
<input type="button" value="show details">
</body>
</html>
I guess, the simplest way to send data from one web page to another is using the GET method of HTML's forms.
Let's say, your input boxes are implemented in file form.html:
<html>
<body>
<form action="./display.html" method="GET">
<table>
<tr><td>First Name:</td><td><input type="text" name="firstname"></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="lastname"></td></tr>
<tr><td>Phone number:</td><td><input type="tel" name="phonenumber"></td></tr>
</table>
<input type="submit" value="submit">
</form>
</body>
</html>
If you type in your first and last name as well as your phonenumber and press the submit button, you will be redirected to the file display.html. Furthermore, your browser appends the data of the form to the url in the following way:
display.html?firstname=Albert&lastname=Einstein&phonenumber=555-12345
(if you are Albert Einstein ;) )
More precisely, it takes the name information of each form element adds an = and then the information given by the user. If more than one form element is inside the <form></form> tags, each of that key-value pair is separated by a &.
In order to retrieve the data in the file display.html, you have to use a bit of javascript:
<html>
<body>
<table>
<tr>
<td>First name: </td><td><span id="firstname"></span></td></tr>
<td>Last name: </td><td><span id="lastname"></span></td></tr>
<td>Phone number: </td><td><span id="phonenumber"></span></td>
</tr>
</table>
<script>
var queryvars={};
function getQueryVariables() {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
queryvars[pair[0]]=pair[1];
}
}
getQueryVariables();
document.getElementById("firstname").innerHTML=queryvars['firstname'];
document.getElementById("lastname").innerHTML=queryvars['lastname'];
document.getElementById("phonenumber").innerHTML=queryvars['phonenumber'];
</script>
</body>
</html>
It takes everything after the ? of the current url, namely, firstname=Albert&lastname=Einstein&phonenumber=555-12345, splits it at every &, such that you end up with a list of key-value pairs. After that, it splits each of these key-value pairs at the = and stores the information in the queryvars variable. Finally, the information is inserted into the corresponding <span></span> of the table displayed to the user.
I hope, this answers your question.
I was thinking something along the lines of this concept:
function show_mailing_address() {
var width = 200
var height = 150
var left = parseInt((screen.availWidth/2) - (width/2))
var top = parseInt((screen.availHeight/2) - (height/2))
var windowFeatures = "scrollbars=no, toolbar=no,menubar=no,location=no, width=" + width + ",height=" + height + ",status=no,resizable=yes,left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top;
win = window.open('', '_blank', windowFeatures)
var html = '<p style="text-align: center;">' +
document.getElementById('firstname').value + ' ' +
document.getElementById('lastname').value + '<br>' +
document.getElementById('address').value + '<br>' +
document.getElementById('telephone').value + '</p>'
if (win) {
win.document.write(html)
win.document.title = 'Mailing Address'
win.document.close()
win.focus()
}
return false;
}
I have created a simple site that reads a database table and displays it in a html table in the browser.
I have a button that allows for the table to be altered, saved & then automatically forwarded to the homepage with the updated table.
I also have a select button with which the user can select that particular row and it updates a column in the table.
My problem is that I need a way to show which row has been selected.
I prefer to have a column in the HTML table that shows an image as to which one is selected.
Here is my homepage where the database table is being displayed.
In the left column of the html is where I would like to add an image if that row is selected.
I have tried several things like using javascript and just can't wrap my head around it?
Can I get some help?
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#page import="java.io.*, java.util.*, java.sql.*"%>
<%#page import="oracle.jdbc.driver.OracleConnection" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function editRecord(id) {
var f=document.form;
f.method="post";
f.action='edit.jsp?id='+id;
f.submit();
}
function selectRecord(id, btn, i) {
var f=document.form;
f.method="post";
f.action='select.jsp?id='+id;
f.submit();
if(!btn.style) {
alert("not supported");
return;
} else{
btn.style.background = "red";
return;
}
}
</script>
</head>
<body>
<br><br>
<form method="post" name="form">
<table id="data" border="1">
<tr>
<th>Selected</th>
<th>Name</th>
<th>Address</th>
<th>Contact No</th>
<th>Email</th>
<th>Select</th>
</tr>
<%
int sumcount=0;
ResultSet rs = null;
Connection con = null;
Statement st = null;
try {
DriverManager.registerDriver (new oracle.jdbc.OracleDriver());
con = DriverManager.getConnection("jdbc:oracle:thin:#localhost:1521:XE", "username", "password");
st = con.createStatement();
rs = st.executeQuery("SELECT * FROM employee");
%>
<%
while(rs.next()) {
%>
<tr>
<td></td>
<td><%=rs.getString(2)%></td>
<td><%=rs.getString(3)%></td>
<td><%=rs.getString(4)%></td>
<td><%=rs.getString(5)%></td>
<td><input type="button" name="edit" value="Edit" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="editRecord(<%=rs.getString(1)%>);" /></td>
<td><input type="button" name="select" value="Select" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="selectRecord(<%=rs.getString(1)%>, this);" /></td>
</tr>
<%
}
%>
<%
}
catch(Exception e){
e.printStackTrace();
}
%>
</table>
</form>
</body>
</html>
<script language="javascript">
function editRecord(id) {
var f=document.form;
f.method="post";
f.action='edit.jsp?id='+id;
f.submit();
}
function selectRecord(id, btn, i) {
//Here goes the code to display image
var images = document.getElementsByName("selectImg");
for(var i=0;i<images.length;i++){
if(images[i].id!="img_"+id)
images[i].style.display="None";
else
images[i].style.display="Block";
}
//End
var f=document.form;
f.method="post";
f.action='select.jsp?id='+id;
f.submit();
if(!btn.style) {
alert("not supported");
return;
} else{
btn.style.background = "red";
return;
}
}
</script>
You need to put a hidden div with image in first column.
<%
while(rs.next()) {
%>
<tr>
<td><div name="selectImg" id="img_<%=rs.getString(1)%>">
<img src="path_to_image"></div></td>
<td><%=rs.getString(2)%></td>
<td><%=rs.getString(3)%></td>
<td><%=rs.getString(4)%></td>
<td><%=rs.getString(5)%></td>
<td><input type="button" name="edit" value="Edit" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="editRecord(<%=rs.getString(1)%>);" /></td>
<td><input type="button" name="select" value="Select" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="selectRecord(<%=rs.getString(1)%>, this);" /></td>