468,550 Members | 2,429 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,550 developers. It's quick & easy.

Javascript form dropdown to display different selections

Hello,

For a fansite I am trying to implement an easy way to find id's for items.

Basically I want the dropdownfields, here named itemsid,axesid to appear depending on the selection on the itemtype dropdown. Initially itemsid, axeside should be hidden.

Expand|Select|Wrap|Line Numbers
  1. <form name="frmSelect">
  2. <select id="itemtype">
  3.     <option value="itemsid">Items</option>
  4.     <option value="axesid">Axe</option>
  5. </select>
  6. <p id="type-display">none selected</p>
  7. <select id="itemsid" name="itemsid">
  8.     <option value="" selected="selected"></option>
  9.     <option value="f">Gold</option>
  10. </select>
  11. <select id="axesid" name="axesid">
  12.     <option value="" selected="selected"></option>
  13.     <option value="2c672">Ancient Nord War Axe</option>
  14. </select>
  15. </form>
  16.  
Sadly this is all I have at the moment since I am, at most, an apprentice to javascript.
I tried looking at webexamples, but I understand too little of Javascript to adapt it to my needs or haven't found the "right" place for it. The stuff I work on atm looks like this.
Any help would be appreciated, thanks.
Nov 17 '11 #1
5 5041
Expand|Select|Wrap|Line Numbers
  1. <h2 style="margin-top:180px;">Create Item Links</h2>
  2. <script type="text/javascript">
  3. function getskcode() {
  4.     var skcommand = "\"player.additem " + document.getElementById(document.getElementById('itemtype').value).value + " " + document.getElementById('amount').value + "\" or: \"player.placeatme " + document.getElementById(document.getElementById('itemtype').value).value + " " + document.getElementById('amount').value + "\" to place the object at your feet";
  5.     document.getElementById("display").innerHTML = skcommand;
  6. }
  7. function itemtype() {
  8.     var i=1;
  9.     for (i=1;i<=18;i++)
  10.     {
  11.         obj1 = document.getElementById("i");
  12.         obj.style.visibility = 'hidden';
  13.     }
  14.     obj2 = document.getElementById('itemtype').value;
  15.     document.getElementById(obj2).style.visibility = 'visible';
  16. }
  17. </script>
  18. Once more this tool is work in progress!
  19. <form name="frmSelect">
  20. Select a category: <select id="itemtype" onchange='itemtype();'>
  21.     <option value="1">Items</option>
  22.     <option value="2">Axe</option>
  23.     <option value="3">Battleaxe</option>
  24. </select>
  25. Select an item: <select id="1" name="1" onchange='getskcode();'>
  26.     <option value="" selected="selected"></option>
  27.     <option value="f">Gold</option>
  28.     <option value="a">Lockpick</option>
  29. </select>
  30. <select id="2" name="2" onchange='getskcode();'>
  31.     <option value="" selected="selected"></option>
  32.     <option value="2c672">Ancient Nord War Axe</option>
  33.     <option value="8adfb">Ceremonial Axe</option>
  34. </select>
  35. <select id="3" name="3" onchange='getskcode();'>
  36.     <option value="" selected="selected"></option>
  37.     <option value="1cb64">Ancient Nord Battle Axe</option>
  38.     <option value="139b4">Daedric Battleaxe</option>
  39. </select>
  40. <br />
  41. Select the number of items: <select id="amount" name="amount" onchange='getskcode();'>
  42.     <option value="[amount]" selected="selected"></option>
  43.     <option value="1">1</option>
  44.     <option value="2">2</option>
  45.     <option value="3">3</option>
  46.  
  47. </select>
  48. </label>
  49. </form>
  50. Use this code in Skyrim's Console to receive the Item:
  51. <p style="margin:15px 15px 30px 15px;" id="display">Use the dropdown menu to display some console commands here</p>
  52. <p>Special thanks to <a href="http://bytes.com/profile/196795/dormilich/" target="_blank">Dormilich at bytes.com</a> for help with the script!</p>
  53.  
Here is the script as excerpt - whole thing. The idea is, to simply hide everything and then display the one that is active.

Getskcode(); is simply the display of the selected boxes and is working properly

Thanks in advance.
Nov 18 '11 #2
The script works now, in a way ... however it does not add or remove the fields when the main selection drop down menu is being changed, I added the same command to another trigger and it works there without an issue.

Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2. function getskcode() {
  3.     var skcommand = "player.additem " + document.getElementById(document.getElementById('itemcat').value).value + " " + document.getElementById('amount').value + "<br /><br /> or: <br /><br />player.placeatme " + document.getElementById(document.getElementById('itemcat').value).value + " " + document.getElementById('amount').value;
  4.     document.getElementById("display").innerHTML = skcommand;
  5. }
  6. function itemcat() {
  7.     var i=1;
  8.     for (i=1;i<=28;i++)
  9.     {
  10.         document.getElementById('dd'+i).style.display="none";
  11.     }
  12.     i = document.getElementById('itemcat').value;
  13.     document.getElementById('dd'+i).style.display="inline";
  14. }
  15. </script>
  16. <select id="itemcat" onchange='itemcat()'>
  17.     <option value="1">Items</option>
  18.     <option value="2">Axes</option>
  19. </select>
  20. <span id="dd1">
  21.     <select id="1" name="1" onchange='getskcode()'>
  22.         <option value="" selected="selected"></option>
  23.         <option value="f">Gold</option>
  24.         <option value="a">Lockpick</option>
  25.         <option value="39be5">Ultimate Healing Potion</option>
  26.     </select>
  27. </span>
  28. <span id="dd2" style="display:none;">
  29.     <select id="2" name="2" onchange='getskcode()'>
  30.         <option value="" selected="selected"></option>
  31.         <option value="2c672">Ancient Nord War Axe</option>
  32.         <option value="8adfb">Ceremonial Axe</option>
  33.     </select>
  34. </span>
  35. <select id="amount" name="amount" onchange='getskcode()'>
  36.     <option value="[amount]" selected="selected"></option>
  37.     <option value="1">1</option>
  38.     <option value="2">2</option>
  39. </select>
  40. <span onclick="itemcat()" class="button">Update</span>
  41. <p style="margin:15px 15px 30px 15px;" id="display">Use the dropdown menu to display some console commands here</p>
  42.  
The html works so far, just when I copy and paste the code into wordpress the dropdown fields do not appear. Any suggestions?

Thanks in advance
Nov 18 '11 #3
One of the Issues turned out to be Wordpress autoformat, I used a plugin called "PS Disable Auto Formatting" and then the autoformat no longer placed <p> and <br /> senseless into the javascript part and it no longer destroyed the spans.

The issue with the function

Expand|Select|Wrap|Line Numbers
  1. <select id="itemcat" onchange='itemcat()'>
Which is not working for some reason. I'd like some input with that. Thanks in advance.
Nov 18 '11 #4
acoder
16,027 Expert Mod 8TB
Do you get any error messages?

What I would suggest is that you rename either the function itemcat() or the ID "itemcat" to something else. Perhaps there is a naming conflict.
Nov 21 '11 #5
Thanks, indeed that seemed to be the issue. Thanks!
Nov 21 '11 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

72 posts views Thread by Stephen Poley | last post: by
1 post views Thread by abracad | last post: by
reply views Thread by Nina | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.