JavaScript - Overlaping Javascript Elements Help

(I also posted this on stackoverflow, but haven't had any replies.)


I have a script that sends a POST to a php file, and gets a new integer (primary key). Then the script creates 3 new divs, with that ID included in them as an attribute.

Now, I need to be able to grab the ID and give it back to PHP when the user updates it. (It's currently a div, but later it will be an editable form.)

I was going to do this by creating a button in the same script that I use to create the divs, bearing the same integer and calling a function. The problem with this concept, is that I have no idea how to create a Unique variable to pass along to the function, so it knows which number to look at. Obviously, if I have only one variable that gets overwritten with each new entry - after all of the rows load, only the last row will have a variable that matches its id.

Another option is to find the value of all attributes that bear the name data-integer-question and pass its number/integer to a function, when the user does something like keyup enter. However, I have no idea how to do that.

obj.returnIntJson holds the integer that I've been talking about, which changes for each row.

rowNumberObj.qarowcontainer is just a reference for the parent div, which doesn't get edited by the user - you can ignore it.

The script gives a result like this: <div id="questioncolumn" class="questionColumnCSS" data-integer-question="701"></div>

Suggestions on how to proceed? Here's the code for one of the divs,

Thanks.

PHP Code:
    qaRowQuestion = document.createElement('div');
    qaRowQuestion.setAttribute('id', "questioncolumn");
    qaRowQuestion.setAttribute('data-integer-question', obj.returnIntJson);
    qaRowQuestion.setAttribute('class',"questionColumnCSS");

    qaRowQuestionParent = document.getElementById(rowNumberObj.qarowcontainer);
    qaRowQuestionParent.appendChild(qaRowQuestion); 

Ok so I have these Input boxes and select boxes on my form. I have them input this way:

Code:

<input type="text" name="monto[]">

So I can then parse the many that get added and removed when I submit the form, this way PHP see's them as an array.

Now I have used this in the past to cycle through my inputs to check values and such on them, but with these [] it doesn't work.

Code:

var changeCheck = document.getElementsByName('check');
	for(i=0; i<changeCheck.length; i++)
	{
		var enter = new Number(getEl('dueitem' + changeCheck[i].value));
		
		if(changeCheck[i].checked == true) {
			final = enter + final;
		}
	}

Is there a way to cycle all these elements when they are as []. Even if it's cycle them by name, though I never had a determined amount I always have the same names for the 12 different fields there are.

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.

Ok so I have these elements on my page:

Code:

<input type="text" size="5" name="val[]" value="'.$NotaMaxima.'">

I want to loop through each one and take their number add it to another number set in a variable elsewhere and then alert that number.

The amount of these elements on the page changes constantly, so I can't count on that. It has to loop through each one to find the values. I tried this:

Code:

var els,i,asig;
 els=document.getElementsByTagName('val');
 for(i in els) {
   asig = parseInt(els[i].value) - parseInt(asig);
 }
alert(asig);

But no go, any ideas?

Hi

I wanted to create multiple check box and once check box is clicked user should able to enter text and submit

so i created this but when check box toggle it keep creating text areas.
i wanted to create 1 text area per one check box

also i need to store each text area value to data base. how can i correct this to achieve my needs

PHP Code:
<script type="text/javascript">
function validate(chk){
  if (chk.checked == 1){

var htmlText =  "<textarea name='area' cols='40' rows='5'></textarea>";
        var newElement = document.createElement('div');
        newElement.id = 'text'; 
     newElement.innerHTML = htmlText;
             var fieldsArea = document.getElementById('text');
    fieldsArea.appendChild(newElement);
  }else
  {}

}
</script>
<form>
<label>option1
<input type=checkbox name=chk1 onclick="return validate(chk1);"></label>
<label>option2
<input type=checkbox name=chk2 onclick="return validate(chk2);"></label>
</form>
<div id="text"></div> 



Sorry for the language errors

Regards.

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 There

I am trying to create some ajax/javascript to append the scriptaculous Draggable to a number of div elements with a className of draggable. The problem is i need to get the id's of each element to make them draggable, as simply making all div elements on the page draggable would effect other elements on the page which I dont want to be so.

I need to:-
1.create a collection of div elements with className - draggable
2. make a list of all the element id's
3. make all elements with said id's draggable

I have left out the draggable part from the code, I have simply been trying to get the element id's to display so far



Code:

var dv;
var dh;

dv = document.getElementsByTagName('div');
if (dv.className == 'draggable')
{
for (var i = 0; i <= dv.length; i++)
{
dh = dv[i].getAttribute('id');
for (var j = 0; j <= dh.length;j++)
{
document.getElementById('content').innerHTML = dh[j].getAttribute('id');
}
}
}
else
{
alert ("no id");
}

I keep getting the alert message "no id" loaded

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 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.

Im working on a function where i need to return the active elements ID.
the element will have class="main" id="1" onmouseover="showSub()">

Would someone be able to write me a simple function which simply puts the elements ID number in an alert box? I can figure out the rest i need from that .

Thanks, Tom

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 put this at the end of my code thinking that after the div displays (id = 'link_container') I can eliminate (id = 'link_container') from memory when the script ends so there's a place for another div (id = 'link_container') when/if there's onkeyup event.

Wouldn't this little script remove any element with an id = 'link_container' ?

<script type="text/javascript">
var deleteDiv = document.getElementById('link_container');
document.body.removeChild(deleteDiv);
</script>

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>

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];
     }
}