/    Sign up×
Community /Pin to ProfileBookmark

Problem with making function generic

I have a simple function which if somone selects an option from a drop down list, populates the selected value into a text box, or allows the user to type a value into the text box. The script works fine, if I use the name of the select box and text box in the function, if I try to use variables it won’t work. As I have multiple pairs of boxes I only want to write the function once, and send the box names as variables, but I can’t get it to work. Where am I going wrong?

This is my original code:

function insertCustName()
{
document.form1.CUSTOMER.value=document.form1.CustNameList.options[document.form1.CustNameList.value].text
}

function resetCustNameList()
{
document.form1.CustNameList.value=document.form1.CustNameList.options[0].text
}

<SELECT NAME=CustNameList onchange=”insertCustName()”>
<OPTION VALUE=0 SELECTED></OPTION>
<OPTION VALUE=1>Customer 1</OPTION>
<OPTION VALUE=2>Customer 2</OPTION>
</SELECT>
<INPUT TYPE=”text” NAME=”CUSTOMER” SIZE=15
onChange=”javascript:this.value=this.value.replace(‘&’,’+’);this.value=this.value.toUpperCase();resetCustNameList()”>

I thought this would work, but it doesn’t

function insertName(Value1,Value2)
{
document.form1.Value1.value=document.form1.Value2.options[document.form1.Value2.value].text
}

function resetList(Value3)
{
document.form1.Value3.value=document.form1.Value3.options[0].text
}

<SELECT NAME=CustNameList onchange=”insertName(CUSTOMER,CustNameList)”>
<OPTION VALUE=0 SELECTED></OPTION>
<OPTION VALUE=1>Customer 1</OPTION>
<OPTION VALUE=2>Customer 2</OPTION>
</SELECT>
<INPUT TYPE=”text” NAME=”CUSTOMER” SIZE=15
onChange=”javascript:this.value=this.value.replace(‘&’,’+’);this.value=this.value.toUpperCase();resetList(CustNameList)”>

to post a comment
JavaScript

9 Comments(s)

Copy linkTweet thisAlerts:
@konithomimoNov 22.2005 — give your drop down and text field unique IDs, then use this:
<i>
</i>&lt;script type="text/javascript"&gt;
function showValue()
{
var i;
var drop = document.getElementById('dropdownID');

for (i=0;i&lt;drop.length;i++)
{
if (drop.options[i].selected == true)
{
document.getElementById('displayValue').value = drop.options[i].value;
}
}
}
&lt;/script&gt;


For the above code I used IDs of 'dropdownID' for the ID of the drop down and 'displayValue' for the ID of the text field where the value should be displayed.
Copy linkTweet thisAlerts:
@TewyauthorNov 24.2005 — Thanks for your reply, but its not quite what I meant. Using your example, if I had two drop down boxes, dropdownID1 and dropdownID2 and two text boxes displayValue1 and displayValue2, how would I get the function to work for both, by sending the name of the drop down box and text box when I call the function?

I can get it to work if I code the names of the boxes into the function, but then I need a separate function for each dropdown box.
Copy linkTweet thisAlerts:
@KorNov 24.2005 — send some parameters to the function:
[code=php]
<script type="text/javascript">
function populateBox(f,v,w){
f.elements[w].value =v
}
</script>

...
<select name="dropdownID1" onchange=populateBox(this.form,this.value,'displayValue1')>

...

<select name="dropdownID2" onchange=populateBox(this.form,this.value,'displayValue2')>
[/code]


using square brackets notation you may use variables to manipulate dinamically the elements

document.forms[[I]formname_or_index[/I]].elements[[I]elementname_or_index[/I]]
Copy linkTweet thisAlerts:
@konithomimoNov 24.2005 — <i>
</i>&lt;script type="text/javascript"&gt;
function showValue(dropdown,textname)
{
var i;
var drop = document.getElementById(dropdown);

for (i=0;i&lt;drop.length;i++)
{
if (drop.options[i].selected == true)
{
document.getElementById(textname).value = drop.options[i].value;
}
}
}
&lt;/script


Then just call it like this:
<i>
</i>onchange=showValue(this.id,'displayValue1')
onchange=showValue(this.id,'displayValue2')


Where 'displayValue1' and 'displayValue2' are the names of the textboxes. The onchange goes in your dropdown tag, which must also have an ID.
Copy linkTweet thisAlerts:
@KorNov 25.2005 — 
if (drop.options[i].selected == true)

{

document.getElementById(textname).value = drop.options[i].value;

[/quote]


Why so intricate?

document.getElementById(textname).value = drop.value;

will be enough, as in case of a simple list, the select's value is always the selected option's value
Copy linkTweet thisAlerts:
@konithomimoNov 25.2005 — Why so intricate?

document.getElementById(textname).value = drop.value;

will be enough, as in case of a simple list, the select's value is always the selected option's value[/QUOTE]


because more things can be done with it like that that without it like that. What if the user decided that if an odd select was chosen that they want to do something and if it is an even then do something else?? you cannot do much if you use:

document.getElementById(textname).value = drop.value;

True that is the most direct for what the user specified, but I tend to think of code reusability and functionality, not just most direct.
Copy linkTweet thisAlerts:
@KorNov 28.2005 — 
you cannot do much if you use:

document.getElementById(textname).value = drop.value;
[/quote]

You don't understood the essence.

document.getElementById(textname).value = drop.value;

do exactly the same with

document.getElementById(textname).value = drop.options[drop.selectedIndex].value;

but the code is shorter.
Copy linkTweet thisAlerts:
@konithomimoNov 28.2005 — You don't understood the essence.

document.getElementById(textname).value = drop.value;

do exactly the same with

document.getElementById(textname).value = drop.options[drop.selectedIndex].value;

but the code is shorter.[/QUOTE]

Obviously you didn't read/comprehend all of my last post . . . I know those do the same thing, but by knowing what option # you are using you can affect other changes . . . for instance if you want something to happen only if the first two options are chosen. You can't do that if you just know the value of the option that was selected.
Copy linkTweet thisAlerts:
@KorNov 29.2005 — I said:

will be enough, as in case of a [COLOR=Red]simple[/COLOR] list...
[/quote]

You are perfectly right, but in case of [COLOR=Red]multiple[/COLOR] boxes...
×

Success!

Help @Tewy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...