Page 1 of 1

"Out of memory" error in javascript!?

Posted: Tue Jul 15, 2003 12:45 pm
by liljester
here is my code.... when you ckeck the "Iris" radio button it should disable the "Date" radio button and hide the Date Options if they are visible.... clicking on the other buttons will also run checks to make sure everything is how it should be...

i get a JS error when i click on the "Iris" radio button, error is as follows:
"A Runtime Error Has Occured.
Do yo wish to debug?

Line: 14
Error: Out of memory"

Code: Select all

<HTML>

<HEAD>
<TITLE>Search</TITLE>
<script language="javascript">
function check_date()
&#123;
	if(document.getElementById("date_radio").checked == true) &#123; document.getElementById("date_row").style.display = "inline"; old_search = document.getElementById("search_box").value; document.getElementById("search_box").value = "MM-DD-YYYY" &#125;
	else &#123; document.getElementById("date_row").style.display = "none"; if(document.getElementById("search_box").value == "MM-DD-YYYY") &#123; document.getElementById("search_box").value = old_search; &#125; &#125;
&#125;
function check_test()
&#123;
	if(document.getElementById("iris_test").checked == true)
	&#123;
		document.getElementById("date_radio").checked = false;
		document.getElementById("ssn_radio").checked = true;
		document.getElementById("date_radio").disabled = true;
		check_test();
	&#125;
	else &#123; document.getElementById("date_radio").disabled = false; &#125;
&#125;
</script>
</HEAD>
<BODY>
			<TABLE BORDER="1" BORDERCOLOR="#000000" CELLPADDING="2" CELLSPACING="0" ALIGN="center" CLASS="default_text" STYLE="border-collapse: collapse;">
				<FORM ACTION="search.php" METHOD="POST">
				<TR BGCOLOR="#ECE9D8">
					<TD>
						<B>Search</B>
					</TD>
				</TR>
				<TR>
					<TD VALIGN="top" ALIGN="right">
						<INPUT TYPE="text" NAME="search_string" ID="search_box" CLASS="input_box" STYLE="width: 250px;" VALUE="447" SIZE="20">
						<INPUT TYPE="submit" NAME="action" VALUE="Search" CLASS="input_button">
					</TD>
				</TR>						
				<TR>
					<TD VALIGN="top" ALIGN="left">Test:
						<INPUT TYPE="radio" NAME="test_type" VALUE="tabe" ID="tabe_test" onClick="check_test();" CHECKED>Tabe&nbsp;&nbsp;
						<INPUT TYPE="radio" NAME="test_type" VALUE="iris" ID="iris_test" onClick="check_test();" >Iris&nbsp;&nbsp;
					</TD>
				</TR>
				<TR>
					<TD VALIGN="top" ALIGN="left">Type:
						<INPUT TYPE="radio" NAME="search_type" VALUE="ssn" ID="ssn_radio" onClick="check_date();" CHECKED>SSN&nbsp;&nbsp;
						<INPUT TYPE="radio" NAME="search_type" VALUE="name" ID="name_radio" onClick="check_date();" >Name&nbsp;&nbsp;
						<INPUT TYPE="radio" NAME="search_type" VALUE="date" ID="date_radio" onClick="check_date();" >Date&nbsp;&nbsp;
					</TD>
				</TR>
				<TR ID="date_row" style="display: none;">
					<TD VALIGN="top" ALIGN="center">Date options:
						<INPUT TYPE="radio" NAME="date_type" VALUE="before" CHECKED>Before&nbsp;&nbsp;
						<INPUT TYPE="radio" NAME="date_type" VALUE="after" >After&nbsp;&nbsp;
					</TD>
				</TR>
				</FORM>
			</TABLE>

</BODY>

</HTML>

Posted: Tue Jul 15, 2003 1:12 pm
by m@ndio
what browser are you using?

Posted: Tue Jul 15, 2003 2:06 pm
by furrycod
You're doing what is called a recursive function--one that calls itself. However, it never "bottoms out". Hence the memory problem. Remove the call to the function "check_test" from within the body of "check_test" and it won't cause this error--but it may not work as intended, either.

Here's another way to do it
(Notice the passing of the "this" variable. It contains a reference to the element that fired the event that you connected your function call to.):

Code: Select all

<HTML>

<HEAD>
<TITLE>Search</TITLE>
<script language="javascript">
var old_search = "";
function check_date2(el)
&#123;
   var ssn = document.getElementById('ssn_radio');
   var nm = document.getElementById('name_radio');
   var dt_row = document.getElementById('date_row');
   var search = document.getElementById('search_box');

   if (el) &#123;
      dt_row.style.display = "inline";
      old_search = search.value;
      search.value = "MM-DD-YYYY";
   &#125; else &#123;
      dt_row.style.display = "none";
      if (search.value == "MM-DD-YYYY")&#123;
         search.value = old_search;
      &#125;
   &#125;
&#125;

function check_test2(el)&#123;
   var ssn = document.getElementById('ssn_radio');
   var dt = document.getElementById('date_radio');

   if (el)&#123;
      // must be the iris one
      ssn.checked = true;  // will automatically uncheck other radio button
      dt.disabled = true;
      check_date2();  // run our date code
   &#125; else &#123;
      // must be the tabe one
      dt.disabled = false;
   &#125;
&#125;

</script>
</HEAD>
<BODY>
         <TABLE BORDER="1" BORDERCOLOR="#000000" CELLPADDING="2" CELLSPACING="0" ALIGN="center" CLASS="default_text" STYLE="border-collapse: collapse;">
            <FORM ACTION="search.php" METHOD="POST">
            <TR BGCOLOR="#ECE9D8">
               <TD>
                  <B>Search</B>
               </TD>
            </TR>
            <TR>
               <TD VALIGN="top" ALIGN="right">
                  <INPUT TYPE="text" NAME="search_string" ID="search_box" CLASS="input_box" STYLE="width: 250px;" VALUE="447" SIZE="20">
                  <INPUT TYPE="submit" NAME="action" VALUE="Search" CLASS="input_button">
               </TD>
            </TR>
            <TR>
               <TD VALIGN="top" ALIGN="left">Test:
                  <INPUT TYPE="radio" NAME="test_type" VALUE="tabe" ID="tabe_test" onClick="check_test2();" CHECKED>Tabe
                  <INPUT TYPE="radio" NAME="test_type" VALUE="iris" ID="iris_test" onClick="check_test2(this);" >Iris
               </TD>
            </TR>
            <TR>
               <TD VALIGN="top" ALIGN="left">Type:
                  <INPUT TYPE="radio" NAME="search_type" VALUE="ssn" ID="ssn_radio" onClick="check_date2();" CHECKED>SSN
                  <INPUT TYPE="radio" NAME="search_type" VALUE="name" ID="name_radio" onClick="check_date2();" >Name
                  <INPUT TYPE="radio" NAME="search_type" VALUE="date" ID="date_radio" onClick="check_date2(this);" >Date
               </TD>
            </TR>
            <TR ID="date_row" style="display: none;">
               <TD VALIGN="top" ALIGN="center">Date options:
                  <INPUT TYPE="radio" NAME="date_type" VALUE="before" CHECKED>Before
                  <INPUT TYPE="radio" NAME="date_type" VALUE="after" >After
               </TD>
            </TR>
            </FORM>
         </TABLE>

</BODY>

</HTML>
Hope that helps!