Reusable Functions

**TheMuffin** · Mar 18, 2007 15:32

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

**TheMuffin** · Mar 18, 2007 16:35

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

**TheMuffin** · Mar 18, 2007 18:26

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!

**MikeFoster** · Mar 18, 2007 21:04

Hi TheMuffin, Welcome to SPF!

Thanks very much for the follow-up

User Tag List

Thread: Reusable Functions

Thread Tools

Display

Reusable Functions

Bookmarks

Bookmarks

Posting Permissions