call to javascript function not working - HELP!!

[barbs75]

Hey guys,

 

I have a javascript function which is cloning fields on a php form that i have on my site, this function is as follows:

 

<script type="text/javascript">
/*<![CDATA[*/
function create_fields(nr,roomType){
alert(roomType);
var root=document.getElementById(roomType);
var allB=[], allD=root.getElementsByTagName('div'), i=0, d;
// set the collection of the elements with className=inputfield
while(d=allD[i++]){
	d.className=='inputfield'?allB[allB.length]=d:null;
}
//removes all the elements, except the first
for(var j=allB.length-1;j>=1;j--){
	allB[j].parentNode.removeChild(allB[j]);
}
if(nr==1){return}//stops if a single bedroom is selected 
var clone;//the clone
var tags={'label':['for'],'input':['id','name'],'textarea':['id','name'],'p':[null]}
var obj, o, m, a, c;
for(var k=2;k<nr+1;k++){
	clone=allB[0].cloneNode(true);
	for(p in tags){
	obj=clone.getElementsByTagName(p);m=0;
	while(o=obj[m++]){
		for(var q=0;q<tags[p].length;q++){
			if(p=='p'&&o.className=='largeblack'){
				c=o.getElementsByTagName('strong')[0].firstChild;
				c.nodeValue=c.nodeValue.replace(/_1/,'_'+k);
			}
			else if(p!='p'){
				a=o.getAttribute(tags[p][q]);
				o.setAttribute(tags[p][q],a.replace(/1/,k));
			}
		}
	}
	}
	root.appendChild(clone);
}
}
/*]]>*/
</script>

 

What i am trying to do is call this function within my page, which is shown below:

 

<SCRIPT LANGUAGE='javascript'>
create_fields('3','bedrooms');
</SCRIPT>

 

 

What the function does is clone my bedroom field, the code of which is shown below:

 

 

<div class="inputfield">
                        <p class="largeblack"><strong>Bedroom_1</strong></p>
                            <div class="dimensions">
                            	<label class="room" for="bedrooms[1][]">Dimensions:<br/>
                                	<span class="textSmallGreen">(in feet)</span>
                                </label>
                            	<input class="open" name="bedrooms[1][]" id="bedrooms[1][]" type="text" size="5" value="" /> x <input class="open" name="bedrooms[1][]" id="bedrooms[1][]" type="text" size="5" value="" />
                            </div>
                            <div class="descriptionHolder">
                            	<label class="room" style="width:90px;" for="bedrooms[1][]">Description:<br/>
                                	<span class="textSmallGreen">(max. 100 words)</span>
                                </label>
                            	<textarea class="open" name="bedrooms[1][]" id="bedrooms[1][]" size="100" cols="35" rows="5">Enter your description here.....
                            	</textarea>
                            </div>	
                       </div>
                       </div>

 

 

It then finds the 'bedrooms' div and places the cloned html into that div. When the script is run though, it doesn't do anything. I have placed alerts within the javascript function to test if it is actually calling the function, and it is.

 

I really can't figure out where i am going wrong, can anyone help me out? see where i could be going wrong?

 

cheers guys, appreciate it

 

Craig

 

[lemmin]

That seems really complicated to duplicate a field. Aren't you just trying to do something like this?

<form>
<div id="roomsDiv">
<div>Room: <input type="text" name="rooms[]"></div>
</div>
<button onclick="roomsDiv.innerHTML+= '<div>' + roomsDiv.children(0).innerHTML + '</div>';">Add a room</button>
</form>

 

Does your code give an error at all?

[barbs75]

Hey lemmin,

 

cheers for getting back to me.

 

Well, i used that clone script from someone else on another forum, it does seem rather complex i must admit!!

 

But it worked rather well, and i'm not too skilled javaScript yet, so i left it as that.....

 

I do not get an error when the script is run, the alerts pop up, so the function is being called, but nothing is happening.

 

It might not be finding the 'bedrooms' div correctly i feel, so it might be doing all the code, but can't find the div to place it in?!?!

 

cheers

 

Craig

[lemmin]

Maybe you didn't post the code with it, but I don't see any divs with the id of 'bedrooms'. That would mean that 'root' would be undefined in the javascript, but I would expect that to give an error when you try the root.appendChild(clone) part.

 

Try giving the div you want this stuff in an id="bedrooms" property.

[barbs75]

Hi,

 

Yes, i didn't post all my code, just the code related to the problem really. I do have a div called bedrooms!

 

i do actually have the code working in another instance, on the same page, where it is activated when a user selects number of bedrooms from a drop down box. This then generates the number of bedrooms needed.

 

What i'm trying to do is have a 'edit property' function, where the user can go through the steps again and edit the property they had entered. So trying to make all the data appear when they go to the page, hence trying to run this script......do you get me?!? hope its all clear

 

can anyone spot any other errors anywhere?

 

cheers

 

Craig

[lemmin]

I don't know why, but if you call a function without it going through an event, it won't display any errors that are generated. To debug your code, comment out your call:

<SCRIPT LANGUAGE='javascript'>
//create_fields('3','bedrooms');
</SCRIPT>

 

and add something in the body to call the function:

<button onclick="create_fields('3','bedrooms');">test</button>

 

If you get an error that way, let me know what they are.

[barbs75]

Hey Lemmin,

 

I did what you said, and it actually works fine when it is assigned to a button....

 

So is there anyway that i can make the function work properly with assigning it to a button event?

 

Like can you get the script to run when the page is loaded?

 

like 'onBodyLoad'?

 

cheers

 

Craig

[lemmin]

Yep, just put the onload event in the body tag.

<body onload="create_fields('3','bedrooms');">

[barbs75]

Hey lemmin,

 

thanks for your reply...again!!

 

the body onload function worked well. However, what i'm trying to do now, is when the fields are generated, i want to be able to autofill the input fields in with data from database using mysql.....

 

so i have a js function in the head of my page called autofill(), which is shown as follows:

 

function autofill(width,height,description) {
 document.forms.namedItem('upload_stage2').elements.namedItem('bedroom[1][]').value = width;
 document.forms.namedItem('upload_stage2').elements.namedItem('bedroom[1][]').value = length;
 document.forms.namedItem('upload_stage2').elements.namedItem('bedroom[1][]').value = description;
}

 

So i call the js function after the create_fields() function, giving the width, height, and description of each of my rooms as parameters which the function can read in.

 

so then for each room, the fields are generated, and then filled in from mysql data. So what i tried to do was put a php while loop on the body onload tag, and then call the javascript functions. Now, i don't have great knowledge of js, but i have called a javascript function from a php echo script before, and i also researched this, and it can be done.

 

So this is what i came up with:

<body onload="<?php 
			while($bedroom_data = mysql_fetch_array($query_bed)){
				echo "<SCRIPT LANGUAGE='javascript'>create_fields('1','bedrooms');autofill(".$bedroom_data['room_width'].",".$bedroom_data['room_length'].",".$bedroom_data['description'].");</SCRIPT>";
			}
		    echo '">';?>

 

and of course, it doesn't execute. However i did look at my source code, and it shows the script being called, and with the parameters in there. But it isn't doing anything on screen. I have been looking at the code for a long while now, but can't seem to see where i'm going wrong.

 

Can you helpme with this? or should i post it as a new topic??

 

cheers in advance, thanks for helping me out thus far

 

Craig

[lemmin]

setting an event equal to something implies Javascript, but to specify the language in an event like that you can do this:

<body onload="Javascript:alert('js code here');">

Your code is putting tags inside of tags, which doesn't work. It might work like this:

<body onload="create_fields('1','bedrooms');<?php
while($bedroom_data = mysql_fetch_array($query_bed)){
echo "autofill(".$bedroom_data['room_width'].",".$bedroom_data['room_length'].",".$bedroom_data['description'].");";
}?>
">

I took create_fields() out of the loop since you were calling it with the same parameters multiple times. If that is what you want you can put it back in the loop, but it didn't make sense to me.

[barbs75]

hey lemmin,

 

Tried the code, and it didn't work unfortunately!!

 

Tried changing it around etc, but it doesn't work...i really don't see why it wouldn't though?

 

do you not have to echo the '<SCRIPT LANGUAGE='javascript'></SCRIPT>' tags when calling a function within php?

 

is that why it may not be working?

 

cheers

 

Craig

[lemmin]

Can you show me what this code generates as HTML when you do view source on the page?

[barbs75]

hey,

 

yeah, this is what it generates:

 

<body onload="create_fields('4','bedrooms');autofill(178,414,Enter your description here.....
                            	);autofill(556,889,Enter your description here.....
                            	);">

 

cheers

 

Craig

[lemmin]

Ok, try it like this, then:

<body onload="create_fields('1','bedrooms');<?php
while($bedroom_data = mysql_fetch_array($query_bed)){
echo "autofill(".$bedroom_data['room_width'].",".$bedroom_data['room_length'].",'".$bedroom_data['description']."');";
}?>
">

 

I put single quotes in the echo around the description.

[barbs75]

hey,

 

That disn't work either!! really puzzled by this!

 

i tried putting single quotations round all the variables in the echo statement as well, beed fiddling around with it for a little while and get it to work, but the source code suggests that it is working, but then nothing appears, not even the alert i put in the function to check that the function is called!!

 

still no joy..

 

really stumped

 

can there be another reason to this?!

 

cheers

 

Craig

[lemmin]

I think it is possible that the weird character at the end of your "Enter your description here..." string might be interrupting the string, but I'm not sure.

 

Do you get a "Done, but with errors on the page" status when it loads?