JavaScript - Dom Recognize Ajax Elements?

Here's my script wher problem occurs:

Code:

$.post('do/register.php?username='+('#username').value, 
	function(result) {
		if(result == 1) { $('#message').html("Everything's ok"); }
		else if(result == 2) { $('#message').html("Username is missing."); }
		else { $('#message').html("What the hell is wrong here?!"); }
	});

If i put alert(result); in function(result){ } part, i get "result" value that is '1' and that is correct value but it seems like IF statement is not recognizing it at all...

#message div constantly shows me "What the hell is wrong here?!" message...

Anyone know what could cause this problem?

Thanks in advance, phpStud.

I am working on my personal portfolio site, and am using a code that will make each portfolio piece appear in a new div when the name of the piece is clicked on. The problem is, JS does not seem to recognize double digits. I am not familiar with JS at all, I just got comfortable with CSS/HTML a few weeks ago! I am in over my head. It would really, really help if someone could show me how to change the code so that I could make about 15 to 20 divs instead of 9. Here is the code:

Code:

<script language="JavaScript">
numdivs=9

IE5=NN4=NN6=false
if(document.all)IE5=true
else if(document.layers)NN4=true
else if(document.getElementById)NN6=true

function init() {
	showDiv(0)
}
function showDiv( which ) {
	for(i=0;i<numdivs;i++) {
		if(NN4) eval("document.div"+i+".visibility='hidden'")
		if(IE5) eval("document.all.div"+i+".style.visibility='hidden'")
		if(NN6) eval("document.getElementById('div"+i+"').style.visibility='hidden'")
	}
	if(NN4) eval("document.div"+which+".visibility='visible'")
	if(IE5) eval("document.all.div"+which+".style.visibility='visible'")
	if(NN6) eval("document.getElementById('div"+which+"').style.visibility='visible'")
}
</script>

Thank you for taking the time to read this! Hopefully someone can help.

Hi there!

OK I need a little help as I'm not sure how to integrate this function into my form. First of all I should explain that my form doubles as a Google Search box. If you select the Google Search radio button it submits the input text to Google. It also defaults to Google if anything else other than "red", "green" or "blue" are entered. Now what I'd like to do is add a function so that if someone enters "purple is my favorite color" it recognizes the "purple" part of the string using something like .indexOf('purple'); and calls something like if(function==-1) { theForm.action = "Other choice "+ q.value; . How can I add this to my form? Thank you for any help.

My form code:

Code:

<script>
function convert(theForm){
  var els = theForm.getElementsByTagName('input');// store inputs
  var q = els[0], color = els[1];

  if(els[4].checked){// submit to google
    theForm.action = 'http://www.google.com/search';
    return true;
  };

  color.value = "Chosen "+ q.value +" color";
  switch(q.value){// check the query
    case 'red':
    case 'green':
    case 'blue':
      location.href = color.value;
      return false;
    break;   
    default:
      theForm.action="http://www.google.com/search";
    break;
  };
  return true;
};
</script>

<form name= "myform" onsubmit='return convert(this)'> <input name='q' type='text' /> 
<input name='color' type='hidden' /> <input type='submit' value=" Enter " />
<br />
<input name="searchType" type="radio" value="" checked="checked" > <label for="all"> My Form </label>
<input name="searchType" type="radio" value="google" onclick="document.myform.action='http://www.google.com/search';" /> 
<label for="google"> Google Search </label></form>

Hi,

I am hoping I just need to be pointed in the right direction with this.

I have Page1.

When Page1 body onloads it uses Ajax to call PartA

Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh.

So the order of events would look like this:
Page1
|
onload call
|
v
PartA
/ \
V V
PartA[1] PartA[2]
(loads once) (constantly refreshes)

What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway).

I do not want the user to have to click a button or do anything to call up PartA[2].

So my question is how would I get PartA[2] to automatically load within PartA?

I hope I have made this clear, but if I haven't let me know and I will try again.

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

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,

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.

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

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>

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>

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