JavaScript question - Codewalkers

Codewalkers Forums Sponsor:

May 12th, 2003, 06:06 PM

mearnh

Join Date: Apr 2007

Posts: 30

Time spent in forums: < 1 sec
Reputation Power: 3

JavaScript question

I got this piece of javascript from someone on this forum and I forgot who it was, sorry and THANKS it has proven to be very useful......until now.

This used to work but I've transfered my code to another server and now it doesn't work, I've been told the only difference is that one of the PHP GLOBAL options has been truned off due to security risk. No biggie, but for some reason my code won't work.

Purpose - I'm trying to dynamically create an array from a select menu.

Here is the error that I get:
"Error: 'document.forms.myform.elements' is null or not an object"

I know what is happening (I think) I just don't know how to fix it. I think the value that I'm passing is getting lost some how. I tried to add some output statements to see what was happening and this is what I get for output:
IM HERE
this is el:[object]:
el length:0:
SHOW ARRAY

Its missing the addtoarray() function which is whats causing me to think that the value being passed (el) is getting lost somehow.....

Here is the javascript code:

php Code:

Original - php Code

 
<SCRIPT TYPE="TEXT/JAVASCRIPT">
 
var selected_array = new Array();
 
function build_array(el)
{
  document.write("IM HERE<BR>");
  document.write("this is el:" + el + ":<BR>");
  document.write("el length:" + el.length + ":<BR>");
  
  for (var i = 0; i < el.length; i++) 
  {
    var val = el[i].value;
 
    if (el[i].selected)
    {
      addtoarray(val);
    }
    else
    {
      removefromarray(val);
    }
  }
 
  showArray(val);
}
 
function addtoarray(val)
{
  document.write("ADD TO ARRAY<BR>");   
  for (var i = 0; i < selected_array.length; i++)
  {
    if (selected_array[i] == val) return;
  }
  selected_array[i] = val;
}
 
function removefromarray(val)
{
  document.write("REMOVE FROM ARRAY<BR>");  
  for (var i = 0; i < selected_array.length; i++)
  {
    if (selected_array[i] == val)
    {
      selected_array.splice(i, 1);
      return;
    }
  }
}
 
function showArray(array)
{
  document.write("SHOW ARRAY<BR>"); 
  arraytext = "";
    for (var i=0; i < selected_array.length; i++)
    {
      if(i == 0)
        arraytext += selected_array[i];
      else
        arraytext += ":" + selected_array[i];
    }
 
  document.forms['myform'].elements['array_build'].value = arraytext;
}
 
</SCRIPT>

Here is the form that is making the function call (mixture of PHP and HTML):

php Code:

Original - php Code
<FORM NAME="myform"> <SELECT NAME="myselect" MULTIPLE="multiple" SIZE="10" ONCHANGE="build_array(this)"> <?php while ($row = $result->fetchRow($mode)) { $trimed = trim($row[0]); echo "<OPTION VALUE="$trimed">$trimed</OPTION>"; } $result->free(); ?> </SELECT> <BR> <INPUT TYPE="hidden" NAME="array_build" ><BR> <INPUT TYPE="submit" VALUE="SELECT"> <INPUT TYPE="reset" VALUE="RESET"><BR> </FORM>

 
<FORM NAME="myform">
<SELECT NAME="myselect" MULTIPLE="multiple" SIZE="10" ONCHANGE="build_array(this)">
<?php
while ($row = $result->fetchRow($mode))
{
    $trimed = trim($row[0]);
    echo "<OPTION VALUE="$trimed">$trimed</OPTION>";
}
 
$result->free();
?>
</SELECT>
<BR>
<INPUT TYPE="hidden" NAME="array_build" ><BR>
<INPUT TYPE="submit"  VALUE="SELECT">
<INPUT TYPE="reset"  VALUE="RESET"><BR>
</FORM>

anybody got any ideas????

May 12th, 2003, 08:07 PM

crisp

Join Date: Apr 2007

Location: Holland

Posts: 336

Time spent in forums: < 1 sec
Reputation Power: 3

RE: JavaScript question

looks familiar

the errormessage you are getting is not so strange concidering the debug-method you are using. By using document.write after the page is already parsed in the browser you are actually overwriting the original page, so by the time the script tries to fill the hidden field, it simply doesn't exist anymore.

I don't think the problem is in the javascript, but is indeed in the form-handling page. Because of the different setting of PHP (the register_globals setting) you will need to use the so-called superglobals to get to your GET and POST data.
In this case it means you cannot just use $array_built in your PHP script, but you need to use $_GET['array_built'] or $_POST['array_built'] (depending on wether it is a GET or a POST method form).

May 12th, 2003, 08:44 PM

mearnh

Join Date: Apr 2007

Posts: 30

Time spent in forums: < 1 sec
Reputation Power: 3

RE: JavaScript question

crisp-

YES, it should look very familuar. It helped me out tremendously. Thanks again.

I fear I need your help again.
I understand your explenations about the superglobals, but I don't even think its making it to the javascript correctly. I can't even seem to get the paramater passed to the javascript.

I added this code:

php Code:

Original - php Code
function show_props(obj, obj_name) { document.write("INSIDE SHOW PROPERTIES<BR>"); var result = ""; for (var i in obj) { result = obj_name + "." + i + " = " + obj[i] + "<BR>"; document.write(result); } return result }

 
function show_props(obj, obj_name)
{   
    document.write("INSIDE SHOW PROPERTIES<BR>");
   var result = "";
   for (var i in obj)
   {
      result = obj_name + "." + i + " = " + obj[i] + "<BR>";
      document.write(result);
   }
   return result
}

and I get back a bunch of stuff similar to this, but the interesting part is the .value object is null which means to me that it isn't even passing the parameter correctly:

php Code:

Original - php Code
INSIDE SHOW PROPERTIES el.language = el.scrollHeight = 0 el.isTextEdit = true el.currentStyle = null el.document = [object] el.onmouseup = null ... ... ... el.size = 20 el.value = el.border =

 
INSIDE SHOW PROPERTIES
el.language = 
el.scrollHeight = 0
el.isTextEdit = true
el.currentStyle = null
el.document = [object]
el.onmouseup = null
...
...
...
el.size = 20
el.value = 
el.border =

Maybe I am missing something.

Also, is there a better method for debugging? I'm certanily open to suggestions. Currently I'm using IE6 as my web browser.

TIA,
mike

May 12th, 2003, 09:15 PM

crisp

Join Date: Apr 2007

Location: Holland

Posts: 336

Time spent in forums: < 1 sec
Reputation Power: 3

RE: JavaScript question

your very first document.write already overwrites the page with everything in it.
I'd say in this case the best debugging method would be to change

<INPUT TYPE="hidden" NAME="array_build" ><BR>

into

<INPUT TYPE="text" NAME="array_build" ><BR>

so you can actually see what is written to it. Alternatively you can use alert() to display a value.
Mozilla has a built-in javascript debugger which can sometimes also be helpfull (Mozilla's javascript errormessages also make more sence).

But anyway, I just tested the code after removing the document.write's and it looks to me like it is working just fine.
Else could you maybe post the parsed HTML (using view-source from your browser)?

May 13th, 2003, 03:39 PM

mearnh

Join Date: Apr 2007

Posts: 30

Time spent in forums: < 1 sec
Reputation Power: 3

RE: JavaScript question

crisp-
I get the feeling i'm in way over my head.
Something you are telling me just isn't sinking in. I feel like I'm missing something.

OK, I have taken out the document.write statements and un-hid the array_build field in the form.

Here is the parsed HTML:

php Code:

Original - php Code

<HTML>
<HEAD>
<TITLE>select build2</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">

var selected_array = new Array();

function build_array(el)
{
//  document.write("IM HERE<BR>");
//  document.write("this is el:" + el + ":<BR>");
//  document.write("el length:" + el.length + ":<BR>");
//  show_props(el, "el");
  
  for (var i = 0; i < el.length; i++) 
  {
//  	document.write("INSIDE FOR<BR>")
    var val = el[i].value;

if (el[i].selected)
    {
      addtoarray(val);
    }
    else
    {
      removefromarray(val);
    }
  }

//  document.forms['myform'].elements['array_build'].value = selected_array.toString();

showArray(val);
}

function addtoarray(val)
{
//  document.write("ADD TO ARRAY<BR>");	
  for (var i = 0; i < selected_array.length; i++)
  {
    if (selected_array[i] == val) return;
  }
  selected_array[i] = val;
}

function showArray(array)
{
//  document.write("SHOW ARRAY<BR>");	
  arraytext = "";
    for (var i=0; i < selected_array.length; i++)
	{
	  if(i == 0)
	    arraytext += selected_array[i];
	  else
        arraytext += ":" + selected_array[i];
	}

document.forms['myform'].elements['array_build'].value = arraytext;
}

function show_props(obj, obj_name)
{	
//	document.write("INSIDE SHOW PROPERTIES<BR>");
   var result = "";
   for (var i in obj)
   {
      result = obj_name + "." + i + " = " + obj[i] + "<BR>";
      document.write(result);
   }
   return result
}

</SCRIPT>

</HEAD>
<BODY BGCOLOR="#000000" TEXT="#00e600">

<H2>Select Build(s)</H2>
<FORM NAME="myform" METHOD="get">
<SELECT NAME="myselect" MULTIPLE="multiple" SIZE="10" ONCHANGE="build_array(this)">
<OPTION VALUE="A170">A170</OPTION>
<OPTION VALUE="B170">B170</OPTION>
<OPTION VALUE="C170">C170</OPTION>
<OPTION VALUE="DQ06">DQ06</OPTION>
<OPTION VALUE="EQ06">EQ06</OPTION>
<OPTION VALUE="FOOBAR">FOOBAR</OPTION>
<OPTION VALUE="FQ06">FQ06</OPTION>
<OPTION VALUE="GQ06">GQ06</OPTION>
<OPTION VALUE="GQ06_TEST">GQ06_TEST</OPTION>
<OPTION VALUE="HQ06">HQ06</OPTION>
<OPTION VALUE="HQ06_TEST">HQ06_TEST</OPTION>
<OPTION VALUE="IQ06">IQ06</OPTION>
<OPTION VALUE="IQ06_RESEARCH">IQ06_RESEARCH</OPTION>
<OPTION VALUE="LQ06">LQ06</OPTION>
<OPTION VALUE="MQ06">MQ06</OPTION>
<OPTION VALUE="NQ06">NQ06</OPTION>
<OPTION VALUE="PQ06">PQ06</OPTION>
<OPTION VALUE="QQ06">QQ06</OPTION>
<OPTION VALUE="RQ06">RQ06</OPTION>
<OPTION VALUE="SQ06">SQ06</OPTION>
<OPTION VALUE="SoothSayer">SoothSayer</OPTION>
<OPTION VALUE="SoothSayer_test">SoothSayer_test</OPTION>
<OPTION VALUE="TQ06">TQ06</OPTION>
</SELECT>
<BR>
<INPUT TYPE="text" NAME="$_GET['array_build']" ><BR>
<INPUT TYPE="submit"  VALUE="SELECT">
<INPUT TYPE="reset"  VALUE="RESET"><BR>
</FORM>	
 
</BODY>
</HTML>

 
 
<HTML>
<HEAD>
<TITLE>select build2</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
 
var selected_array = new Array();
 
function build_array(el)
{
//  document.write("IM HERE<BR>");
//  document.write("this is el:" + el + ":<BR>");
//  document.write("el length:" + el.length + ":<BR>");
//  show_props(el, "el");
  
  for (var i = 0; i < el.length; i++) 
  {
//      document.write("INSIDE FOR<BR>")
    var val = el[i].value;
 
    if (el[i].selected)
    {
      addtoarray(val);
    }
    else
    {
      removefromarray(val);
    }
  }
 
//  document.forms['myform'].elements['array_build'].value = selected_array.toString();
 
  showArray(val);
}
 
function addtoarray(val)
{
//  document.write("ADD TO ARRAY<BR>"); 
  for (var i = 0; i < selected_array.length; i++)
  {
    if (selected_array[i] == val) return;
  }
  selected_array[i] = val;
}
 
function removefromarray(val)
{
//  document.write("REMOVE FROM ARRAY<BR>");    
  for (var i = 0; i < selected_array.length; i++)
  {
    if (selected_array[i] == val)
    {
      selected_array.splice(i, 1);
      return;
    }
  }
}
 
function showArray(array)
{
//  document.write("SHOW ARRAY<BR>");   
  arraytext = "";
    for (var i=0; i < selected_array.length; i++)
    {
      if(i == 0)
        arraytext += selected_array[i];
      else
        arraytext += ":" + selected_array[i];
    }
 
  document.forms['myform'].elements['array_build'].value = arraytext;
}
 
function show_props(obj, obj_name)
{   
//  document.write("INSIDE SHOW PROPERTIES<BR>");
   var result = "";
   for (var i in obj)
   {
      result = obj_name + "." + i + " = " + obj[i] + "<BR>";
      document.write(result);
   }
   return result
}
 
</SCRIPT>
 
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#00e600">
<!-- 
<FONT COLOR="#FFFFFF"><center><h1>SELECT BUILD2</h1></center></FONT>
-->
<H2>Select Build(s)</H2>
<FORM NAME="myform" METHOD="get">
<SELECT NAME="myselect" MULTIPLE="multiple" SIZE="10" ONCHANGE="build_array(this)">
<OPTION VALUE="A170">A170</OPTION>
<OPTION VALUE="B170">B170</OPTION>
<OPTION VALUE="C170">C170</OPTION>
<OPTION VALUE="DQ06">DQ06</OPTION>
<OPTION VALUE="EQ06">EQ06</OPTION>
<OPTION VALUE="FOOBAR">FOOBAR</OPTION>
<OPTION VALUE="FQ06">FQ06</OPTION>
<OPTION VALUE="GQ06">GQ06</OPTION>
<OPTION VALUE="GQ06_TEST">GQ06_TEST</OPTION>
<OPTION VALUE="HQ06">HQ06</OPTION>
<OPTION VALUE="HQ06_TEST">HQ06_TEST</OPTION>
<OPTION VALUE="IQ06">IQ06</OPTION>
<OPTION VALUE="IQ06_RESEARCH">IQ06_RESEARCH</OPTION>
<OPTION VALUE="LQ06">LQ06</OPTION>
<OPTION VALUE="MQ06">MQ06</OPTION>
<OPTION VALUE="NQ06">NQ06</OPTION>
<OPTION VALUE="PQ06">PQ06</OPTION>
<OPTION VALUE="QQ06">QQ06</OPTION>
<OPTION VALUE="RQ06">RQ06</OPTION>
<OPTION VALUE="SQ06">SQ06</OPTION>
<OPTION VALUE="SoothSayer">SoothSayer</OPTION>
<OPTION VALUE="SoothSayer_test">SoothSayer_test</OPTION>
<OPTION VALUE="TQ06">TQ06</OPTION>
</SELECT>
<BR>
<INPUT TYPE="text" NAME="$_GET['array_build']" ><BR>
<INPUT TYPE="submit"  VALUE="SELECT">
<INPUT TYPE="reset"  VALUE="RESET"><BR>
</FORM> 
 
</BODY>
</HTML>

The more I sit here an think about this the more I get confused....OK, I could see where the JS code is working fine, its just not accessing/recegnizing the array_build element in the form in order to set its value. Have I started down the right path...

mike

May 13th, 2003, 07:15 PM

crisp

Join Date: Apr 2007

Location: Holland

Posts: 336

Time spent in forums: < 1 sec
Reputation Power: 3

RE: JavaScript question

Now I spot the problem right away:

<INPUT TYPE="text" NAME="$_GET['array_build']" >

this should be:

<INPUT TYPE="text" NAME="array_build">

(remember that HTML is not PHP ;) )

May 14th, 2003, 01:56 PM

mearnh

Join Date: Apr 2007

Posts: 30

Time spent in forums: < 1 sec
Reputation Power: 3

RE: JavaScript question

!HA!

CRISP-
I owe you one yet again.
That fixed it.
Now that I sit down and think about it, and look at the error, It suddenly becomes very clear to me now.

Thanks for you help.
I hope that someday I can repay you.
mike

May 14th, 2003, 06:41 PM

crisp

Join Date: Apr 2007

Location: Holland

Posts: 336

Time spent in forums: < 1 sec
Reputation Power: 3

RE: RE: JavaScript question

Quote:

no problem; just try helping others like I do and one day we'll all be better programmers

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: