Reusable Functions

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

0
  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