|
JavaScript - Setfocus On Dynamically Added Text Box.
Hello,
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 Similar TutorialsHi 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 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;
}
Good day! I created a login page and I have the username which is a textbox type, department and i use option and a submit button.. I want that when i open my webpage automaticallt the cursor was on the textbox and when i am done in typing my username and i press the enter key the focus would be on the option which where i can choose my department and when i am done choosing my department and i press the enter key i automatic login and go to the department page. Here is the code: PHP Code: <?php session_start(); //require_once 'conn.php'; $db_name="dspi"; mysql_connect("localhost", "root", "") or die("Cannot connect to server"); mysql_select_db("$db_name")or die("Cannot select DB"); $department = mysql_real_escape_string($_POST['department']); $username = mysql_real_escape_string($_POST['username']); $sql=mysql_query("SELECT `Department`, `Username` FROM `tbllogin` WHERE `Department` = '{$department}' AND Username = '{$username}'") or die(mysql_error()); $ct = mysql_num_rows($sql); if($ct == 1) { $row = mysql_fetch_assoc($sql); if($row['Department']=='Accounting') { header('location: Company.php'); } elseif($row['Department']=='Engineering') { header('location: Company.php'); } elseif($row['Department']=='Finishing_Goods') { header('location: Company.php'); } elseif($row['Department']=='HRAD') { header('location: Company.php'); } elseif($row['Department']=='MIS') { header('location:Company.php'); } elseif($row['Department']=='Packaging_and_Design') { header('location:Company.php'); } elseif($row['Department']=='Production') { header('location:Company.php'); } elseif($row['Department']=='Purchasing_Logistic') { header('location:Company.php'); } elseif($row['Department']=='QA_and_Technical') { header('location:Company.php'); } elseif($row['Department']=='Supply_Chain') { header('location:Company.php'); } else { header('location:dspi_login.php'); echo"Incorrect Username or Department"; } } ?> <!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>Login</title> <script> function searchKeyPress(e) { // look for window.event in case event isn't passed in if (window.event) { e = window.event; } if (e.keyCode == 13) { document.getElementById('submit').focus(); } } </script> <style type="text/css"> <!-- BODY { background-image: url(layout_image/bgroundv09.png); background-attachment: fixed; } #Dept_Frame { position:absolute; width:229px; height:49px; z-index:1; left: 441px; top: 262px; } #Department_Option { position:absolute; width:186px; height:32px; z-index:2; left: 455px; top: 275px; } #Submit_Frame { position:absolute; width:82px; height:35px; z-index:3; left: 516px; top: 320px; } #Submit_Button { position:absolute; width:60px; height:29px; z-index:4; left: 525px; top: 328px; } #Username_ImageText { position:absolute; width:130px; height:55px; z-index:5; left: 319px; top: 208px; } #User_Frame { position:absolute; width:230px; height:46px; z-index:6; left: 441px; top: 216px; } #Username_Textbox { position:absolute; width:182px; height:23px; z-index:7; left: 457px; top: 228px; } --> </style> </head> <body> <form id="form1" name="form1" method="post" action=""> <div id="Department_Option"> <select name="department" onkeypress="searchKeyPress(event);"> <option>Choose your Department. . . . . . </option> <option value="Accounting" <?php if($_POST['department'] == 'Accounting') echo "selected='selected'"; ?>>Accounting</option> <option value="Engineering" <?php if($_POST['department'] == 'Engineering') echo "selected='selected'"; ?>>Engineering</option> <option value="Finishing_Goods" <?php if($_POST['department'] == 'Finishing_Goods') echo "selected='selected'"; ?>>Finishing Goods</option> <option value="HRAD" <?php if($_POST['department'] == 'HRAD') echo "selected='selected'"; ?>>HRAD</option> <option value="MIS" <?php if($_POST['department'] == 'MIS') echo "selected='selected'"; ?>>MIS</option> <option value="Packaging_and_Design" <?php if($_POST['department'] == 'Packaging_and_Design') echo "selected='selected'"; ?>>Packaging and Design</option> <option value="Production" <?php if($_POST['department'] == 'Production') echo "selected='selected'"; ?>>Production</option> <option value="Purchasing_Logistic" <?php if($_POST['department'] == 'Purchasing_Logistic') echo "selected='selected'"; ?>>Purchasing and Logistics</option> <option value="QA_and_Technical" <?php if($_POST['department'] == 'QA_and_Technical') echo "selected='selected'"; ?>>QA and Technical</option> <option value="Supply_Chain" <?php if($_POST['department'] == 'Supply_Chain') echo "selected='selected'"; ?>>Supply Chain</option> </select> </div> <div id="Submit_Button"> <input type="Submit" name="submit" value="Submit" id="submit" onclick="doSomething();"/> </div> <div id="Dept_Frame"><img src="layout_image/subframev02.png" width="229" height="50" /></div> <div id="Submit_Frame"><img src="layout_image/subframev02.png" width="80" height="46" /></div> <div id="Username_ImageText"><img src="layout_image/userv01.png" width="131" height="62" /></div> <div id="User_Frame"><img src="layout_image/subframev02.png" width="229" height="50" /></div> <div id="Username_Textbox"> <input name="username" type="text" size="30" /> </div> </form> </body> </html> I hope that somebody help me to solve I am looking for a javascript code for this idea under this message ---------------------------------------------------------------------------------------------------------------------------------------------------- I want to create a kind of shopping website so when you click on a image or text it will add some text to a textarea,, it will include the name of item and price of an item Hi Experts, i'am able create dynamically 2 text boxes ( start date & End Date) . Also i am able to create dynamically (img) calendar gif pictures beside each textbox. What i am stuck on is how to popup a calendar while clicking on the img and assign the date to a dynamic texboxes... Any help is much appreciated.. thank you here is the part of my code : // Create Start Date Text box var newStartDate = document.createElement('input'); newStartDate.setAttribute("type","date"); newStartDate.size=8; // Create calendar 1 img var newCalImg1 = document.createElement('img'); newCalImg1.src = "../media/forms/cal.gif"; // Create End Date Text box var newEndDate = document.createElement('input'); newEndDate.size=8; // Create calendar2 img var newCalImg2 = document.createElement('img'); newCalImg2.src = "../media/forms/cal.gif"; Hi Peers, i have a button that helps me creating more than one dynamic text box and dropdownlist... how it possible to capture the values in those dynamic comtrols ? i am trying the following but did not work ..when the code is excuted it gives me [object] // Create Text box 1 var newStartDate = document.createElement('input'); newStartDate.setAttribute("type","date"); newStartDate.size=8; //capture the value in a temp variable val1 var val1 = document.getElementsByName(newStartDate); alert(val1); the alert gives [object] thanks 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 ... Is it possible to dynamically change the value of text on a page as the user types into a text box? E.g. like: You Are Typing: <script> var keyword = document.getElementById('string'); document.write(keyword); </script> Or I could probably insert it into a function and loop it over and over again or is there a better way? I'm using Kevin Roth's Cross-Browser Rich Text Editor JS component. Below is a demo.php script showing how it's created in JS. I got it working fine but I now want to dynamically add new text to the component in my php script. I know how to setup the php part to initiate the new text load event but I can't figure out how to actually get the new text into the RTE component inside a JS function. I tried this JS function but it didn't load in the new text in: PHP Code: function pre_canned_message_click() { rte1.html = 'New string'; } In the demo.php below the RTE component is loaded the same way rte1.html = but in the JS function it doesn't work. I don't know what I'm missing here. Thanks for any help... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php echo var_dump($_POST); ?> <!-- // Cross-Browser Rich Text Editor // Written by Kevin Roth (http://www.kevinroth.com/rte/) // License: http://creativecommons.org/licenses/by/2.5/ //--> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Cross-Browser Rich Text Editor (RTE)</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="cross-browser rich text editor, rte, textarea, htmlarea, content management, cms, blog, internet explorer, firefox, safari, opera, netscape, konqueror" /> <meta name="description" content="The cross-browser rich-text editor (RTE) is based on the designMode() functionality introduced in Internet Explorer 5, and implemented in Mozilla 1.3+ using the Mozilla Rich Text Editing API." /> <meta name="author" content="Kevin Roth" /> <meta name="ROBOTS" content="ALL" /> <!-- html2xhtml.js written by Jacob Lee <letsgolee@lycos.co.kr> //--> <script language="JavaScript" type="text/javascript" src="../cbrte/html2xhtml.min.js"></script> <script language="JavaScript" type="text/javascript" src="../cbrte/richtext_compressed.js"></script> </head> <body> <h2>Cross-Browser Rich Text Editor (RTE) Demo</h2> <p>For more information, visit the <a href="http://www.kevinroth.com/rte/">Cross-Browser Rich Text Editor (RTE) home page</a>.</p> <!-- START Demo Code --> <form name="RTEDemo" action="demo.php" method="post" onsubmit="return submitForm();"> <script language="JavaScript" type="text/javascript"> <!-- function submitForm() { //make sure hidden and iframe values are in sync for all rtes before submitting form updateRTEs(); return true; } //Usage: initRTE(imagesPath, includesPath, cssFile, genXHTML, encHTML) initRTE("../cbrte/images/", "../cbrte/", "", true); //--> </script> <noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript> <script language="JavaScript" type="text/javascript"> <!-- //build new richTextEditor var rte1 = new richTextEditor('rte1'); <?php //format content for preloading if (!(isset($_POST["rte1"]))) { $content = "here's the " . chr(13) . "\"preloaded <b>content</b>\""; $content = rteSafe($content); } else { //retrieve posted value $content = rteSafe($_POST["rte1"]); } ?> rte1.html = '<?=$content;?>'; //rte1.toggleSrc = false; rte1.build(); //--> </script> <p><input type="submit" name="submit" value="Submit" /></p> </form> <?php function rteSafe($strText) { //returns safe code for preloading in the RTE $tmpString = $strText; //convert all types of single quotes $tmpString = str_replace(chr(145), chr(39), $tmpString); $tmpString = str_replace(chr(146), chr(39), $tmpString); $tmpString = str_replace("'", "'", $tmpString); //convert all types of double quotes $tmpString = str_replace(chr(147), chr(34), $tmpString); $tmpString = str_replace(chr(148), chr(34), $tmpString); // $tmpString = str_replace("\"", "\"", $tmpString); //replace carriage returns & line feeds $tmpString = str_replace(chr(10), " ", $tmpString); $tmpString = str_replace(chr(13), " ", $tmpString); return $tmpString; } ?> <!-- END Demo Code --> </body> </html> 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" Hello all, I am doing a website project and in that currently I am designing a product page. I have to design add values to text boxes and drag and drop the text boxes in the workspace and delete the text boxes the user does not want and have to draw a graphical line between the text boxes which are in order. I have designed and coded everything except the graphical line part. I am a learner in javascript and Can we draw a graphical line dynamically between the text boxes in the webpage? If we can draw, can anyone let me know the tutorial for that so that I can learn and start coding as I have to submit that project soon. Thank you. Hi, I am using a javascript datepicker which works fine with simple textboxes: For example: I have a textBox startDate1 in the table below: <form method="post" name="upload" action=""> <table id="tableId"> <tr> <td> <input type="text" name="startDate1" value="" readonly="true" size="10"/> <script language="JavaScript"> new tcal ({'formname': 'upload','controlname': 'startDate1'}); </script> <td> </tr> <table> </form> --Now I want to add rows dynamically to this table for which I have <a href="javascript:addRowToTable();" >Add Row</a> and the corresponding javascript function: <script type = "text/javascript"> function addRowToTable() { var tbl = document.getElementById('tableId'); var lastRow = tbl.rows.length; var iteration = lastRow; var row = tbl.insertRow(lastRow); var box = row.insertCell(0); var element = document.createElement('input'); element.setAttribute('type', 'text'); element.setAttribute('name', 'startDate' + iteration); box.appendChild(element); } </script> --This code creates the text boxes properly, but I am not being able to add the datepicker to it. Please suggest me a way to add the datepicker to the textboxes in the dynamically generated rows. Thank You Regards Rusho Shaw I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work. Can I do this? Help Hey all! I have a script below that is very basic. when a user submits a blank form this popups. although i want to set the value of the input field to 'you@domain.com'. how would i add this value to this javascript so that even though there is 'you@domain.com' in the box, an error will still popup?? Thanks, Code: function validate(form_id,email) {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.forms[form_id].elements[email].value;
if(reg.test(address) == false) {
alert('Please enter a valid email address');
return false;
}
}
I do not know much at all about java but the below is the code I have now. I was told I need to use java script to get what I am looking for PLEASE HELP Code: <?php
$connect = mysql_connect("host.address.com", "username", "password") or
die ("Hey loser, check your server connection.");
mysql_select_db("daobrien21");
?>
<?php
// Write out our query to get the list of bar names from our DB.
$query = "SELECT Bar FROM Test";
// Execute it, or return the error message if there's a problem.
$result = mysql_query($query) or die(mysql_error());
$dropdown = "<select name='Bar'>";
//fetch_assoc will get the rows from the $result and put them into an array
// the while loop then loops through the array wrapping the html code around the results
// thus generating the dropdown with a list of your bar names
while($row = mysql_fetch_assoc($result)) {
$dropdown .= "\r\n<option value='{$row['Bar']}'>{$row['Bar']}</option>";
}
$dropdown .= "\r\n</select>";
echo $dropdown;
?>
<?php
$query="select * from Test";
$result = mysql_query("SELECT * FROM Test where City='Murfreesboro'");
?>
<table border=1 style="background-color:#F0F8FF;" >
<caption><EM>Murfreesboro Bars</EM></caption>
<tr>
<th>Bar Name</th>
<th>City</th>
<th>Address</th>
<th>Phone</th>
</tr>
<?php
while($row=mysql_fetch_array($result)){
echo "</td><td>";
echo $row['Bar'];
echo "</td><td>";
echo $row['City'];
echo "</td><td>";
echo $row['Address'];
echo "</td><td>";
echo $row['Phone'];
echo "</td></tr>";
}
echo "</table>";
?>
What I am looking to do is when someone selects the bar name from the drop down it edits the below table to just display that bars information. i'm trying to concatenate to a string 2 variables that i'm adding together but i'm getting Nan as the result what am i doing wrong? str_amount=parseInt(document.getElementById('amount').value); strfeeamount=parseInt(document.getElementById('feeamount').value); urltoajax=urltoajax + '&amount=' +str_amount +strfeeamount Hey Everyone, I'm happy to have joined this forum. I have a javascript countdown but the digits countdown like 14 13 12 11 10 9 8 7 ... and I want it to look like 14 13 12 11 10 09 08 07.... I need this done for Days Hours Minutes and Seconds. Here is the code. Thank you in advanced for your help. Code:
<script type="text/javascript">
function cd() {
var now = <?php echo $now; ?>;
var target = <?php echo $target; ?>;
var horizvert = '<?php echo $horizvert; ?>';
var daytext = '<?php echo $daytext; ?>';
var daystext = '<?php echo $daystext; ?>';
var hourtext = '<?php echo $hourtext; ?>';
var hourstext = '<?php echo $hourstext; ?>';
var minutetext = '<?php echo $minutetext; ?>';
var minutestext = '<?php echo $minutestext; ?>';
var secondtext = '<?php echo $secondtext; ?>';
var secondstext = '<?php echo $secondstext; ?>';
var whatnow = '<?php echo $whatnow; ?>';
var redirect = '<?php echo $redirect; ?>';
timediff = target - now;
var daysleft = 0;
var hoursleft = 0;
var minutesleft = 0;
var secondsleft = timediff;
if (timediff >= 60) {
secondsleft = timediff % 60;
minutesleft = (timediff - secondsleft) / 60;
}
if (minutesleft >= 60) {
timediff = minutesleft;
minutesleft = timediff % 60;
hoursleft = (timediff - minutesleft) / 60;
}
if (hoursleft >= 24) {
timediff = hoursleft;
hoursleft = timediff % 24;
daysleft = (timediff - hoursleft) / 24;
}
var gmctime = document.getElementById("gmctime");
var gmctimetext = '';
var gmccountdown_timer = setInterval(gmcTimer, 1000);
function gmcUpdateDivHorizontal() {
gmctimetext = '';
gmctimetext += (daysleft) ? daysleft + (daysleft==1 ? ' '+daytext+' ' : ' '+daystext+' ') : '';
gmctimetext += (hoursleft || daysleft) ? hoursleft + (hoursleft==1 ? ' '+hourtext+' ' : ' '+hourstext+' ') : '';
gmctimetext += (minutesleft || hoursleft || daysleft) ? minutesleft + (minutesleft==1 ? ' '+minutetext+' ' : ' '+minutestext+' ') : '';
gmctimetext += secondsleft + (secondsleft==1 ? ' '+secondtext+' ' : ' '+secondstext+' ');
gmctime.innerHTML = gmctimetext;
}
function gmcUpdateDivVertical() {
gmctimetext = '';
gmctimetext += (daysleft) ? daysleft + (daysleft==1 ? ' '+daytext+'<br />' : ' '+daystext+'<br />') : '';
gmctimetext += (hoursleft || daysleft) ? hoursleft + (hoursleft==1 ? ' '+hourtext+'<br />' : ' '+hourstext+'<br />') : '';
gmctimetext += (minutesleft || hoursleft || daysleft) ? minutesleft + (minutesleft==1 ? ' '+minutetext+'<br />' : ' '+minutestext+'<br />') : '';
gmctimetext += secondsleft + (secondsleft==1 ? ' '+secondtext+'<br />' : ' '+secondstext+'<br />');
gmctime.innerHTML = gmctimetext;
}
function gmcTimer() {
if (secondsleft == 0 && minutesleft == 0 && hoursleft == 0 && daysleft ==0) {
clearInterval(gmccountdown_timer);
if (whatnow == 'text') {
document.getElementById('gmcpre').style.display = 'none';
document.getElementById('datetime').style.display = 'none';
document.getElementById('gmcpost').style.display = 'none';
document.getElementById('gmcafter').style.display = 'block';
} else {
window.location = redirect;
}
return;
}
if (secondsleft > 0) secondsleft--;
else {
secondsleft = (minutesleft || hoursleft || daysleft) ? 59 : 0;
if (minutesleft > 0) minutesleft--;
else {
minutesleft = (hoursleft || daysleft) ? 59 : 0;
if (hoursleft > 0) hoursleft--;
else {
hoursleft = (daysleft) ? 23 : 0;
if (daysleft) daysleft--;
}
}
}
if (horizvert == 'Horizontal') {
gmcUpdateDivHorizontal();
} else {
gmcUpdateDivVertical();
}
}
}
window.onload = cd;
</script>
Code: top.window.moveTo(0, 0);
if (document.all) {
top.window.resizeTo(screen.availWidth, screen.availHeight);
} else if (document.layers || document.getElementById) {
if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
function gcd(a, b) {
return (b === 0) ? a : gcd(b, a % b);
}
var i = 0;
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (; i < data.length; i + 1) {
var dataString = data[i].string, dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
} else if (dataProp) {
return data[i].identity;
}
}
return data[i].identity;
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{ string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{ string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{ prop: window.opera,
identity: "Opera"
},
{ string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{ string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{ string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{ string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{ string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{ string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{ string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{ string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{ string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{ string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
var version;
if (dataString.indexOf(dataBrowser.versionSearch) !== -1) {
version = parseFloat(string.indexOf(dataBrowser.versionSearch), 1);
} else {
version = parseFloat(string.indexOf(dataBrowser.identity), 1);
}
BrowserDetect.init();
if (dataBrowser.identity === "Chrome") {
if (version >= 8) {
document.location.replace("main/index.htm");
} else if (version >= 3) {
document.location.replace("meh/index.htm");
} else {
document.location.replace("http://www.browserchoice.eu/");
}
} else if (dataBrowser.identity === "Safari") {
if (version >= 5) {
document.location.replace("main/index.htm");
} else if (version >= 3) {
document.location.replace("meh/index.htm");
} else {
document.location.replace("http://www.browserchoice.eu/");
}
} else if (dataBrowser.identity === "Opera") {
document.location.replace("http://www.google.com/");
} else if (dataBrowser.identity === "Firefox") {
document.location.replace("http://www.google.com/");
} else if (dataBrowser.identity === "Mozilla") {
document.location.replace("http://www.yahoo.com/");
} else if (dataBrowser.identity === "Explorer") {
if (version >= 8) {
document.location.replace("meh/index.htm");
} else {
document.location.replace("http://www.browserchoice.eu/");
}
}
For some reason, this script was working before I put in the if statements, but after the if statements were placed in, it stopped auto maximizing as well, and no if statements were added around this. Does anyone know what the problem is? (It's supposed to redirect by browser to one of 3 sites based on how good they are) |
|||||||