Member Avatar for MackAttack30

Hi forum,

This will probably be an easy one but i have a situation where i have multiple PHP/HTML <SELECT> tags. So i hold their id and name in an array. When i go to call this enableBox JavaScript function and i try to call the selectorName[] using the getElementById command, i get a null reference. How can i make this work, using the getElementById command in JavaScript to access the selectorName[] in PHP/HTML so that i can enable and disable a box depending on whether other has been selected in the dropdown selector?

PHP

for($i=0; $i<some number; $i++) {
 <SELECT name="selectorName[]" id="selectorName[]" onChange="enableBox($i)">
  <option> some value </option>
  .....
 </SELECT>
 Please Specify Other: <input type=text name="other_name[]" id="other_name[]">
}

JavaScript

function enableBox(i) {
 var selector = document.getElementById(selectorName[i]);
 var otherBox = document.getElementById(other_name[i]);

 alert(selector.value);
}
  • 2 Contributors
  • 2 Replies
  • 321 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MackAttack30
Member Avatar for Airshow

MackAttack,

What you really want is something called a "combo box" or "combobox" - Google it and you will get plenty of hits.

If you want to do your own thing then you could do something like this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
{}
</style>

<script>
function enableBox(selectElement, otherBoxName) {
  var opt = selectElement[selectElement.selectedIndex];
  var otherBox = selectElement.form[otherBoxName];
  otherBox.disabled = (opt.value === "other") ? false : true;
}
</script>
</head>

<body>

<form>
<select name="xxxx" onChange="enableBox(this, 'yyyy')">
  <option value="">Select an option</option>
  <option value="x1">some value 1</option>
  <option value="x2">some value 2</option>
  <option value="x3">some value 3</option>
  <option value="other">Other</option>
</select>
<br />
Please Specify Other: <input type=text name="yyyy" value="Default other text" disabled="true" />
</form>

</body>
</html>

As you see, there's no need for arrays of names/ids. You just need to make sure that your php builds each select tag's onChange="enableBox(this, 'yyyy')" such that yyyy matches the name of its corresponding "other" text box.

Airshow

Member Avatar for MackAttack30

Thanks Airshow,

But i ended up taking a different approach since i had to use the dropdown and text box in a more dynamic way. This allows me to check the value of each box later on in my code. Although my code my be a little more archaic, it does the job. Thanks for your help. See code below.

for($i=0; $i<some number; $i++) {
 <SELECT name="selectorName.$i" id="selectorName.$i" onChange="enableBox($i)">
  <option> some value </option>
  .....
 </SELECT>
 Please Specify Other: <input type=text name="other_name.$i" id="other_name.$i">
}
function enableBox(i) {
 var selector = document.getElementById(selectorName+i);
 var otherBox = document.getElementById(other_name+i);

 alert(selector.value);
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.