|
JavaScript - Naming Dynamically Created Textboxes
I have the following code which adds a dynamically created textbox to a form:
Code: function addarow() {
if (count > 5) {return false}
count ++;
addbox = '<input type = "text" name = "txt1" id = "txt1" class = "box">';
document.getElementById("boxes"+count).innerHTML = addbox + "<br>";
}
I am having difficulties in assigning different names/ids to the sequential textboxes, that is "txt"+count to give txt1, txt2 etc. Your assistance will be much appreciated. A child of five would understand this. Send someone to fetch a child of five. Groucho Marx Similar TutorialsI have an input box "product" besides it there is an add input button which adds another input box product upon clicking.This array of input boxes I have created is through document.createElement('input'). My autocomplete is working for the initial input box....now when I click add Input button for the generated box also the autocomplete shld work...how do I make it work?? PS:Autocomplete script is working so I didnt post it here.... I just want it to make it working dynamically created i/p boxes 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 Hello, I'm trying to write a script for a website that reads from a database and makes a separate table for each entry in the database. Since the number of entries can change, I want to dynamically create a div for each one, which I can later hide or display based on user selection. However, when I try to access the dynamically created elements by their ID, they return null. Is what I'm trying to do here actually possible? Code: for(var i = 0; i < tables.length; i ++)
{
var newDiv = document.createElement("div");
newDiv.setAttribute("id", tables[i].name);
newDiv.setAttribute("name", tables[i].name);
newDiv.setAttribute("class", "hidden");
newDiv.innerHTML += tables[i].name;
newDiv.innerHTML += "<table id = 'table"+tables[i].name+"' border = '1'>";
newDiv.innerHTML += "<tr>";
for(var rows = 0; rows < table.arrayOfFields.length; rows++)
{
newDiv.innerHTML+="<th>"+table.arrayOfFields[rows].title+"</th>";
numOfEntries = table.arrayOfFields[rows].arrayOfEntries.length;
}
newDiv.innerHTML+="<tr>";
for(var cols = 0; cols < numOfEntries; cols++)
{
for(var rows = 0; rows < table.arrayOfFields.length; rows++)
{
newDiv.innerHTML+="<td>"+table.arrayOfFields[rows].arrayOfEntries[cols].data+"</td>";
}
newDiv.innerHTML+="<tr>";
}
newDiv.innerHTML+="</table>";
document.body.appendChild(newDiv);
}
im trying to create a script for greasemonkey (tried getting help from their discussion forums, but no one ever answers), but its still written in javascript. so here is what im trying to do. Ive got a dynamically created division that aligns to the right of the browser window. Now im trying to put links inside it as you normally would with like a document.write statement or other methods. The only problem is, any method i try wont work for me. heres my code, maybe someone could give me some things i could try. Code: function QuickLinks()
{
var body = document.body;
var div2 = document.createElement("div");
div2.setAttribute('class','QL');
div2.setAttribute('style','background-color: #692510;width: 200px;height: 500px;top: 2cm;position: absolute;right: 5px;z-index: 4;');
var links = document.createTextNode("where i want my links"); //now with that statement it just writes text, ive tried document.write and many other methods and nothing seems to work.
div2.appendChild(links); //this just inserts the links into the div.
body.appendChild(document.createElement('br'));
body.appendChild(div2);
}
QuickLinks();
Hi, This is my first time here so I hope I'm not posting to the wrong forum. If this has been answered before, please direct me to the corrent post. I've created several dynamic checkboxes with with following code: <code> var pnl = document.getElementById("pnlSalesPeople"); for (i = 0; i < sales.length; i++) { var ck = document.createElement("input"); ck.type = "checkbox"; ck.id = "ck" + i; //ck.checked = true; var label = document.createElement('label'); label.htmlFor = ck.id; label.id = "label" + i; label.appendChild(document.createTextNode(sales[i])); pnl.appendChild(ck); pnl.appendChild(label); pnl.appendChild(document.createElement('<br />')); } </code> All the checkboxes get put into the panel, one per line, as expected. However, clicking on any of them does not change their checked state--if I uncomment the line setting the state above, all the checkboxes are checked, but they don't become unchecked when clicking on them. I'm thinking I'm missing something that will make these checkboxes behave like they should or my approach to dynamic creation is flawed. In any event, my knowledge of Javascript is certainly not at expert level so I'm hoping there might a simple solution to my dilemma. Any help on this is genuinely appreciated. TIA I'm having an issue adding focus() to an input that is dynamically created with jquery. I'm still learning, so I've mixed in traditional js with my jquery code because it's easier for me to understand. Anyhow document.getElementById(name).style.backgroundColor="#72A4D2"; successfully changed the background of the input ID, but document.getElementById(name).focus(); does nothing. I know that this is the correct code because if I hard code an input into the form (which you can see I've commented out below, such as document.getElementById('password').focus(); it refocuses successfully on that input. Thus I'm stumped yet again. Anyone know how to deal with this issue? JS: Code:
$(function() {
var i = $('input').size() + 1;
$('a.add').click(function() {
$('<p>Username ' + i + ': <input type="text" id="user' + i + '" name="user' + i + '" onblur="javascript:checkl(this.name, this.value);"></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
i++;
});
});
function checkl(name, value){
var errors=new Array();
var x;
var msg = "There were some problems...\n";
if (value==="") {
errors['blank'] = "Field must not be blank";
}
for (x in errors)
{
msg += "\n"+errors[x];
}
if (!(x==undefined)){
alert(msg);
document.getElementById(name).style.backgroundColor="#72A4D2"; //works, changed input background successfully
document.getElementById(name).focus(); // does NOT work, no focus
// document.getElementById('password').focus(); // successfully refocuses on hard coded 'password' input
}else{
document.getElementById(name).style.backgroundColor="";
}
}
HTML: Code: <a href="#" class="add" id="1"><img src="add.png" width="24" height="24" alt="add" title="add input" /></a> <form id="target" name="target" action="post.php" method="post" onsubmit="return validate(this);"> <div id="inputs"> <!-- dynamically created inputs here --> </div> <!-- Password: <input type="password" id="password" name="password" size="10"> --> <input type="submit" value="Send"> </form> Hi. I've dynamically created some divs, how do I select a specific div to use? Code: //create box for length of letters in word
var i = 0;
for(i=0;i<wL;i++){
cBoxes = document.createElement("div");
cBoxes.className = "letterBoxes";
hangMan.appendChild(cBoxes);
}
So I'm creating the amount of divs equal to the amount of letters in my word (I'm making a hangman game). On correct guess, I need the letter to show in it's correct position (within the correct blank div previously created). I have the correct position stored in a variable (letPos), and the correct guess (userGuess), I need to show userGuess at the div equal to letPos, ie div 4 or div 5, etc. If I simply go cBoxes.innerHTML = userGuess, the correct userGuess always shows at the last position in my cBoxes divs. I need it to show at the correct position (letPos). Any hints? Hi all , i am creating a dynamic controls but one thing iam stack on is how to associate an existing class ("C1") to that dynamic control : i.e var var1 = row.insertCell(0); var1.align ="center"; var1.innerHTML - array1[A1[i]]; thoughts ? thanks 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"; Hello, I am trying to save a dynamically created anchor's id onclick, but I am having a lot of trouble. Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
</style>
</head>
<body onload="initAll();">
<div id="test"></div>
<script type="text/javascript">
var xhr = false; //global xhr variable
var allRequestIds = new Array();
var allRequestDates = new Array();
var allRequestNames = new Array();
var allRequestBriefs = new Array();
var allListLinks = new Array();
var allListItems = new Array();
var linkId; //global variable for clicked link's id; set to be the same as xml data's id; used to pull more data in next page
function initAll(){
if (window.XMLHttpRequest){ //initialize xmlhttprequest into xhr variable
xhr = new XMLHttpRequest();
}
else{}//ie stuff goes here
xhr.open("GET","xml/request.xml",true); //open connection
xhr.onreadystatechange=createLinks; //onreadystatechange call createLinks()
xhr.send(null);
}
function createLinks(){
if(xhr.readyState==4){
if(xhr.status==200){
if(xhr.responseXML){
var allRequests=xhr.responseXML.getElementsByTagName("request"); //save all requests into array
var newList=document.createElement("ol"); //create a new ordered list
for(i=0;i<allRequests.length;i++){ //arrays of each tag, and an array of links
allRequestIds[i]=allRequests[i].getElementsByTagName("requestId")[0].firstChild.nodeValue;
allRequestDates[i]=allRequests[i].getElementsByTagName("date")[0].firstChild.nodeValue;
allRequestNames[i]=allRequests[i].getElementsByTagName("name")[0].firstChild.nodeValue;
allRequestBriefs[i]=allRequests[i].getElementsByTagName("brief")[0].firstChild.nodeValue;
allListLinks[i]=document.createElement("a"); //create an array of links
allListLinks[i].appendChild(document.createTextNode(""+allRequestDates[i]+" "+allRequestNames[i]+" "+allRequestBriefs[i]+"")); //i don't know how to add a new line within createtextnode!!! wtf?! i wanted to add a <br />
allListLinks[i].setAttribute("href","somepage.html");
allListLinks[i].setAttribute("class","dynamicLink");
allListLinks[i].setAttribute("onclick","pullDetailed();");
allListItems[i]=document.createElement("li"); //create an array of list items
allListItems[i].appendChild(allListLinks[i]); //append each anchor into each list item
newList.appendChild(allListItems[i]); //append all list items into ordered list
}
document.getElementById("test").appendChild(newList); //append list into test paragraph
}
}
}
}
function pullDetailed(){
alert("function pullDetailed called!"); //this is just testing to see if this function has been called on anchor click
linkId=this.innerHTML.; //this doesn't work
alert(linkId);
}
</script>
</body>
</html>
does anybody have an ideas? thank you. Hi all, I have a set or icons that which over time I replace with a different icon and and add a onclick event to them. This is my code Code: function updateStatusIcons(retText) {
updatingStatuses = true;
var updates = retText.split("|");
for (z=0; z<updates.length; z++) {
var sysId = trim(updates[z].split(":")[0]);
var projectId = trim(updates[z].split(":")[1]);
if (projectId != "") {
var statusImg = getSysidsImg(sysId);
statusImg.src = "images/tick.gif";
statusImg.className = "hand";
statusImg.title = "Project "+ projectId +" created, Click here to find in project search";
statusImg.onclick = function () { document.location = "projectSearch-FTTC.jsp?initAction=loadproject&projectId="+ projectId; };
// Remove sysid from csv
removeSysidfFromCSL(sysId);
}
}
if (pollingOn) {
pollingupdate = setTimeout("checkForProjectComplete()", 5000);
}
updatingStatuses = false;
if (runErrorFunction) {
markErrors();
}
}
Everything works fine except for the onclick event. In the hover message of the icon, the correct project ID is displayed in the message, hoever in the function, the onclick funtion always loads the page with the last set project id. How can I pass the project id into the onclick function and make it stay fixed and not be the value of that it was last set to? TIA, Dale Below I have dynamical generated radio buttons, the names($approve variable is the name) per radio button pairs are different(dynamically created names using looping). When I create two buttons, one is for if you click it, all the radio button with the label approve will be selected all, and the other button is for the disapprove label button that will select the radio button with the label disapprove. How can I make this right. Below are the codes I created. Thanks Code: <script>
function selectAll()
{
var i = 0;
objElems = document.t4.elements;
for(i=0;i<objElems.length;i++){
objElems[i].checked =true;
}
</script>
PHP Code: <form action="viewall.php" method="post" name="t4"> while(condition) { echo "<td ><input type='radio' name='". $approve."' id='app' value='approve' /> Approve<br /> </td> <td ><input type='radio' name='". $approve."' id='disp' value='disapprove' /> Disapprove<br /> </td> "; } <tr><td><input type="button" name="all_app" value="Select All Approve" onclick="selectAll(this.value);" ></td> <td><input type="button" name="all_app2" value="Select All disapprove" onclick="selectAll(this.value);" ></td> </tr> </form> 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'm building a t-shirt shop whose interface includes a gallery of designs in an IFrame. When the user clicks on a design, a dedicated page is loaded into the IFrame which shows all the available products associated with the design the user clicked. I've put each design's image and associated page as the first and second elements of a nested array, and am using a for loop to then load all the images into the page that's shown in the IFrame when the web-site loads. It's looking beautiful, but here's the rub I've been stuck on for two days now with no solution in sight... The array, "designImages", has 37 elements (ie. designImages[0]... designImages[36]). When I click on a design image on the page, any design image, the browser (all browsers, so I can't blame Microsoft for this one ), loads the page for design #36. I've tried all sorts of things, but still cannot tell if the issue is because the dynamically generated divs are being reassigned the value [36] after the for loop's executed, or if the div id's are okay but somehow the code is rooting for [36], the last element of the array anyway. I need someone's help in enabling a click on #4 to load the page for #4, etc, etc. Here's the code below. Thanks. Code:
/* designImages[x][0] = the image source on the page;
* designImages[x][1] = the destination url on clicking the image;
*/
var designImages = new Array();
designImages[0] = new Array ( "Assets/DesignImages/Img00 - CosmicCircle.png" , "ProductGalleries/Img00.html" , "Cosmic Circles" , "Mark Lavin");
designImages[1] = new Array ( "Assets/DesignImages/Img01 - Flora.png" , "ProductGalleries/Img01.html" );
designImages[2] = new Array ( "Assets/DesignImages/Img02 - JBuddha.png" , "ProductGalleries/Img02.html" );
designImages[3] = new Array ( "Assets/DesignImages/Img03 - Ohm+Sun.png" , "ProductGalleries/Img03.html" );
designImages[4] = new Array ( "Assets/DesignImages/Img04 - Ohm+Burst.png" , "ProductGalleries/Img04.html" );
designImages[5] = new Array ( "Assets/DesignImages/Img05 - Space+Invader.png" , "ProductGalleries/Img05.html" );
designImages[6] = new Array ( "Assets/DesignImages/Img06 - Fire.png" , "ProductGalleries/Img06.html" );
designImages[7] = new Array ( "Assets/DesignImages/Img07 - Live.png" , "ProductGalleries/Img07.html" );
designImages[8] = new Array ( "Assets/DesignImages/Img08 - Being.png" , "ProductGalleries/Img08.html" );
designImages[9] = new Array ( "Assets/DesignImages/Img09 - Water.png" , "ProductGalleries/Img09.html" );
designImages[10] = new Array ( "Assets/DesignImages/Img10 - Abundance.png" , "ProductGalleries/Img10.html" );
designImages[11] = new Array ( "Assets/DesignImages/Img11 - Adventure.png" , "ProductGalleries/Img11.html" );
designImages[12] = new Array ( "Assets/DesignImages/Img12 - Air.png" , "ProductGalleries/Img12.html" );
designImages[13] = new Array ( "Assets/DesignImages/Img13 - Chance.png" , "ProductGalleries/Img13.html" );
designImages[14] = new Array ( "Assets/DesignImages/Img14 - Dangerous.png" , "ProductGalleries/Img14.html" );
designImages[15] = new Array ( "Assets/DesignImages/Img15 - Destiny.png" , "ProductGalleries/Img15.html" );
designImages[16] = new Array ( "Assets/DesignImages/Img16 - Dream.png" , "ProductGalleries/Img16.html" );
designImages[17] = new Array ( "Assets/DesignImages/Img17 - Earth.png" , "ProductGalleries/Img17.html" );
designImages[18] = new Array ( "Assets/DesignImages/Img18 - Ecstasy.png" , "ProductGalleries/Img18.html" );
designImages[19] = new Array ( "Assets/DesignImages/Img19 - Freedom.png" , "ProductGalleries/Img19.html" );
designImages[20] = new Array ( "Assets/DesignImages/Img20 - Friendship.png" , "ProductGalleries/Img20.html" );
designImages[21] = new Array ( "Assets/DesignImages/Img21 - Fulfillment.png" , "ProductGalleries/Img21.html" );
designImages[22] = new Array ( "Assets/DesignImages/Img22 - Generosity.png" , "ProductGalleries/Img22.html" );
designImages[23] = new Array ( "Assets/DesignImages/Img23 - Gift.png" , "ProductGalleries/Img23.html" );
designImages[24] = new Array ( "Assets/DesignImages/Img24 - Imagine.png" , "ProductGalleries/Img24.html" );
designImages[25] = new Array ( "Assets/DesignImages/Img25 - Joy.png" , "ProductGalleries/Img25.html" );
designImages[26] = new Array ( "Assets/DesignImages/Img26 - Kinky.png" , "ProductGalleries/Img26.html" );
designImages[27] = new Array ( "Assets/DesignImages/Img27 - Mystery.png" , "ProductGalleries/Img27.html" );
designImages[28] = new Array ( "Assets/DesignImages/Img28 - Mastery.png" , "ProductGalleries/Img28.html" );
designImages[29] = new Array ( "Assets/DesignImages/Img29 - Peace.png" , "ProductGalleries/Img29.html" );
designImages[30] = new Array ( "Assets/DesignImages/Img30 - Sexy.png" , "ProductGalleries/Img30.html" );
designImages[31] = new Array ( "Assets/DesignImages/Img31 - iBurn.png" , "ProductGalleries/Img31.html" );
designImages[32] = new Array ( "Assets/DesignImages/Img32 - PlayaTrash.png" , "ProductGalleries/Img32.html" );
designImages[33] = new Array ( "Assets/DesignImages/Img33 - Ohm+Burst.png" , "ProductGalleries/Img33.html" );
designImages[34] = new Array ( "Assets/DesignImages/Img34 - BlackRockCity.png" , "ProductGalleries/Img34.html" );
designImages[35] = new Array ( "Assets/DesignImages/Img35 - BarCode.png" , "ProductGalleries/Img35.html" );
designImages[36] = new Array ( "Assets/DesignImages/Img36 - NumberedBarCode.png" , "ProductGalleries/Img36.html" );
window.onload = function()
{
creationCompleteHandler();
}
function creationCompleteHandler()
{
calcNumDesigns();
setLinks();
}
function calcNumDesigns()
{
var numDesignBoxes = designImages.length;
var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
{
var newGalleryBox = document.createElement('div');
var newGalleryBoxID = ("galleryRow" + n);
newGalleryBox.setAttribute('id',newGalleryBoxID);
newGalleryBox.setAttribute('class',"galleryBox");
document.getElementById('content').appendChild(newGalleryBox);
squareOff(newGalleryBox);
var rowBoxes;
if ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
else rowBoxes = 2;
for ( m = 0 ; m <= rowBoxes ; m++ )
{
var boxNum = ( n * 3 ) + m;
var newDesignBox = document.createElement('div');
var newDesignBoxID = "design" + boxNum;
newGalleryBox.appendChild(newDesignBox);
newDesignBox.setAttribute('id',newDesignBoxID);
newDesignBox.setAttribute('class',"designBox");
var newDesignImg = document.createElement('img');
var newDesignImgID = "designImg" + boxNum;
newDesignImg.setAttribute('id',newDesignImgID);
newDesignImg.setAttribute('class',"designImage");
newDesignImg.src = designImages[boxNum][0];
newDesignBox.appendChild(newDesignImg);
}
}
}
function squareOff(frame)
{
document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
}
function setLinks()
{
for (x in designImages)
{ document.getElementById("design"+x).onclick = function(){ sendToURL(x) }
};
}
function sendToURL(x)
{
var url = designImages[x][1]
MM_goToURL('self',url);
return document.MM_returnValue;
}
function MM_goToURL()
{ //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
I have this form that I want to be saved on the users desktop and at the same time provide a specified file name +computer user name+ date+time. For example if the form is called 'Requisition', I would like that when the user clicks the submit button, a 'save' window pops up with the file name as "Requisition" + "username" + "current date" + "current time". I am working on Adobe Acrobat Pro 9.
Hello, I need your help, I can seem to get this to work. I want to be able to use an IIF to check if a textbox empty ie. IIF(textbox1 = "" || textbox = null, "it is empty","it is not empty") This doesnt seem to be working. Any ideas? - Clueless =? Hi and thanks for your help, I have two text boxes on my page and a third where I would like it to automatically subtract the two any time either one of them is changed. What is the simplest way to do this? Thanks again for your help, Will Hi there...I have an autosuggest that I got from a friend. My question is ... the autosuggest works well on my business textbox - what would the code look like to get it to work on the region textbox (or how do I get it to work on more than one textbox - can I just make a copy of the js file and change stuff)... Here is the html code for the index.html page with two boxes and a submit button... 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=utf-8" />
<title>Welcome</title>
<link href="searchfield.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="searchfield1.js"></script>
</head>
<body>
<form name="searchresults" action="Site/searchresults2.php" method="post" >
<input name="Business" class="textfield_effect" type="text" value="Enter Business Type or Name" size="30" onfocus="if(this.value==this.defaultValue) this.value='';" autocomplete="off"
id="businessquery" />
<input name="Region" class="textfield_effect" type="text" value="Enter Suburb or Postcode" size="30" onfocus="if(this.value==this.defaultValue) this.value='';" autocomplete="off" id="regionquery" />
<input type="submit" class="textfield_button" value="Search"/>
</body>
</html>
and here is the code for the file called searchfield1.js that powers the autosuggest... Code: this.searchfield = function(){
// CONFIG #
// this is id of the search field you want to add this script to.
// You can use your own id just make sure that it matches the search field in your html file.
var id = "businessquery";
// Text you want to set as a default value of your search field.
var defaultText = "Enter Business Type or Name!";
// set to either true or false
// when set to true it will generate search suggestions list for search field based on content of variable below
var suggestion = true;
// static list of suggestion options, separated by comma
// replace with your own
var suggestionText = "Accounting Firm, Independent Actors, Administration of Public Programs, above the fold, absolute link, accessibility, address bar, affordance, alt text, alt tag, anchor, animated GIF, anti-alias, applet, assumed knowledge, authoring, automagically, autoresponder, back end/front end, backup, bandwidth, banner ad, banner blindness, belt-and-suspenders, bitmap, blog, blogger, blogging, bookmark, breadcrumb, broadband, browser, cache, cached files, call to action, Cascading Style Sheets , chatroom, chrome, click-through rate, client-side/server-side, closure, compatibility mode, data compression, content management system , contextual menu, convergence, cookie, cost-per-clickthrough, cost-per-thousand, crawler, cross-browser compatibility, cybersquatter, deep-linking, default, degrade gracefully, deprecated, design pattern, directory, disjointed rollover, dither, div, div-i-tis, divitis, document type declaration, doctype, document type definition, Domain Name System, DNS server, domain name, DomaiNZ, doorway/gateway page, dots-per-inch, download, Dublin Core metadata, dynamic HTML, e-commerce, email, element, encryption, favicon.ico, File Transfer Protocol, FTP client, firewall, Fireworks, Flash, Flash Generator, flow chart, fold, above-the-fold, footer navigation, form, folksonomy, frame, frameset, front end/back end, gateway page, global navigation, granularity, Graphic Interchange Format, Graphical User Interface, hack, handle, haptics, hexadecimal colours, hits, host, hosting, hotspot, HyperText Markup Language, HyperText Transfer Protocol, HTML markup, HTML-text, hyperlink, iframes, i-mode, image map, impression, include, information architecture, information foraging, initialism, integration, interactive television, interface, internet, interstitial, intranet, Initial Public Offering, Internet Protocol, IP address, IP number, Internet Service Provider, JavaScript, Joint Photographers Expert Group, label, landing page, legacy content, link: absolute, relative, root, link farm, link rot, definition, ordered, unordered, listserv, logfiles, logfile analysis, look-and-feel, lossless compression, lossy compression, macron, mailing lists, markup, meta element, metadata, meta tag, mine-sweeping, MP3, MySQL, natural language, navigation, open source, optimise, optimisation, opt-in/opt-out, PageRank (PR), parasite economy, design pattern, perceived affordance, permission-based marketing, phishing, PHP: Hypertext Preprocessor, Portable Document Format, web portal, Pretty Good Privacy, pixel, plug-in, pop-up window, pop-under, Portable Network Graphic, prosumer, QuickTime, quirks mode, reciprocal links, referrer, referrer log, Really Simple Syndication, relative link, Realtime Transport Protocol, robot, robots file, robots.txt, rollover, disjointed rollover, root, root directory, root link, scan, scanning, schematic, SCM, SCP, search engine, search engine marketing, search engine optimisation, Section 508, Secure Sockets Certificate, semantic markup, server, sever-side/client-side, server-side include, session, session tracking, Shockwave, shopping-cart, shortcut icon, Simple Object Access Protocol, site feed, sitemap, smart tags, Synchronised Multimedia Integration Language, sniffer, spam, spim, spider, splash page, splash screen, spyware, standardista, standards-compliant/strict mode, status bar, sticky, streaming, streaming media, structured query language, stylesheet, system font, tags, tags/tagging, target, template, top-level navigation, topic path, traffic, transform gracefully, transparent GIF, trackback, typosquatter, Unicode, Unicode Transformation Format, Unified Modeling Language, Uniform Resource Identifier, Uniform Resource Locator, uploading, usability, user session, code standards, form input, vector, vector-based file, version control, viral marketing, virus, visual editor, web, Web 2.0, web accessibility, web-authoring, web browser, web font, typeface, web-log, web server logs, websafe colours, palette, web standards, WebTV, what-you-see-is-what-you-get, wireframe, Wireless Application Protocol, Wireless Markup Language, Worldwide Web, eXtensible Markup Language, XML schema";
// END CONFIG (do not edit below this line, well unless you really, really want to change something :) )
// Peace,
// Alen
var field = document.getElementById(id);
var classInactive = "sf_inactive";
var classActive = "sf_active";
var classText = "sf_text";
var classSuggestion = "sf_suggestion";
this.safari = ((parseInt(navigator.productSub)>=20020000)&&(navigator.vendor.indexOf("Apple Computer")!=-1));
if(field && !safari){
field.value = defaultText;
field.c = field.className;
field.className = field.c + " " + classInactive;
field.onfocus = function(){
this.className = this.c + " " + classActive;
this.value = (this.value == "" || this.value == defaultText) ? "" : this.value;
};
field.onblur = function(){
this.className = (this.value != "" && this.value != defaultText) ? this.c + " " + classText : this.c + " " + classInactive;
this.value = (this.value != "" && this.value != defaultText) ? this.value : defaultText;
clearList();
};
if (suggestion){
var selectedIndex = 0;
field.setAttribute("autocomplete", "off");
var div = document.createElement("div");
var list = document.createElement("ul");
list.style.display = "none";
div.className = classSuggestion;
list.style.width = field.offsetWidth + "px";
div.appendChild(list);
field.parentNode.appendChild(div);
field.onkeypress = function(e){
var key = getKeyCode(e);
if(key == 13){ // enter
selectList();
selectedIndex = 0;
return false;
};
};
field.onkeyup = function(e){
var key = getKeyCode(e);
switch(key){
case 13:
return false;
break;
case 27: // esc
field.value = "";
selectedIndex = 0;
clearList();
break;
case 38: // up
navList("up");
break;
case 40: // down
navList("down");
break;
default:
startList();
break;
};
};
this.startList = function(){
var arr = getListItems(field.value);
if(field.value.length > 0){
createList(arr);
} else {
clearList();
};
};
this.getListItems = function(value){
var arr = new Array();
var src = suggestionText;
var src = src.replace(/, /g, ",");
var arrSrc = src.split(",");
for(i=0;i<arrSrc.length;i++){
if(arrSrc[i].indexOf(value.toLowerCase()) >= 0){
arr.push(arrSrc[i]);
};
};
return arr;
};
this.createList = function(arr){
resetList();
if(arr.length > 0) {
for(i=0;i<arr.length;i++){
li = document.createElement("li");
a = document.createElement("a");
a.href = "javascript:void(0);";
a.i = i+1;
a.innerHTML = arr[i];
li.i = i+1;
li.onmouseover = function(){
navListItem(this.i);
};
a.onmousedown = function(){
selectedIndex = this.i;
selectList(this.i);
return false;
};
li.appendChild(a);
list.setAttribute("tabindex", "-1");
list.appendChild(li);
};
list.style.display = "block";
} else {
clearList();
};
};
this.resetList = function(){
var li = list.getElementsByTagName("li");
var len = li.length;
for(var i=0;i<len;i++){
list.removeChild(li[0]);
};
};
this.navList = function(dir){
selectedIndex += (dir == "down") ? 1 : -1;
li = list.getElementsByTagName("li");
if (selectedIndex < 1) selectedIndex = li.length;
if (selectedIndex > li.length) selectedIndex = 1;
navListItem(selectedIndex);
};
this.navListItem = function(index){
selectedIndex = index;
li = list.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].className = (i==(selectedIndex-1)) ? "selected" : "";
};
};
this.selectList = function(){
li = list.getElementsByTagName("li");
a = li[selectedIndex-1].getElementsByTagName("a")[0];
field.value = a.innerHTML;
clearList();
};
};
};
this.clearList = function(){
if(list){
list.style.display = "none";
selectedIndex = 0;
};
};
this.getKeyCode = function(e){
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
return code;
};
};
// script initiates on page load.
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",searchfield);
And here is the code for the CSS file called searchfield.css Code:
/* default (inactive field) */
.sf_inactive{
border:thin solid #CCCCCC;
background:#ffffff;
color:#666666;
font-style: 0;
}
/* on focus (when field is clicked on) */
.sf_active{
border:2px solid #CCCCCC;
background:#fff;
color:#666666;
}
/* with text (when field is inactive but contains user's input) */
.sf_text{
border:2px solid #CCCCCC;
background:#fff;
color:#888;
}
/* suggestions box */
/* js code generates unordered list */
.sf_suggestion{
position:relative;
}
.sf_suggestion ul{
position:absolute;
margin:0;
padding:0;
top:0;
left:0;
background-color: #FFFFFF;
}
.sf_suggestion li{
margin:0;
padding:0;
list-style:none;
}
.sf_suggestion li a{
display:block;
text-indent:5px;
color:#666666;
}
.sf_suggestion li.selected a{
color: #FFFFFF;
background-color: #666666;
}
Many thanks for hints, suggestions and contributions Hello, I have an entry form using multiple select boxes as data entry in the upper portion of my page. below i want additional details of the item selected in a table like textboxes by clicking an add button.So whenever i click the add button a new row of text boxes is again created. problem: upon selecting an additional/new item from the select boxes the first row of textboxes doesn't retain it's value it reflects the currently selected values. all the data mentioned above is contained in a single page is it possible? using a classic asp using javascript to do this?please help, i'm really lost..attach is a snopshot of my page... Hi, I have some tickboxes and one is marked Other. So what I would like is when someone put a tick in other, to display 5 textboxes name Other 1 to 5 I presume this is done by javscript, but not sure where to start, can anyone help? Also if possible when they untick it, they disapper, but not a must. Each tickbox is independent from each other. It can also use jQuery or Ajax if that helps |
|||||||