JavaScript - Getting All Elements

Hi again!!
This is my code to add and delete dynamic rows and auto calculate the amount field by multiplying qty and rate.

PHP Code:
<form name="staff_reg" action="<?php echo $_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING']; ?>" method="post" enctype="multipart/form-data">

<table width="100%" border="0" cellspacing="0" cellpadding="2">

<table border="0" cellpadding="1" cellspacing="0" class="normal-text" align="left">

<tr align="center">

<td width="10" class="forhead" style="white-space:nowrap;">&nbsp;</td>

<td width="92" class="forhead" style="white-space:nowrap;">Qty</td>

<td width="94" class="forhead" style="white-space:nowrap;">Rate</td>

<td width="94" class="forhead" style="white-space:nowrap;">Amount</td>

</tr>

</table>



<tr align="left">

<td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" >&nbsp;

<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" ></td>

<table border="0" id="dataTable" cellpadding="1" cellspacing="0" class="normal-text">

<tr>

<td width="10" class="forhead" style="white-space:nowrap;"><input type="checkbox" name="chk[]"/></td>

<td width="92" class="forhead" style="white-space:nowrap;">



<input type="text"  name="qty[]"  style="width:80px;" onblur="">



</td>

<td width="94" class="forhead" style="white-space:nowrap;">



<input type="text"  name="rate[]" style="width:80px;" value=""></td>



<td width="94" class="forhead" style="white-space:nowrap;">



<input type="text"  onblur="getValues('qty[]','rate[]','amt[]')" name="amt[]" style="width:80px;"></td>



</tr>

</table>

<table border="0">

<tr>

<td>Total:</td>

<td><input type="text"  name="total[]" style="width:80px;" value=""></td>

</tr>



<tr>

<td colspan="2">

<input name="Submit" type="submit" value="Save" style="text-decoration:none" />

<input type="reset" value="Cancel" onclick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'">

</td>

</tr>

</form>

<script type="text/javascript">



    function getValues(objName,objName2,objName3)

    {    

        var var3 = "";

        var arr = new Array();

        arr = document.getElementsByName(objName);

        arr2 = document.getElementsByName(objName2);

        arr3 = document.getElementsByName(objName3);

        for(var i = 0; i < arr.length; i++)

        {

            for(var i = 0; i < arr2.length; i++)

            {

            for(var i = 0; i < arr3.length; i++)

            {

            

                var obj1 = document.getElementsByName(objName2).item(i);

                var var2 = obj1.value;



                var obj = document.getElementsByName(objName).item(i);

                var var1 = obj.value;



                var obj3 = document.getElementsByName(objName3).item(i);

                var var3 = obj3.value;

                var var4 = var1 * var2;

                document.getElementsByName(objName3).item(i).value=var4;



            }        

            }

        }    

        

    }

    

  function addRow(tableID) {

     var table = document.getElementById(tableID);

     var rowCount = table.rows.length;

     var row = table.insertRow(rowCount);

     var colCount = table.rows[0].cells.length;

           for(var i=0; i<colCount; i++) {

               var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[0].cells[i].innerHTML;

                //alert(newcell.childNodes);

                switch(newcell.childNodes[0].type) {

                    case "text":

                            newcell.childNodes[0].value = "";

                            break;

                    case "checkbox":

                            newcell.childNodes[0].checked = false;

                            break;

                    case "select-one":

                            newcell.childNodes[0].selectedIndex = 0;

                            break;

                }

            }

        }

        

function deleteRow(tableID)

{

            try

                 {

                var table = document.getElementById(tableID);

                var rowCount = table.rows.length;



                    for(var i=0; i<rowCount; i++) 

                        {

                        var row = table.rows[i];

                        var chkbox = row.cells[0].childNodes[0];

            

                        if (null != chkbox && true == chkbox.checked) 

                            {

                            if (rowCount <= 1) 

                                {

                                alert("Cannot delete all the rows.");

                                break;

                                }

                

                            table.deleteRow(i);

                            rowCount--;

                            i--;

                            }



                        }

                    } catch(e) 

                        {

                        alert(e);

                        }

}



</script>

I would like to know that how can I show the value of all the elements in array "amount" in total field??

I have a webpage which has the prototype library in it as well as my own script. I just started on it, but I've already run into issues using the for... in loop. I'll admit, I'm a complete noob at javascript, so this is probably something pretty simple.
Code:

function prepareToolBar()
{
	//define toolbar tool names
	var toolbar = [
		'line',
		'circle',
		'ellipse',
		'square',
		'rectangle',
		'text'];
	
	for (var i in toolbar)
	{
		var tmp = document.createElement("p");
		tmp.appendChild(document.createTextNode(toolbar[i]));
		document.body.appendChild(tmp);
	}
}
addLoadEvent(prepareToolBar);

function addLoadEvent(func)
{
	var oldonload = window.onload;
	if (typeof oldonload != 'function')
	{
		window.onload = func;
	} else {
		window.onload = function() { oldonload(); func(); }
	}
}

Below is the output on the page from the function:
Code:

circle

ellipse

square

rectangle

text

function (iterator, context) { var index = 0; iterator = iterator.bind(context); try { this._each(function (value) {iterator(value, index++);}); } catch (e) { if (e != $break) { throw e; } } return this; }

function (number, iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var index = - number, slices = [], array = this.toArray(); while ((index += number) < array.length) { slices.push(array.slice(index, index + number)); } return slices.collect(iterator, context); }

function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result = true; this.each(function (value, index) {result = result && !!iterator(value, index);if (!result) {throw $break;}}); return result; }

function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result = false; this.each(function (value, index) {if ((result = !!iterator(value, index))) {throw $break;}}); return result; }

function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var results = []; this.each(function (value, index) {results.push(iterator(value, index));}); return results; }

function (iterator, context) { iterator = iterator.bind(context); var result; this.each(function (value, index) {if (iterator(value, index)) {result = value;throw $break;}}); return result; }

function (iterator, context) { iterator = iterator.bind(context); var results = []; this.each(function (value, index) {if (iterator(value, index)) {results.push(value);}}); return results; }

function (filter, iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var results = []; if (Object.isString(filter)) { filter = new RegExp(filter); } this.each(function (value, index) {if (filter.match(value)) {results.push(iterator(value, index));}}); return results; }

function (object) { if (Object.isFunction(this.indexOf)) { if (this.indexOf(object) != -1) { return true; } } var found = false; this.each(function (value) {if (value == object) {found = true;throw $break;}}); return found; }

function (number, fillWith) { fillWith = Object.isUndefined(fillWith) ? null : fillWith; return this.eachSlice(number, function (slice) {while (slice.length < number) {slice.push(fillWith);}return slice;}); }

function (memo, iterator, context) { iterator = iterator.bind(context); this.each(function (value, index) {memo = iterator(memo, value, index);}); return memo; }

function (method) { var args = $A(arguments).slice(1); return this.map(function (value) {return value[method].apply(value, args);}); }

function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result; this.each(function (value, index) {value = iterator(value, index);if (result == null || value >= result) {result = value;}}); return result; }

function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result; this.each(function (value, index) {value = iterator(value, index);if (result == null || value < result) {result = value;}}); return result; }

function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var trues = [], falses = []; this.each(function (value, index) {(iterator(value, index) ? trues : falses).push(value);}); return [trues, falses]; }

function (property) { var results = []; this.each(function (value) {results.push(value[property]);}); return results; }

function (iterator, context) { iterator = iterator.bind(context); var results = []; this.each(function (value, index) {if (!iterator(value, index)) {results.push(value);}}); return results; }

function (iterator, context) { iterator = iterator.bind(context); return this.map(function (value, index) {return {value: value, criteria: iterator(value, index)};}).sort(function (left, right) {var a = left.criteria, b = right.criteria;return a < b ? -1 : a > b ? 1 : 0;}).pluck("value"); }

function () { return [].concat(this); }

function () { var iterator = Prototype.K, args = $A(arguments); if (Object.isFunction(args.last())) { iterator = args.pop(); } var collections = [this].concat(args).map($A); return this.map(function (value, index) {return iterator(collections.pluck(index));}); }

function () { return this.length; }

function () { return "[" + this.map(Object.inspect).join(", ") + "]"; }

function (iterator, context) { iterator = iterator.bind(context); var result; this.each(function (value, index) {if (iterator(value, index)) {result = value;throw $break;}}); return result; }

function (iterator, context) { iterator = iterator.bind(context); var results = []; this.each(function (value, index) {if (iterator(value, index)) {results.push(value);}}); return results; }

function (object) { if (Object.isFunction(this.indexOf)) { if (this.indexOf(object) != -1) { return true; } } var found = false; this.each(function (value) {if (value == object) {found = true;throw $break;}}); return found; }

function () { return this.map(); }

function reverse() { [native code] }

function forEach() { [native code] }

function () { this.length = 0; return this; }

function () { return this[0]; }

function () { return this[this.length - 1]; }

function () { return this.select(function (value) {return value != null;}); }

function () { return this.inject([], function (array, value) {return array.concat(Object.isArray(value) ? value.flatten() : [value]);}); }

function () { var values = $A(arguments); return this.select(function (value) {return !values.include(value);}); }

function (sorted) { return this.inject([], function (array, value, index) {if (0 == index || (sorted ? array.last() != value : !array.include(value))) {array.push(value);}return array;}); }

function (array) { return this.uniq().findAll(function (item) {return array.detect(function (value) {return item === value;});}); }

function () { return [].concat(this); }

function () { var results = []; this.each(function (object) {var value = Object.toJSON(object);if (!Object.isUndefined(value)) {results.push(value);}}); return "[" + results.join(", ") + "]"; }

As you can see, it shows the 6 elements in the array that I want, but it also shows random elements.

By the way, I can fix this by changing it to a normal for loop, but I want to know what I'm doing wrong.

Hi,

I am trying to display some xml elements that are formatted like this:

Code:

<line>
<route>
<dirs>1.	Head west on Calzada Roosevelt</dirs>
<time>4.6 km - about 15 mins</time>
<dirs>2.	Continue on Carretera Interamericana/Pan American Hwy</dirs>
<time>15 km - about 12 mins</time>
<dirs>3.	Look for turnoff at San Lucas and follow signs from there</dirs>
<time>13.5 km - about 15 mins</time>
</route>
</line>

using this js:

Code:

for (var a = 0; a < lines.length; a++) {
routeInfo = lines[a].getElementsByTagName("route");
               for (var p = 0; p < routeInfo.length; p++) {
                  var time = GXml.value(routeInfo[p].getElementsByTagName("time")[0]);
                  var dirs = GXml.value(routeInfo[p].getElementsByTagName("dirs")[0]);

    way+='<b>'+dirs+'</b>'+'<br>'+time+'<br>';

("way" eventually gets passed as the text to display)

Which works OK (as you can see here if you select from Guatemala City to Antigua), but the problem is that it only shows the first set of directions, ie
Code:

<dirs>1.	Head west on Calzada Roosevelt</dirs>
<time>4.6 km - about 15 mins</time>

I can see that this is because of the [0] in the getElementsByTagName - if I change it to 1 or 2 it shows the 2nd or 3rd set of directions. But I want it to show all of them... and I thought that being in a loop it would, but I'm obviously missing something. Any ideas? Thanks in advance.

I tried the following code based on a post I saw somewhere else about summing all the elements of an array together. When I tried it though I couldn't seem to get it working. Can someone please point out what I did wrong or tell me a different way to sum array elements together? Thanks.
Code:

<script type="text/javascript">

Array.prototype.sum = function() {
for (var i = 0, L = this.length, sum = 0; i < L; sum += this[i++]);
return sum;
}

var myArray=[1,2,3,4,5];

document.write(myArray.prototype.sum);

</script>

Hi,

I got a table with hundreds of rows...and I want the user to be able to hide a single one by clicking on the table row.

How can I do this without typing in hundreds of ids like 1,2,3,4,5... Since you can't get elements by class and ids have to unique I'm not sure how to do this. Also the order of the rows will change when they get updated so it would end up being a mess of unordered ids.

Thanks.

Alright,ill go straight to the problem.

I want to get all the elements with a certain tag.However i can only get the first one.

my code:

Code:

function getTags(tag) {
var x = document.getElementsByTagName(tag);
var y = x.length;

 for(var i = 0; i <= y;i++)  {
return x[i];
     }
}

Hi all, iv'e been trying to get round this for 2 days and still nothing.

What i want to do is to be able to outline elements on a page when hovered over... simple you might think. which it is.

Then with the id of the item outlined when right clicked, and chose an option, other things happen.

The menu side is sorted, and the hover outline is sorted. But iv'e been trying to put them both together but it wont work!

This is the closest iv'e gotten, whcih runs sooooo slow.

Code:

$(document).ready(function() {
		function elementHover(){
			$("*").bind("mouseover", function(event) {
				var element = $(event.target);
				if($(element).attr("rel")!="rightClickMenu"){
					$(element).addClass('outline-element');
					if( ($(element).attr("id")!="") && (typeof $(element).attr("id") != "undefined") ){
						getElementObj($(element));
						$("[id!='" + $(element).attr("id") + "']").hover(function(){
							$("#" + $(element).attr("id")).removeClass('outline-element');
						});
					}else{
						return "";
					}
				}else{
					return "";
				}
			});
		}
		elementHover();
    });

the big problem being this
var element = $(event.target);
if i changed it to
var element = $(event.target);
alert($(element).attr("id"));

it would open the dialog box about 10 times spitting all kinds of results. Any help would be much appreciated.

What am I doing wrong here. I'm trying to generate this code into my listOfSquares UL using javascript:
Code:

<a href="#" id="square0"><li class="square"></li></a>

This is my complete code:

Code:

<html">
<head>
<title>Squares</title>
<style>

li.square {
	width: 26px; 
	height: 26px;
	border: 1px solid black;
	display: block;
	float: left;
	margin: 5px;
	background-color: #39F;	
}

div#squares {
	width: 725px;
	margin: 50px;
	background-color: #CCC;
	float: left;
}

div#form {
	width: 700px;
	text-align: center;
	clear: both;
	margin: 50px 50px 0 50px;
}

</style>
<script>
<!--
function generateSquare() {

var number = 0;
var squareID = "square" + number;
var container = document.getElementById('listOfSquares');
var linked = document.createElement('a');
linked.setAttribute('href', '#');
linked.setAttribute('id', squareID);

container.insertBefore(linked, container.firstChild);
addToElement(squareID);

}

function addToElement(elementID){
	
var new_element = document.createElement('li');
new_element.setAttribute('class', 'square');

document.getElementById(elementID).innerHTML=new_element;


}



//-->
</script>
</head>

<div id="form">
<form>
<input type="button" value="Generate Square" onclick="generateSquare()" />
</form>
</div>


<body>
<div id="squares">
  <ul id="listOfSquares">
  </ul>
</div>


</body>
</html>

Hi Folks - I have a form that has an array of input values:

<input type="text" name=txtValue[] />
<input type="text" name=txtValue[] />

I do this so I can loop through the values in php... now...that's the easy part... the hard part comes to this:

next to each of those boxes is a search button that allows the user to open up a popup window that they can search for an item, and select the item. Once they select the item it should populate that particular input box with the selected item. I can easily do this with a uniquely named input box, but can't seem to figure out how to do it with an array of input boxes... any idea?

Hi,

I have several input text boxes in a <FIELDSET> tag.

I would like to load id attributes of the <FIELDSET> tag into an array and then process the array.

My code example is below my signature.

Thank You in Advance for Your Help,

Lou

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" xml:lang="en" lang="en">

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function DisplayDetails(obj_id)
{
    alert("DisplayDetails(" + obj_id + ")");
    var form_object = new Array(document.getElementById(obj_id));
    var form_elements = form_object.elements;
    alert(form_object[0]);
}

</SCRIPT>

</HEAD>

<BODY>
<font size="4" face="Arial" color='Black'>
Hi Barney
<form>
  <fieldset id="Person1">
    <legend>Person 1:</legend>
    Name: <input type="text" id="name1" size="30" /><br />
    Email: <input type="text" id="email1" size="30" /><br />
    Date of birth: <input type="text"  id="dob1" size="10" />
  </fieldset>
</form>
</font>

<button type="button" onclick="DisplayDetails('name1')">Click Me!</button> 

</html>

I have a JavaScript function that Clears the values in all of the elements. This works fine, however, I want to modify the scriipt to clear some of the elements and leave the others alone. I seem to be having a problem getting the function to recognize the elements. (See Code).
Code:

function ClearAllControls() {
                for (i = 0; i <= document.forms[0].length; i++) {
                    doc = document.forms[0].elements[i]; 
                    //alert(doc.name + " - " + doc.type);
                    switch (doc.type) {
                        case 'text':
                            doc.value = ''; break;
                        /* switch (doc.name){
                           
                           default:doc.value = '';
                        }*/
                        case 'textarea':doc.value = ''; break;
                        case 'checkbox':doc.checked = false; break;
                        case 'select-one':
                                //doc.options[0].selected = true;
                                //alert(doc.name + " - " + doc.type);
                            switch(doc.name){
                                case 'uwtBSSignUp$_ctl0$ddlmodel':alert(doc.name + " - " + doc.type); break;
                                case 'uwtBSSignUp$_ctl0$ddlbuilding':break;
                                case 'uwtBSSignUp$_ctl0$ddlfloor'break;
                                default:doc.options[0].selected = true; break; 
                            }
                            break;
                        default:break;}
                     }
                     
                   var webTab = document.forms[0].getElementById('uwtBSSignUp');
                    if(webTab){alert('found');return;}
  

                    }

The nested switch statement is failing. The uwtBSSignUp element is a Infragistic Tab Control. I'm trying to prevent some of the controls on the tab panels not to clear. In addition the function doesn't run the alert to notify me that the tab control was recognized. If I run just the first switch statement it works and clears all of the elements. Am I using the right syntex or something?

hey everyone:

im using the following function:

Code:

function getByTag(tagName) {
      var i, results = [], nodes = document.getElementsByTagName(tagName);
      for (i = 0; i < nodes.length; i++) {
        results.push(nodes[i]);
      }
      return results;
    }

however when im trying to do this
getByTag("div").style.color = "red" nothing happens.any help?

I'm a true newbie when it comes to JavaScript. To learn the language, I've set up a project for myself, a sort of board game.

As it is, I have a series of divs, each with an image (img tag). The divs ids are "Space1", "Space2", "Space3", etc. I am trying to dynamically create child divs inside the space divs as player markers. Here is the code:

Code:

<script type="text/javascript">
	for(intA=0;intA<=10;intA++){
		var NewDiv=document.createElement("div")
		NewDiv.setAttribute("id","Space"+intA+"Player1")
		NewDiv.style.width="20px";NewDiv.style.height="20px"
		NewDiv.style.position="relative"
		NewDiv.style.left="10px";NewDiv.style.top="10px"
		NewDiv.innerHTML="1"
		NewDiv.style.backgroundColor="#333333"
		NewDiv.style.border="2px solid black"
		NewDiv.style.visibility="visible"
		NewDiv.style.zIndex="1000"
		document.getElementById("Space"+intA).appendChild(NewDiv)		
	}
</script>

The assumption is that this code should make a 20x20 gray box with a "1" in it. I've tried playing with the visibility and the z-index, but nothing is showing up. What am I doing wrong here?

Hi there,

If I have Ajax bring back a string of HTML, let's say to replace a whole <select> box, does that get registered in the DOM in such a way that I can later manipulate that element via Javascript?

It doesn't seem so.

I have a <select> box that gets inserted via Ajax but I have a script I want to use to change which <option> is selected after it is loaded in. The client doesn't seem to pick up on the <select> box when I try to call it via getElementById, etc.

I have an ASP.Net page using a JavaScript File. The function in this file that resets the values of the elements works fine. Now I need to advance this function to reset some and not reset others. I can't seem to get the function to recognize the individual elements. I've tried many different syntaxes to make it happen with no luck. Most of the elements reside in a tab control (parent). I am using a nested Switch statement and the name as returned by doc.name method. Please reveiw the code below and see what I'm doing wrong.
Code:

for (i = 0; i <= document.forms[0].length; i++) {
                    doc = document.forms[0].elements[i]; 
                    //alert(doc.name + " - " + doc.type);
                    switch (doc.type) {
                        case 'text':
                            doc.value = ''; break;
                        /* switch (doc.name){
                           
                           default:doc.value = '';
                        }*/
                        case 'textarea':doc.value = ''; break;
                        case 'checkbox':doc.checked = false; break;
                        case 'select-one':
                                //doc.options[0].selected = true;
                                //alert(doc.name + " - " + doc.type);
                            switch(doc.name){
                                case 'uwtBSSignUp_ctl0_ddlmodel':alert(doc.name + " - " + doc.type); break;
                                case 'uwtBSSignUp$_ctl0$ddlbuilding':break;
                                case 'uwtBSSignUp$_ctl0$ddlfloor'break;
                                default:doc.options[0].selected = true; break; 
                            }
                            break;
                        default:break;}
                     }