1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Reusable Functions

Discussion in 'JavaScript' started by TheMuffin, Mar 18, 2007.

  1. #1
    Hi! How can a function be written so that it is reusable in the same form? eg, if I wish to place another select menu and result within the following code (mySelect2, mySpan2) - whichever select menu is chosen displays its own result:

    <html>
    <head>
    <script type="text/javascript">
    
    function updateForm(doit)
    {
    selected = doit.mySelect.selectedIndex;
    values = doit.mySelect.options[selected].value;
    
    document.getElementById("mySpan").innerText = values;
    }
    
    </script>
    </head>
    <body>
    <form name="myForm" id="myForm">
    <p>
    <tr><td name="48">	
    <select name="mySelect" id="mySelect" onChange="updateForm(this.form)">
    <option value="1.99">1
    <option value="3.59">2
    <option value="5.29">3
    <option value="6.99">4
    </select>
    $<span name="mySpan" id="mySpan">1.99</span
    </td></tr>	
    </form>
    </body>
    </html>
    
    PHP:

    Thanks!

    TheMuffin
     
    TheMuffin, Mar 18, 2007 IP
  2. TheMuffin

    TheMuffin Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Found the solution thanks to rwedge at codingforums.com:

    <html>
    <head>
    <script type="text/javascript">
    
    function updateForm(doit,total)
    {
    document.getElementById(total).innerText = doit.value;
    }
    
    </script>
    </head>
    <body>
    <table>
    <form name="myForm" id="myForm">
    <tr><td name="48">     
    <select name="mySelect" id="mySelect" onChange="updateForm(this,'mySpan')">
    <option value="1.99">1
    <option value="3.59">2
    <option value="5.29">3
    <option value="6.99">4
    </select>
    $<span name="mySpan" id="mySpan">1.99</span>
    </td></tr>     
    </form>
    
    <form name="myForm1" id="myForm1">
    <tr><td name="48">     
    <select name="mySelect1" id="mySelect1" onChange="updateForm(this,'mySpan1')">
    <option value="1.99">1
    <option value="3.59">2
    <option value="5.29">3
    <option value="6.99">4
    </select>
    $<span name="mySpan1" id="mySpan1">1.99</span>
    </td></tr>     
    </form>
    </table>
    
    </body>
    </html> 
    PHP:
    His explanation:


    Hope somebody else also finds it useful!

    TheMuffin
     
    TheMuffin, Mar 18, 2007 IP
  3. TheMuffin

    TheMuffin Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Ultimater at webdeveloper.com show this to be better for x-browser compatibility:

    function updateForm(doit,total)
    {
    document.getElementById(total).firstChild.data = doit.value;
    } 
    Code (markup):
    TheMuffin!
     
    TheMuffin, Mar 18, 2007 IP