Jump to content

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


richrock

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.