Output Form Dropdown to HTML Page

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Myrddin
    New Member
    • Nov 2011
    • 7

    Output Form Dropdown to HTML Page

    Hello,

    For a roleplaying fansite I am trying to give visitors a convenient way to make people add items to their game. They need to enter hexcodes for items and I'd like to help with the task.

    What i have now is a list that is basically like this:

    Code:
    <h2>Create Item Links</h2>
    <form name="frmSelect">
    <select id="Location" name="Location">
    <option value="player.placeatme">Place at Player</option>
    <option value="player.additem">Place in Inventory</option>
    </select>
    <select id="Item-ID" name="Item-ID">
    <option value="43e1e">Alessandra's Dagger</option>
    <option value="79b1d">Blade of Sacrifice</option>
    </select>
    <select id="Amount" name="Amount">
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
    </form>
    Use this code in Skyrim's Console to receive the Item:
    
    [B]player.additem 431e1 1[/B]
    Selecting the first options should give the bolded output. What I have so far is:

    Code:
    <script type="text/javascript">
    function get_skcommand()
    {
    var skcommand = document.getElementById('location').value + document.getElementById('itemid').value + document.getElementById('amount').value;
    }
    </script>
    How can I get the skcommand output to a page and dynamically update it if I change selections?

    Thanks in advance.

    Michael
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    there are several methods to output a value:
    - into a form field:
    Code:
    <input type="text" id="display" size="7" readonly>
    
    // change value
    document.getElementById("display").value = "something to display";
    - into an other element
    Code:
    <p id="display"></p>
    
    // change value
    document.getElementById("display").innerHTML = "something to display";
    to update the value you just need to call the calculating/outputting function when this event (e.g. the change event) on one of the selection occurs.

    Code:
    // using event listeners
    function helpUser(evt)
    {
        // calculate value …
        // output value …
    }
    // select being the <select> element (define beforehand)
    // repeat for every select element 
    // works in all browsers except IE < 9
    select.addEventListener("change", helpUser, true);

    Comment

    • Myrddin
      New Member
      • Nov 2011
      • 7

      #3
      Thanks a lot, I went for solution 2 and it worked!

      Code:
      <select id="location" name="location" [B]onchange='get_skcommand();'[/B]>
      and by adding

      Code:
      document.getElementById("display").innerHTML = "something to display";
      to the script above.

      You will be able to see the script in action here:



      Thanks!

      Comment

      Working...