PDA

View Full Version : Reusable Functions



TheMuffin
Mar 18th, 2007, 11:33 PM
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:


<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

rwedge
Mar 19th, 2007, 12:10 AM
You could pass the target span as an argument and you can pass the select value
<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>

TheMuffin
Mar 19th, 2007, 12:20 AM
Hello rwedge,

Thanks a bunch! Thats exactly what I was looking for :cool:

TheMuffin

TheMuffin
Mar 19th, 2007, 02:28 AM
Ultimater at webdeveloper.com showed this to be better for x-browser compatibility:


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

Thanks to all!!!

TheMuffin

Kor
Mar 19th, 2007, 09:01 AM
Ultimater at webdeveloper.com showed this to be better for x-browser compatibility:


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

Thanks to all!!!

TheMuffin

Yes, it is better to use DOM methods instead of non-standard IE only methods. DOM has 3 methods to write text in a textNode:

object.firstChild.data
object.firstChild.nodeValue

These 2 methods are read/write methods and, if write, they are also replacement methods, but there must be fulfilled a condition: the firstChild must exist. If the object is, say, a SPAN written like this

<span></span>

The 2 methons above will not work, as the element SPAN has no childNodes. Should have contain something, even an empty space to have a textNode as childNode:

<span>&nbsp;</span>

The 3rd method is a strict creation method, and is to be used when you create that element or when you need to create the textNode of that element (the <span></span> case, for instance):

var txt=document.createTextNode('some text');
object.appendChild(txt);

You must know that there is a 4th crossbrowser method: innerHTML. It is not a standard DOM method, but it works on all the browsers. They adopted for some reasons linked to the handling of the request answer techiques (AJAX), but for simple replacements is can be used (but I would use it as seldom as I could :-) )