RE: Javascript GetElementByID

[chandhseke]

Hi Folks,

I have designed a HTML page, where i have a dop down box with 5 names. When a particular name is selected from a drop down, an approproiate email address should be automaticallay set to a text box which holds email adresses.

Here is the code below : Please help

<td>
<select name="Cat" id="Cat" style="width: 238px">
       <option value="Select">Select</option>
       <option value="Mark">Mark</option>
       <option value="Jay">Jay</option>
       <option value="Chris">Chris</option>
       <option value="Martin">Martin</option>
 </select></td>
<td><input type="text" name="Cat_Email" style="width: 250px" /></td>

I am looking for a Javascript code, so that if "Mark" is selected from the drop down box, the text box "Cat_Email" should automatically get set with his email address "XXX".. If Jay is selected then YYY etc.

Please Help..

Thanks in advance.

Regards,
Chandhseke

[Dormilich]

what about putting the email address in the option’s value attribute? the you can copy over.

// in case of event (select element)
function populate()
{
// put an id to the input element
    document.getElementById("catmail").value = this.value;
}

[chandhseke]

I am trying the following, please advise if this is a wrong approach.

<script language="Javascript">
function Cat_Dir()
{
var res;
var w=document.SDS_step_one.Cat.selectedIndex;
var selected_text=document.SDS_step_one.Cat.options[w].value;
if (selected_text == "Mark")
{
document.SDS_step_one.CatEmail.value = "ABC"
}
</script>

But this is not working to me..Please correct the code for me!!

[chandhseke]

I did it, i got the answer.

<script type="text/javascript"> 
function addit(){ 
    if(document.getElementById("cat").value=="Mark") 
    { 
        document.getElementById("catEmail").value="XXX" 
    } 
    if(document.getElementById("cat").value=="Jill") 
    { 
        document.getElementById("catEmail").value="AABC" 
    } 
    if(document.getElementById("cat").value=="Rock") 
    { 
        document.getElementById("catEmail").value="Apache" 
    } 
} 
</script>

[chandhseke]

Thanks for your support!!

[Dormilich]

just a question, do you need this dropdown for anything else than this email thingy?

[chandhseke]

No i just wanted to automatically display the associated email address of the person when a name is selected from a drop down... This drop down contains only 5 - 6 names so i thought of hard coding it using Javascript.. Is there any other way since i have similar requirement where the drop down contains too many Names.

Please advise if any other approach that i can follow. Thank you!!

[Dormilich]

then I’d say, put the email addresses in the value attrribute of the option element and pass over the value to the input field (or whatever element).
like

<select … >
    <option value="mark@example.org">Mark</option>
    <option value="jane@example.org">Jane</option>
    …
</select>

[chandhseke]

But i want to see both "Name" and "Email" address stored separately in the database.. And more over, there is an automated email mechanism incorporated which will take this email address as a recipient.

Basically, we have a drop down and a text box.. If a name, say "Chandh" is selected from the drop down, his email address should get set to text box.

[Dormilich]

But i want to see both "Name" and "Email" address stored separately in the database..

no problem. send the email to one input the name to another input and don’t name the select (so the value doesn’t get submitted).

If a name, say "Chandh" is selected from the drop down, his email address should get set to text box.

I already got that point. this is what my initial code would do (ok, you need to use += instead of =)

[chandhseke]

1. Yes. Since i am very new and still a learner I understand the above statement but it would be great if you give me a sample code.

2. Regarding binding of drop down values, how can we pass a selected drop down items value attribute to a text box using javascript function.

Example:
<option value="chandra@ example.org">CH ANDRA</option>

How can we set the value attribute to a text box while a user selects the ITEM CHANDRA.?

Thanks is advance.

Chandhseke

[Dormilich]

How can we set the value attribute to a text box while a user selects the ITEM CHANDRA.?

that is quite simple. when you select Chandra, you change the value of the select element (but the value of the option element stays the same)

// this function is applied to the select element
// and because the scope changes [I]this[/I] refers to the element itself
function addEmail()
{
    // += appends some text to something
    document.getElementById("textbox").value += this.value;
}
// call the function above on the select element in case of an onchange event
// IE has its own way (google for addEvent() (crossbrowser event handling))
document.getElementById("select").addEventListener("change", addEmail, false);

to pass "Chandra" to a field (e.g. hidden input) simply add

// the input field
// get the text node from the currently selected option element
document.getElementById("hidinp").value = this.options[this.selectedIndex].text;

[DMsy2]

Consider;

<select on{event}="GetValues(this);" >
<option value="mark|Mark Jones|mark@example.org">Mark</option>
<option value="jane|Jane Smith|jane@example.org">Jane</option>
…
</select>


<script type="text/javascript">
// <![CDATA[

function GetValues(el)
{
	data = el.options[ el.selectedIndex ].value;
	info = data.split("|");

	document.getElementById("catuser").value = info[0];
	document.getElementById("catname").value = info[1];
	document.getElementById("catmail").value = info[2];
}

// ]]>
</script>

[Dormilich]

// <![CDATA[
// ]]>

you only need this if you serve your document with the "text/xml" or "applicatio n/xhtml+xml" MIME type (which hardly anyone does)

function GetValues(el)
{
	data = el.options[ el.selectedIndex ].value;
	// …
}

that’s the same as

data = this.value;

(the currently selected option’s value is the value of the <select> element)

	info = data.split("|");

	document.getElementById("catuser").value = info[0];
	document.getElementById("catname").value = info[1];
	document.getElementById("catmail").value = info[2];
}

good idea

<select on{event}="GetValues(this);" >
…
</select>

once you overcome IE’s poor event handling, inline JavaScript appears chunky

[DMsy2]

1/ CDATA
It is good practice to do ths and allows for validation tools to run properly. So I use it.

2/ not just "el.value"
This is an example, so I've written it to show what is happening and how/why, in case of future extension.