SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Reusable Functions

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

    PHP Code:
    <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> 

    Thanks!

    TheMuffin

  2. #2
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found the solution thanks to rwedge at codingforums.com:

    PHP Code:
    <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> 
    His explanation:

    You could pass the target span as an argument and you can pass the select value

    Hope somebody else also finds it useful!

    TheMuffin

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ultimater at webdeveloper.com showed this to be better for x-browser compatibility:

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

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi TheMuffin, Welcome to SPF!

    Thanks very much for the follow-up


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •