Need to change select options to buttons (with JS form expand)

[richrock]

Hi all,

 

Little stuck on this (been too focused on PHP recently to start learning JS, but understand some principles).

 

I've got an existing option in a select list, for which Javascript expands the form based on what you select:

 

<select id="acctype" name="acctype" mosReq="1" mosLabel="Account Type" onChange="javascript: ShowMenu(document.getElementById('acctype').value,'divColor', 4);">
<option value=''>Select Account Type</option>
<option value='1'>Candidate</option>
<option value='2'>Employer</option>
<option value='3'>Recruiter</option>
<option value='4'>Referrer</option>
</select>

 

What I need to do (or have been requested to do, despite the fact i think it's a stupid idea) is to change the selects to buttons.

 

I tried being 'clever'  and did this:

 

<input type="button" id="acctype" name="acctype" value="Candidate" mosReq="1" mosLabel="Account Type" onclick="javascript: ShowMenu(document.getElementById('acctype').value,'divColor1', 4);" />
<input type="button" id="acctype" name="acctype" value="Employer" mosReq="1" mosLabel="Account Type" onclick="javascript: ShowMenu(document.getElementById('acctype').value,'divColor2', 4);" />
<input type="button" id="acctype" name="acctype" value="Recruiter" mosReq="1" mosLabel="Account Type" onclick="javascript: ShowMenu(document.getElementById('acctype').value,'divColor3', 4);" />
<input type="button" id="acctype" name="acctype" value="Referrer" mosReq="1" mosLabel="Account Type" onclick="javascript: ShowMenu(document.getElementById('acctype').value,'divColor4', 4);" />
    

 

But it doesn't work.  I then tried using "submit" instead of "button" and that saved the form, which was a mistake as I need to expand the form for extra options before saving.

 

Each form expansion is referenced by

 

<div id='divColor1' style="display: none; padding-top:4px;">

 

and I know it works from the select options - divColor2, 3 etc....

 

Any ideas how to get the form to expand via buttons?

[KevinM1]

Well, you could still do it with the select input.  The problem you had with that attempt was that you didn't grab the selected index of the select.  You need that value for anything to work.  Not only that, but you don't need the 'javascript:' pseudo-attribute to get it to work.  So, something like:

<script type="text/javascript">
   window.onload = function()
   {
      var accType = document.getElementById('acctype');

      accType.onchange = function()
      {
         var selIndex = this.selectedIndex;

         if(selIndex != 0) //make sure you're not trying to expand the menu with the non-value option
         {
            ShowMenu(this.options[selIndex].value, 'divColor', 4);
         }
      }
   }
</script>

<!-- ... -->

<select id="acctype" name="acctype" mosReq="1" mosLabel="Account Type">
   <option value="">Select Account Type</option>
   <option value="1">Candidate</option>
   <option value="2">Employer</option>
   <option value="3">Recruiter</option>
   <option value="4">Referrer</option>
</select>

 

If you still want to do it by buttons, then the first thing you need to remember is that an id is supposed to be unique.  It shouldn't be applied to more than one element.  That's one of the reasons why your version wasn't working - you use the same id for each button.  Also, once again, you don't need the 'javascript:' pseudo-attribute.  That should only be used if you're dealing with a link's href attribute.  So, the buttons...

<script type="text/javascript">
   window.onload = function()
   {
      /* NOTE: this code assumes that these buttons are the only buttons on your page */

      var buttons = document.getElementsByTagName('button');

      for(var i = 0; i < buttons.length; i++)
      {
         buttons[i].onclick = function()
         {
            ShowMenu(this.value, 'divColor' + (i + 1), 4);
         }
      }
   }
</script>

<!-- ... -->

<button value="Candidate" mosReq="1" mosLabel="Account Type">Candidate</button>
<button value="Employer" mosReq="1" mosLabel="Account Type">Employer</button>
<button value="Recruiter" mosReq="1" mosLabel="Account Type">Recruiter</button>
<button value="Referrer" mosReq="1" mosLabel="Account Type">Referrer</button>

 

Keep in mind that I haven't tested any of this code.  With that said, it should at least help you get on the right track.