Multiple call to javascript function: how to do?

Status
Not open for further replies.

Sridhar_Rao

In the zone
I have a form with a set of elements that repeat but with different names & ids. I use javascript validation on these elements. It is fine when I have only one set but when there are multiple sets, repeating the javascript code for each of them is a stupid idea. How can this be accomplished with a single instance of code being used for several sets of elements.

Code:
<script language="javascript">
function disp(){
	document.getElementById('t1').value = document.getElementById('s1').value;
}
</script>

Code:
<form name="abc">
<select name="s1" id="s1" onchange="disp();">
<option value="ABC">ABC</option>
<option value="CDE">CDE</option>
<option value="EFG">EFG</option>
</select>
<textarea readonly rows="2"  cols="50" name="t1" id="t1"></textarea>
</form>

This is simple. Assume, I have the same form with additional elements like this:
Code:
<form name="abc">
<select name="s1" id="s1" onchange="disp();">
<option value="ABC">ABC</option>
<option value="CDE">CDE</option>
<option value="EFG">EFG</option>
</select>
<textarea readonly rows="2"  cols="50" name="t1" id="t1"></textarea>

<select name="s2" id="s2" onchange="disp();">
<option value="ABC">ABC</option>
<option value="CDE">CDE</option>
<option value="EFG">EFG</option>
</select>
<textarea readonly rows="2"  cols="50" name="t2" id="t2"></textarea>

<select name="s3" id="s3" onchange="disp();">
<option value="ABC">ABC</option>
<option value="CDE">CDE</option>
<option value="EFG">EFG</option>
</select>
<textarea readonly rows="2"  cols="50" name="t3" id="t3"></textarea>
</form>

This is a stripped down and altered version of the form. Actual form is more complex and more elements and subfunctions.
I have a vague idea about this being achieved by using "this" reference, any help?
 

Bandu

Journeyman
I had replied to this earlier, but seems like some problem with the forum s/w.

Trying to reproduce it again here:

~~~~
If you follow a consistent nomenclature for your selects (like s followed by a number) and similar one for the textarea objects (like t followed by the same numeral as its corresponding s object), then this might work for you:

Code:
<script language="javascript">
function disp(sParam)
{
	var num = sParam.id.substring(1, sParam.id.length);
	document.getElementById('t'+num).value = sParam.value;
}
</script>
<form name="abc">
<select name="s1" id="s1" onchange="disp(s1);">
<option value="ABC">ABC</option>
<option value="CDE">CDE</option>
<option value="EFG">EFG</option>
</select>
<textarea readonly rows="2"  cols="50" name="t1" id="t1"></textarea><BR>

<select name="s2" id="s2" onchange="disp(s2);">
<option value="ABC">ABC</option>
<option value="CDE">CDE</option>
<option value="EFG">EFG</option>
</select>
<textarea readonly rows="2"  cols="50" name="t2" id="t2"></textarea><BR>

<select name="s3" id="s3" onchange="disp(s3);">
<option value="ABC">ABC</option>
<option value="CDE">CDE</option>
<option value="EFG">EFG</option>
</select>
<textarea readonly rows="2"  cols="50" name="t3" id="t3"></textarea><BR>
</form>
~~~~
 
Status
Not open for further replies.
Top Bottom