|
JavaScript - Change Content Of Dynamically Added Row Column
Hi ,
I am new to javascript and have coded an invoice page through help from some available content on web. here is my requirement My form contains inputs "item ,rate quantity,price" in a tabular form where one can dynamically add or delete rows.And the requirement is that when Quantity is entered the Price should change to Price=Quantity*Rate on tab out So I have used a Javascript onchange() and this works fine for the first displayed row. but for dynamically added rows this does not happen, I am not able change the price value for dynamically added rows. Code is as below direct_invoice.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script type="text/javascript" src="js/direct_invoice_table.js">
</script>
<html>
<head>
<title>Direct Invoice</title>
</head>
<body leftmargin="0" topmargin="0">
<p align = "center" font='30'><input type="text" name="company_name" size="20" maxsize="20" />
<b> Invoice</b></p>
<table id="Client_Details">
<tr>
<th>Client Name:</th>
<td><input type="text" name="client_name" size="20" maxsize="20" /></td>
</tr>
<tr>
<th>Client Address:</th>
<td><input type="text" name="address_line1" size="20" maxsize="40" /></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="address_line2" size="20" maxsize="40" /></td>
</tr>
<tr>
<th>Pin Code:</th>
<td><input type="text" name="client_pin" size="7" maxsize="7" /></td>
</tr>
<tr>
<th>City/State/Country:</th>
<td><input type="text" id="client_city" size="10" maxsize="30" /></td><td>/</td>
<td><input type="text" id="client_state" size="10" maxsize="20" /></td><td>/</td>
<td><input type="text" id="client_country" size="10" maxsize="20" /></td>
</tr>
<tr>
<th>Email Address:</th>
<td><input type="text" name="client_city" size="10" maxsize="30" /></td>
</tr>
<tr>
<th>TIN/PAN:</th>
<td><input type="text" name="tin_or_pan" size="10" maxsize="20 " /></td>
</tr>
</table>
<table align="center" width = "75%">
<tr>
<td align = "center">
<!--- very imporant to give the table an id --->
<!--- otherwise it won't know where to edit --->
<table border="1" id="mySampleTable">
<tr>
<th>Item No</th>
<th>Item Name</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
<th> <font color="RED">Delete</font></th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="itemname[]" size="40" "maxsize="100"/></td>
<td><input type="text" name="description[]" size="20" " maxsize="100" /></td>
<td><input type="text" id = "unitcost[]" name="unitcost[]" size="10" maxsize="100" /></td>
<td><input type="text" id = "quantity[]" name="quantity[]" onchange="dynamic_onc();" size="4" maxsize="100" /></td>
<td><input type="text" id = "price[]" name="price[]" size="10" maxsize="100" /></td>
</tr>
</table>
<table id="totaltbl" align="right">
<tr>
<td></td>
</tr>
<tr>
<th>Vat %</th>
<td><input type="text" name="total" size="3" maxsize="3" /></td>
</tr>
<tr>
<th>Total</th>
<td><input type="text" id = "total" name="total" size="20" maxsize="100" /></td>
</tr>
</table>
</td>
</tr>
</table>
<form action="save_entry.php" name="eval_edit" method="post" format="html">
<p>
<input type="button" value="Add Row" onclick="addRow();" />
<input type="button" value="Calculate Total Amount" onclick="Totalcal();" />
<input type="button" value="Print" />
</p>
</form>
<p align = "left" font='100'> <b>Company Name: </b> <input type="text" name="company_address_line1" size="20" maxsize="20" />
</p>
<p align = "left" font='100'> <b>Company address line: </b> <input type="text" name="company_address_line2" size="20" maxsize="20" /></p>
<p align = "left" font='100'> <b>Company Location: </b><input type="text" name="company_address_location" size="20" maxsize="20" /></p>
</body>
</html>
*************** The below is the javascript function that i wrote Code:
function addRow()
{
// grab the element, i.e. the table your editing, in this we're calling it
// 'mySampleTable' and it is reffered to in the table further down on the page
// with a unique of id of you guessed it, 'mySampleTable'
var tbl = document.getElementById('mySampleTable');
// grab how many rows are in the table
var lastRow = tbl.rows.length;
// if there's no header row in the table (there should be, code at least one
//manually!), then iteration = lastRow + 1
var iteration = lastRow;
// creates a new row
var row = tbl.insertRow(lastRow);
// left cell
// insert a cell
var cellLeft = row.insertCell(0);
// here we're just using numbering the cell, like anything else you don't
// have to use this, but i've kinda noticed users tend to like them
var textNode = document.createTextNode(iteration);
// takes what we did (create the plain text number) and appends it the cell
// we created in the row we created. NEAT!
cellLeft.appendChild(textNode);
// right cell
// another cell!
var cellRight1 = row.insertCell(1);
// creating an element this time, specifically an input
var el = document.createElement('input');
// a data type of text
el.type = 'text';
// the name of the element itemname, and because this is dynamic we also
// append the row number to it, so for example if this is the eigth row
// being created the text box will have the name of itemname8. super fantastic.
// the exact same thing with a unique id
el.id = 'itemname[]'+ iteration;
// set it to size of 40. setting sizes is good.
el.size = 40;
// same thing as earlier, append our element to our freshly and clean cell
cellRight1.appendChild(el);
var cellRight2 = row.insertCell(2);
var e2 = document.createElement('input');
e2.type = 'text';
e2.id = 'description[]' + iteration;
e2.size = 20;
e2.maxsize = 100;
cellRight2.appendChild(e2);
var cellRight3 = row.insertCell(3);
var e3 = document.createElement('input');
e3.type = 'text';
e3.id = 'unitcost[]' + iteration;
e3.size = 10;
e3.maxsize = 100;
cellRight3.appendChild(e3);
var cellRight4 = row.insertCell(4);
var e4 = document.createElement('input');
e4.type = 'text';
e4.id = 'quantity[]'+ iteration;
e4.size = 4;
e4.maxsize = 100;
cellRight4.appendChild(e4);
var cellRight5 = row.insertCell(5);
var e5 = document.createElement('input');
e5.type = 'text';
e5.id = 'price[]'+ iteration;
e5.size = 10;
e5.maxsize = 100;
cellRight5.appendChild(e5);
// var cellRight7 = row.insertCell(7);
// var e7 = document.createElement('input');
// e7.type = 'CHECKBOX';
// e7.id = 'cancel[]';
// cellRight7.appendChild(e7);
var cellRight6 = row.insertCell(6);
cellRight6.innerHTML = " <input type='button' value='Delete' size='6' onclick='removeRow(this);'/>";
e4.onclick = dynamic_onc();
}
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var oRow = src.parentElement.parentElement;
//once the row reference is obtained, delete it passing in its rowIndex
document.all("mySampleTable").deleteRow(oRow.rowIndex);
}
function countRow()
{
var Rowcount = document.getElementById('mySampleTable').rows.length;
document.eval_edit.count.value = Rowcount-1;
}
function CalculatePrice()
{
var Rowcount = document.getElementById('mySampleTable').rows.length;
document.eval_edit.count.value = Rowcount-1;
}
function onc() {
var a= document.getElementById('unitcost[]');
var b= document.getElementById('quantity[]');
var c = Math.ceil(a.value*b.value);
alert(b);
document.getElementById('price[]').value =c;
}
function dynamic_onc()
{
alert('Jay' );
e5.value =7;
}
function Totalcal() {
var a= document.getElementById('unitcost[]');
var b= document.getElementById('quantity[]');
var c = Math.ceil(a.value*b.value);
alert(b.value);
document.getElementById('price[]').value =c;
}
Similar TutorialsHello, I am trying to get something to work and I am not having any luck. I want to dynamically add a set of fields to a table when when the user onBlur the selection drop-down. I want the cursor to be in the text field of the newly added set. I have been playing around with onfocus function on the hyperlink to see if when focus is gained, it would throw the user into the text field. I am getting the impress that the field has not been created yet, so the getElementbById function cannot find the object just recently created. Code: <!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=iso-8859-1" />
<title></title>
<script language="JavaScript">
function addEvent() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = '<div>'+ num +'</div><div class=name><input class=name id=item-' + num + ' type=text name=item-'+ num + '></div><div><select name=selRow-' + num + ' onBlur="addEvent();"><option value="0">Check</option><option value="1">Cash</option><option value="2">Money Order</option><option value="3">EFT</option></select></div>';
ni.appendChild(newdiv);
}
function setTxtFocus()
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -2)+ 2;
document.getElementById('item-' + num).focus;
}
</script><style type="text/css">
@import url(style.css);
</style>
</head>
<body onload="addEvent();">
<div id=image></div>
<form action=process.php method=post>
<input type="hidden" value="0" id="theValue" />
<div id="myDiv"></div>
<p><a href="javascript:;" onclick="setTxtFocus();">Add Other Suggestion</a></p>
<p><input type=submit id="submitbutton" value=Submit disabled> <INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return true;"></p>
</form>
</body>
</html>
Thanks jlimited Hi all, I have table in Javascript and it has addrow, deleterow, submit, and functions. when i click it automatically adds new row and it has select option to choose some of them for ex. in added two rows and one of drop down combox i chose Motherboard Asus and from other i chose Motherboard Gigabyte. So i need once i select the name from combobox, should not allow user to select same name in coming rows Here is my code. Thanks beforehands PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head><title>dinamik sheet</title> <script> var i=iteration; function addrow(){ var tbl = document.getElementById('sheet'); var iteration = tbl.rows.length; document.getElementById('count_rows').value = iteration; var row=tbl.insertRow(iteration); var cellLeft = row.insertCell(0); var textNode = document.createTextNode(iteration); cellLeft.appendChild(textNode); var cellRight = row.insertCell(1); var el = document.createElement('input'); el.type = 'text'; el.name = 'txtRow'+iteration; el.id = 'txtRow'+iteration; el.size = 15; el.value = '0'; el.onblur = sum; cellRight.appendChild(el); var cellRight = row.insertCell(2); var elaz = document.createElement('input'); elaz.type = 'text'; elaz.name = 'txtRowaz'+iteration; elaz.id = 'txtRowaz'+iteration; elaz.size = 20; elaz.value = '0'; elaz.onblur = sum; cellRight.appendChild(elaz); var cellRight1 = row.insertCell(3); var ela = document.createElement('input'); ela.type = 'text'; ela.name = 'txtRowe'+iteration; ela.id = 'txtRowe'+iteration; ela.size = 20; ela.value = '0'; ela.onblur = sum; cellRight1.appendChild(ela); var cellRightsel = row.insertCell(4); var sel = document.createElement('select'); sel.name = 'selRow' + iteration; sel.id = 'selRow' + iteration; sel.onchange = sum; sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS'); sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte'); sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI'); sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS'); sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI'); sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE'); cellRightsel.appendChild(sel); sum(); } function removeRowFromTable() { var tbl = document.getElementById('sheet'); var lastRow = tbl.rows.length; if (lastRow > 2) tbl.deleteRow(lastRow - 1); } function sum(){ var s1 = 0; var s2 = 0; var tbl=document.getElementById('sheet'); var iteration=tbl.rows.length-1; for(var i=1; i<=iteration; i++){//loop through table rows var el1 = document.getElementById('txtRow'+i);//Row's Income field var el2 = document.getElementById('selRow'+i);//Row's percentage menu var ela = document.getElementById('txtRowe'+i);//Row's Tax cell var elaz=document.getElementById('txtRowaz'+i); if(!el1 || !el2 || !ela||!elaz) continue; var txt = el1.value; if(txt != ( '' + Number(txt) )) continue; //reject non-numeric entries var tax = Number(txt) * Number(130); if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){ var tax = Number(txt) * Number(150); } if(el2[el2.selectedIndex].value=="MotherBoard MSI"){ var tax = Number(txt) * Number(100); } if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){ var tax = Number(txt) * Number(85); } if(el2[el2.selectedIndex].value=="GraphigCard ATI"){ var tax = Number(txt) * Number(95); } if (el2[el2.selectedIndex].value=="GraphigCard ATI") { var tax = Number(txt) * Number(88); } ela.value = tax.toFixed(2); elaz.value=tax.toFixed(2)/Number(txt); if(isNaN(elaz.value)){ elaz.value=0; } s1 += Number(txt); s2 += tax; } var t1 = document.getElementById('total'); var t2 = document.getElementById('taxtotal'); if(t1){ t1.value = s1.toFixed(2); } if(t2){ t2.value = s2.toFixed(2); } } onload = function(){ addrow(); } </script> </head> <body> <form name="eval_edit" method="POST" action="part1.php?id=iteration-1"> <table align="center" width="75%"> <tr> <td align="center">Balance sheet</td></tr> <tr> <td align="center"> <table id="sheet" border="1"> <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr> </table> </td> </tr> <tr> <td align="center"> <input type="hidden" name="count_rows" id="count_rows" /> <input type="button" value="Add" onclick="addrow()" /> <input type="button" value="Remove" onclick="removeRowFromTable()" /> <input type="button" value="SUM" onClick="sum()"/> <input type="submit" value="Submit" /><br /> </td> </tr> <tr> <td align="left"> <input id="total" name="total" type="text"/>total amount of products<br /> <input id="taxtotal" name="taxtotal" type="text"/>total price of products </td> </tr> </table> </form> </body> </html> I am very very new to programming and trying to create a web interface for a model. The user needs to be able to add as many compounds as they want and add a variable number of subgroups for each compound. Also, each input needs a distinct name. I have tried adapting someone else code to add/remove form inputs but am not having any luck creating subgroups. below is my code Code: <html>
<head>
<title>form</title>
<content="text/html"; />
<script type="text/javascript">
<!--
window.onload = function () {
if (self.init)
init();
}
var counter = 0;
var counter1 = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
document.getElementById('moreFields1').onclick = moreFields1;
moreFields();
moreFields1();
}
function moreFields() {
counter++;
var newFields = document.getElementById('readcomp').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writecomp');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
function moreFields1() {
counter1++;
var newFields = document.getElementById('readsubgr').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter1;
}
var insertHere = document.getElementById('writesubgr');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
// -->
</script>
</head>
<body>
<div id="readcomp" style="display: none">
Comp name<input type=text name="comp" value="" size="2"/>
Concentration<input type=text name="comp_qty" value="" size="2"/>
<input type="button" value="Remove comp"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br/>
<span id="writesubgr"></span>
<input type="button" id="moreFields1" value="add subgroup" /><br/><br/>
</div>
<div id="readsubgr" style="display: none">
Subgroup Name<input type=text name="subgroup" value="" size="2"/>
Quantity <input type=text name="subgroup_qty" value="" size="2"/>
<input type="button" value="Remove subgroup"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>
<form action="cgi_bin\show_input.pl" method="post">
<span id="writecomp"></span>
<input type="button" id="moreFields" value="add comp" /><br/><br/>
<input value="Run Program" type="submit"> <input value="Reset all fields" type="reset">
</form>
</body></html>
any help would be appreciated. thanks Below, I added: bmiresult to my database but I get the error: There has been an error: could not prepare statement (1 table bmical has no column named bmiresult) Code: html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 INTEGER, weight1 INTEGER, added_on DATETIME, bmiresult INTEGER)", []);
});
}
html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var weight1 = document.getElementById("weight1").value;
var height2 = todoText / 100
var BMI = weight1 / (height2 * height2)
var BMI = BMI;
var bmiresult = BMI.toFixed(3);
var addedOn = new Date();
tx.executeSql("INSERT INTO bmical(height1, weight1, added_on, bmiresult) VALUES (?,?,?,?)",
[todoText, weight1, addedOn, bmiresult],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
hiya, I just have a specific question regarding to use a canvas-element with javascript I have one empty canvas that I want to add 9x7 smaller image elements to, the function "regRead" gets an image-element-code from a global register and that element code is then changed to a base64-encoded string for use as src for the currect image. the problem is that when i run the script, all the 63 images added to the canvas gets the same content even if imgCode show different values in debug, i appreciate some solution feedback. Code: function UpdateCanvas (CanvId) {
var canvIDNames = ["front", "back"]; // DOM IDs
var currentCanvas = document.getElementById(canvIDNames[CanvId]).getContext("2d");
var newImg = "";
var topLeft = CanvId * 63;
var bottomRight = topLeft + 63;
var xa = 0;
var posX = 0;
var posY = 0;
var imgCode = "";
for (xa = topLeft; xa < bottomRight; xa++) {
newImg = new Image();
imgCode = regRead(xa, 1);
newImg.src = getBase64src(imgCode);
newImg.onload = function () {
currentCanvas.drawImage(newImg, posX, posY);
if (posX == 400) {
posX = 0;
posY += 90;
}
else {
posX += 50;
}
}
}
}
Hello, I am just going through my javascript book and looking/learning at examples. I've copied this code and i'm thinking i could really use this in my site, it's something i've been looking for on the internet for a while. I have a few questions regarding certain things and I would like to slightly change the code so it performs an additional task. I have uploaded a live example of the page as it is a lot easier for you guys to help and also easier for myself to explain properly. The file is located he JS test page. As you can see, you click the different tabs and the relative information comes up. 1)How can I change the code so that if one description is currently on-screen, when another tab is clicked, i want to hide the currently displayed information, and show the relative information to that particular tab. 2)As you can see, clicking the tabs just brings up text saying 'Description for Tab' + #. This is added using the DOM, but i want to add a lot of description and obviously do not want to put an awful lot of text into the function. What is the best way to add this content dynamically? Should I create an XML file and access this file using javascript to display the different information? I understand question 2 could be done using ajax and php but I know nothing about either so i was wondering if there was another way to achieve this? Thank you for your time, Regards, LC. Hi, I try to change script source dynamically. When I use the following code, it works fine, and the script is executed Code: <script type="text/javascript">
document.write('<script src="http://gamestoenjoy.com/site/test.php"');
</script>
However when I use the following code, it doesn't work, the script isn't executed Code: <script type="text/javascript">
var url = "http://gamestoenjoy.com/site/test.php";
document.write('<script src=url>');
</script>
The only difference between the codes is that in the first code I use constant sting, and in the second code I use variable, in order to make the source dynamic. Please help me to solve this problem. I'm developing a site for my wife's acupuncture practice (http://www.acupunctuurfengyun.be. Since I have two monitors (one wide screen, one square) attached to my computer I can verify how it will look in different resolutions. While doing so I came across a nasty thing: in some resolutions the content div is very small and not using all of the full browser window (left after the header section). Is it possible to make a change to the CSS min-height and max-height while the page is being loaded? I've looked into lots of samples but all depend on a click or mouse over event and didn't want to work with onload in the body tag. I've also thought about putting the stuff in the PHP part of my code but I am lost at this moment on how to do this. Could someone help me out here? Hello, I have been looking for this all day - Change currencies throughout the page when choosing between countries or currencies from dropdown menu. What I basically need is a dropdown menu which shows countries or currencies. When you select anyone of it like USD all the prices throughout the page are changed to USD. Now if you change it AUD/CAD/PKR etc they will be changed accordingly. A very good example of this is: http://creativeon.com. When you change currency from right top dropdown menu - it changes the currencies of all the packages in the main content. I am a HTML developer and do not know much about javascripting. Please help me. P.S. I have searched codingforums.com too and found only two links which are not of my use because they are currency converter: http://www.codingforums.com/showthread.php?t=196577 http://www.codingforums.com/showthread.php?t=196373 Best Regards and Thanks in Advance. Hello All, I have a code which works fine for what is does but I want to add in dynamically a new list to the Array...... from an input field. The relevent part of the code reads as this for example........ var step_x_list=new Array("ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3") but I need a way to dynamically replace the existing.... "ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3" seen above with a new list from an input field which holds the following say....... ca2sb2en2pg1itm1","ca2sb2en2pg1itm2","ca2sb2en2pg1itm3 I have tried various ideas but none seem to be able to inject the new values in the space between the brackets. Any thoughts. Martin. For those just wondering what the code is and want to try it, it is a one piece code which can fire many different functions without requiring lots of individual bits of code to do same. The action usually happens in micro-seconds but I slowed it to a one second count between changes so you can see what is actually happening. Below is a revised code if you want to see it working and also to give an idea about the Array part in which I want to add a different number set. Copy the code and save in notepad as test.html It can be opened as a web page. Remember to change the code tags to the correct script tags Code: var i_x_list=0
function fireFunctionList_x_list()
{
if (document.getElementById("locate_load_x_list").value == "end" || document.getElementById("locate_load_x_list").value == "undefined"){i_x_list=0;document.getElementById("locate_load_x_list").value=""}else{fireFunctionList_x_list_do()}
}
function fireFunctionList_x_list_do()
{
document.getElementById("addto").value="place_";
var step_x_list=new Array("ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3","ca1sb2en1pg1itm4","ca1sb2en1pg1itm5","ca1sb2en1pg1itm6","ca1sb2en1pg1itm7",
"ca1sb2en1pg1itm8","ca1sb2en1pg1itm9","ca1sb2en1pg1itm10","ca1sb2en1pg1itm11","ca1sb2en1pg1itm12","ca1sb2en1pg1itm13","ca1sb2en1pg1itm14","end")
document.getElementById('locate_load_x_list').value=step_x_list[i_x_list]
i_x_list=i_x_list+1
document.getElementById("addto").value+=document.getElementById("locate_load_x_list").value;
document.getElementById("final_locate_load_x_list").value=document.getElementById("addto").value;
document.getElementById("final_locate_load_x_list").value+=document.getElementById("addto2").value;
var x_list = document.getElementById("final_locate_load_x_list").value;
setTimeout("fireFunctionList_x_list()",1000)
var f_x_list = new Function(x_list); f_x_list();
}
<BR><BR> <button onclick="fireFunctionList_x_list()">run the function list rotation</button> <BR><BR> <input id="addto" type="text" size=25 value="place_"><BR> <input id="addto2" type="text" size=4 value="()"><BR> <input id="locate_load_x_list" type="text" size=20 value=""><BR> the code fires this function if there<input id="final_locate_load_x_list" type="text" size=25 value=""><BR> Code: function place_ca1sb2en1pg1itm4(){alert("ca1 number4 function dummy run as alert");}
Code: function place_ca1sb2en1pg1itm9(){alert("ca1 number9 function dummy run as alert");}
Code: function place_ca2sb2en1pg1itm6(){alert("ca2 number6 function dummy run as alert");}
Code: function place_ca2sb2en1pg1itm12(){alert("ca2 number12 function dummy run as alert");}
I want to be able to display a table of images, all the same size, click on any one and show a corresponding htm pages in an iframe, click outside the ifram or on it to close it; click on another image and on and on... So far, I am able to hide the initial iframe and/or display it inline but am unable to show it above the table that holds the images. It is not difficult to do this using screen-captured images of the htm pages but I am looking for a dynamic way of doing this either with javascript or php or just plain html. The htm pages contain a recipe with an photo and text in a <table>. If needed, I could whip up a small demo. Any help would be much appreciated. Hi Guys, I am new to this forum,based on the combobox value,I am creating a textboxes dynamically in jsp .Based on the count of textboxe's the textarea content comes with <value1> like this... Here i tried like this, <html> <head> <script> function copy_data(val,id,textareaValue){ var enteredText = val; alert("enteredText -----------"+enteredText); var boxId= id; alert("boxId-----------"+boxId); var textValue= textareaValue; alert("textValue-----------"+textValue); var beforeBrac = textValue.substring(0,textValue.indexOf("<")); alert("beforeBrac -----------"+beforeBrac ); var inbracket = textValue.substring(beforeBrac.length+1,textValue.indexOf(">")); alert("inbracket -----------"+inbracket); if(boxId = "1"){ inbracket = val; } alert("inbracket -----------"+inbracket); var afterBrac = textValue.substring(textValue.indexOf(">"),textValue.length); alert("afterBrac -----------"+afterBrac ); var fstr = beforeBrac +"<"+inbracket +afterBrac ; if(boxId == "1"){ document.getElementById('txtArea').value = fstr; alert("final str value is"+fstr); } } </script> </head> <body> <input type="text" name ="a" id="1" onkeyup="copy_data(this.value,this.id,document.getElementById('txtArea').value)"/> <input type="text" name ="a" id="2" onkeyup="copy_data(this.value,this.id, document.getElementById('txtArea').value)"/> <textarea rows="2" cols="20" id="txtArea"> At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced <XML>, SQL, ASP, and PHP. </textarea> </body> </html> three text boxes with some value [ value1 ] [value2] [value3 ] this is the text area content:- At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced XML, SQL, ASP, and PHP. the output should be :- At W3Schools you <value1> find all <value2> Web-building tutorials <value3 > need, from basic HTML to advanced XML, SQL, ASP, and PHP... But i can't get it exactly..When i enter or delete the value it should replaced in the proper <> correctly.. If i enter the value in 1st textbox it should replace the value 1st <>.same for others also...Any Idea's ?Plz suggest me ... serverless situation where applet drives document scanner and captures images. Currently use data uri technique <img src="data:image/jpg;base64,BLAHBLAHBLAH> to dynamically change img src (image fed from the applet) when user wants to view a particular image. Works great in firefox... In ie8, however, the 32K limit on data uri's stops me cold. I researched switching over to MHTML techniques for IE only....but without server-side generation of the MHTML (or CSS), I am running into issues. Does anyone know of a way to dynamically 'inject' MHTML content via javascript into current document for use as MHTML image ? like for example i have text areas named upload1 and upload2 when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts" Hi, I'm trying to change the column from javascript using. cell.width='7'; or cell.style.width="7px"; when i set this. all the columns in each row within the table are resetting to this column width. How can i make sure that this reflects for only one row for which i set this property to. Please let me know. I want a code that changes text (of maybe a div) after 10 seconds. So like i could have some text and a link on my page then after 10 seconds it will change to something else and i can make it change to as many things as i want. Then when it goes threw them all it starts over. THANKS hi all, I really need help with this topic. I have to use onMouseOver to change the content of an iframe. I'm trying to use an array but I'm confused and I'm not really sure if what I'm doing is correct and it doesnt work. I will appreciate your help and understanding. Thanks a lot! here is part of my code.. var frame=new Array(6); frame[0]="page1.html"; frame[1]="page2.html"; frame[2]="page3.html"; frame[3]="page4.html"; frame[4]="page5.html"; frame[5]="page6.html"; var j=0; function nextFrame() { if (j < 5) { j++; document.getElementById(frame).contentDocument=frame[j]; } return; } <span onMouseOver="nextFrame()" > <img name="upperImage" src="something.jpg" width=350 height=250 /></span> <iframe id="frame1" name="frame1" src="" width=350 height=250 frameborder="0"> </iframe> Please let me know if at least I'm in the right track. Thanks I have a div that changes background on click. Example: <script type="text/javascript"> function changeBackground(strURL) { document.getElementById('about').style.backgroundImage="url("+strURL+")"; } </script> <body> <div id="about"> <a href="#about" onClick="changeBackground('mainbackground.jpg');">text</a> <a href="#about" onClick="changeBackground('background2.jpg');">text</a> </div> This part works just fine so no issues. However, I have content on the mainbackground.jpg that is getting transferred over to the other backgrounds as well. I would like each background to have its own paragraph content. I do not want to embed the info into the images for SEO reasons. Any ideas on how to do this? Thanks! I am trying to get a div's content to change using javascript but for some reason it is not working and i get no errors looking at the error console. the code that is waiting for the content... Code: <div style="font-weight: bold;">count = <div id="desc" style="float: left;"></div> descriptions to do.</div><br clear="all" /> the code that should change the content.... Code: <? echo("<script type=\"text/javascript\">
document.getElementById('desc').value='" . $count . "';
</script>");
?>
when i view the source code the javascript lines show like so... Code: <script type="text/javascript">
document.getElementById('desc').value='373';
</script>
do i have the javascript correct ? |
|||||||