disable Form Fields in CGI script with JavaScript 1

[max1x]

I am trying to disable a form field based on the what the user chooses in a drop down menu. I've asked on the CGI forum but was told to ask on the JAVA Script forum. I have server validation in place, but need to make sure that the client side is checked as well.

CGI CODE:

print "<tr><td>BOX:</td><td>";
print  popup_menu({-name=>'boxType',
                  -values=>['--Select--','firBox','secBox'],
                  -onChange=>"chkIt('boxType');"});
print "</td></tr>";
print "<tr><td>Box Name:</td><td>";
print textfield('boxName','',25,25);

JavaScript Code:

$jScript=<<EOF;
<script language=JavaScript>
function chkIt(choice) {
if (choice == 1 ) {
        document.theForm.boxName.disabled = true;
        }
}
</script>
EOF

Also, I get an error when the page is loaded and the user selects box type; Error:Object Expected

 

[rac2]

I am guessing this line of perlscript builds HTML for a <SELECT> menu.

print  popup_menu({-name=>'boxType',
                  -values=>['--Select--','firBox','secBox'],
                  -onChange=>"chkIt('boxType');"});

Maybe it produces this HTML.

<SELECT name="boxType" onchange="chkIt(this);">
  <OPTION value="0">--Select--</OPTION>
  <OPTION value="1">firBox</OPTION>
  <OPTION value="2">secBox</OPTION>
</SELECT>

If so then you need something like the following Javascript.

<script language="JavaScript">
function chkIt(choice) {
   if (choice.selectedIndex == 1 ) {
      document.theForm.boxType.options.remove(1);
   }
}
</script>

Regarding the Javascript issues-
I can only guess what the perlscript function popup_menu() does with the third argument, onChange=>"chkIt('boxType');"
My guess is shown in my code. I am guessing the chkIt() function is getting an object representing the form element named 'boxType'.

If so, you need to look at the property of that object which indicates which option was selected. That is the selectedIndex property. The object itself is not going to be equal to anything.

Note that the value of selectedIndex is 0 for the first option.

I dont know whether disabled is a property of an OPTION object. According to my somewhat dated reference manual it is not. There is however a method named remove() which might do the trick.

HTH

 

[max1x]

rac2, Thank you for the detailed response. The HTML code produced by the CGI script is:

<SELECT name="boxType" onchange="chkIt(boxType);">
  <OPTION value=--Select-->--Select--</OPTION>
  <OPTION value=firBox>firBox</OPTION>
  <OPTION value=secBox>secBox</OPTION>
</SELECT>

I have also tried these with no luck:

onchange=>"chkIt('boxType.selectedIndex')";
onchange=>"chkIt('theForm.boxType.selectedIndex')";


<script language="JavaScript">
function chkIt(choice) {
   if (choice.selectedIndex eq "abc" ) {
      document.theForm.boxName.options.remove(1);
   }
}
</script>

 

[max1x]

I played out and researched, which lead me to: onChange=>"chkIt(this.options[this.selectedIndex].value) and I tested it out with document.write(xxxx) and now the value is being set properly, now I'm trying to figure out how to disable the field or remove it.

 

[trollacious]

In Javascript, there is no eq operator, it's ==.

Also, the onchange event handler uses a single equals sign - =, not =>.

Lee

 

[rac2]

As trollacious states the comparsion operator for strings and numbers in Javascript is ==.

But there is more to it than that.
The value of choice.selectedIndex will be an integer between zero and the length of the array minus 1. In other words it is an array index, not the value of the selected option.

And I noticed this morning that the remove() method is only available in IE. Netscape browsers will not have that method. Instead you will need to check the browser type, found in navigator.appName, and do the following if it is a Netscape browser.

document.forms[0].boxType.options[1] = null;

Finally, you probably will be using the selectedIndex instead of a constant to specify which option array to nullify or remove.


I bet onChange=>"chkIt(this)" will also work.

 

[max1x]

I figured it out and was able to pass string values vs Numeric to the function to disable the fields, as the CGI Script was setting the value to the same as OPTION Name.

This passes value selected by user vs choice Number:

onChange=>"chkIt(this.options[this.selectedIndex].value)

This function takes the value and then enables/disables fields:

function chkIt(strng) {
var selectedValue = document.formName.elementCalled.options[formName.elementCalled.selectedIndex].value;
	if (selectedValue == "???") {
		document.formName.elementCalled.disabled=true;
			}
	if (selectedValue == "???") {
		document.formName.elementCalled.disabled=false;
                	  }
}