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="[e-mail]">Mark</option>
    <option value="[e-mail]">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="[e-mail]">CHANDRA</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 this 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|[e-mail]">Mark</option>
<option value="jane|Jane Smith|[e-mail]">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 "application/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.

[Dormilich]

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.

as if select.value wouldn’t describe what’s happening…

[DMsy2]

It would in the restricted case of a single select.
If however you were traversing a multiple selection list, or some other scenario, then knowing the full derivation would help.

I'm sorry, you seem to be giving me a hard time for just trying to help people?

[Dormilich]

I'm sorry, you seem to be giving me a hard time for just trying to help people?

I am just trying to figure out, what in this case would be the most efficient approach. and of course what the most efficient approach is, can (and probably will) always be debated. and eventually, debates can bring you further in understanding, how JavaScript works.

[acoder]

Don't worry, DMsy2, Dormilich means well :)

On the CDATA, personally, I'd say that you never need it. Why? Put your JavaScript in separate files. Problem solved.

PS. welcome to Bytes and thanks for your input!

[chandhseke]

When i used the above code in onchange event, the textbox will get set with a value "Undefined". Please help?

[chandhseke]

function addEmail() 
{ 
    // += appends some text to something 
    document.getElementById("textbox").value += this.value; 
} 

I called this function within <Select>, but the text box is set with a value "Undefined". Since we are using +=, if we select an item thrice from dropdown, then 3 times a word "undefined" gets set to the textbox "Cat_Email".

Please advise something?

[Dormilich]

how did you attach this function to the event?

[chandhseke]

With the help of an on change event. I enclosed the function within <script> tags as we normally do (within <head> section) and called the function with the help of an onchange event.

[Dormilich]

and called the function with the help of an onchange event.

may I see the code for this?

[chandhseke]

Now it's working, i made a few changes to the code that you provided.

function addEmail()
{
document.getElementById("TextBox").value += this.value;
}

I replaced += this.value with the below:

document.getElementById("TextBox").value = document.getElementById("Select").value

It is working now. Thanks for your support.

[Dormilich]

ahh, yes. good ole event handling. once you understand it, it’s nearly as cool as sliced bread.

[chandhseke]

Yes, you are exactly correct. Thanks again for all your support. Your knowledge about Javascript is really outstanding.

Bye :)

[Dormilich]

you’ll get there, too. though not this time. (pun intended)

Your knowledge about Javascript is really outstanding.

I don’t think so, I just happen to do some proper background reading.

[chandhseke]

May i know why is that used for? I am a newbie, have no much deeper idea about JS.

[Dormilich]

you mean the "this"?
________________

[chandhseke]

Yes I need to know the difference

[Dormilich]

the difference between "this" and …?

[chandhseke]

Sorry for the confusion. I want to know the difference between "this" and the code i replaced with "this.value". Technically, i understood but i need to know why "this.value" gave an error (infact displaying a word "undefined" on all selections.

Why actually "this" is used for?

Again sorry for bothering you a lot in this!!

[Dormilich]

i need to know why "this.value" gave an error

short answer: because you call the function in the wrong scope.

longer answer:
first you have to understand, that JavaScript (as a programming language) is all about objects. (there are some primitive data types though)

that means, that even your HTML page to JavaScript is just an enormous bunch of objects. (more to that later)

but these objects are not equal, they have a "hierarchy". this hierarchy is called scope. you can imagine that a particular scope is like a layer or an environment of an object. you may have heard that the environment inside a function is called local scope, and everything that is defined top level (e.g. not inside a function) is called global scope. meaning if you have a variable defined inside a function, it can access (read) every other variable, that has the same or a higher scope.
(you probably have to google for articles regarding this stuff to get a deeper understanding)

<script type="text/javascript">
var x = 0; // global scope
var y = "some text in global scope";
 
function myFunc1()
{
    var y = 1; // local scope
    var a = "another local var";
    alert(y); // shows the local variable ("1") and not the global one
    alert(x); // shows "0"
// show local variable x, if there ain’t any, look in the next level (global scope)
}
 
function myFunc2()
{
    var z = "Byte"; // local
    alert(z); // show local
    alert(a); // shows "undefined"
// because a is neither defined in local scope, nor in global scope.
// it only exists in the local scope of myFunc1
}
</script>

you might have guessed … functions are objects (weird, but true)

you might get the dim idea, that when your change event appended "undefined" exactly this is happening, but why? because there are some functions, that change the scope of a function (or object).

those functions are (not a complete list)

• setTimeout()
• setInterval()
• addEventListener()
• removeEventListener()
• call()
• apply()

and I forgot to mention somthing important, even the global scope is tied to an object. the window object (the same as in window.open()).

if you read about objects, you learn some basic features they have, that is, they have members called properties and methods*. properties are "variables", that can only be called from the object, that owns these properties.

* - methods are a synonym for functions, an object may execute. but from the JavaScript-point-of-view that doesn’t matter, because everything is an object, be it an array, a string, a number (…) or a function

so let me rephrase the above list

• window.setTimeout()
• window.setInterval()
• Element.addEventListener()
• Element.removeEventListener()
• Function.call()
• Function.apply()

I said, these fu–methods change the scope of the functions they execute. that is, the keyword this no longer points to the scope, the function was defined in but the scope of the executing object.

example:

// HTML
<div id="test" title="some meaningless text">just an example</div>
 
// JS
// define a function showing the title property of the current object at execution time
function myFunc()
// the same as: window.myFunc = function()
// though there are some utterly fine differences
{
    alert(this.title);
}
// get the element object
var div = document.getElementById("test");
// would be the same as
window.div = document.getElementById("test");
 
// alerts "undefined", because there is no window.title property (… yet ;) )
myFunc();
// window.myFunc();
 
// alerts "some meaningless text" when you click on the div
div.addEventListener("click", myFunc, false);

you may argue, that you have defined the event, but it still doesn’t work…

… well, inline JavaScript is different (and IMO ugly)

if you code

<div id="test" title="some meaningless text" onclick="myFunc()">just an example</div>

then myFunc() is still executed in global scope (aka window) showing "undefined".

however, you can explicitly pass a reference to the current object (even more ugly :).

<div onclick="someFunc(this)">kick me</div>

(I don’t wanna go into detail here)

another way to bind the event would use the onevent attribute, but this does not allow for event capturing** (which is possible with addEventListener)

** - note: IE does not support event capturing at all

[chandhseke]

Thats really a very good piece of information. Thanks a lot folk.

Regardong the main subject of this thread. How can set the drop down ITEM selected (Not the value) to a hidden text box and where should i call this function?

Chandhseke

[Dormilich]

dropdown item = selected option element text content?

just the same event as if you were using the value. you only have to access the piece of information differently than in case of value (you need the select.options list)

[chandhseke]

Hi Folk,

Can you give me an example please? I did it few times but did not work to me, am running short of time for my project submission.

I repeat the question: I want the drop down selected item to pass to a hidden text box using JavaScript.

<option value="[e-mail]">Chandhu</option>

I want to pass "Chandhu" to a hidden text box so that i can insert this value intoo database.

Thanks in advance. This subject discussion taught me a lot about javascript.
Thanks again.

Chandhseke

[Dormilich]

I already did. post #12, 2nd code box.

[chandhseke]

That is not working to me ( I maay not using it correctly either). I tried the one in post #12 anad below: Both did not gave me a solution

functiion addemail()
{
document.getElementByID("hidtext").value = document.getElementById("Select").options[i].text;
}

Please advise.

Chandhseke

[Dormilich]

point 1: "function" contains only a single "i"
point 2: "getElementByID()" is an incorrect call (it’s getElementById(), JavaScript is case-sensitive)
point 3: the variable "i" is undefined
point 4: the example code shows, how to use the options property correctly

[chandhseke]

document.getElementById("text").value = this.options[this.selectedIndex].text;

In the above example of post #12, can we write a code without using "this" property since the above code returned a JS error while i run the script.

[Dormilich]

sure, replace this by a reference to the select element. though if you’re already using the function, that passes the email address (through this) it would make sense to add that line into the function (unless you can’t do this due to some reasons)

since the above code returned a JS error while i run the script.

most probably called in the wrong scope.

PS. if you keep all your JavaScript in an external file, your HTML will look much more lucid (plus you don’t have to update the HTML if something changes in the JS).

[chandhseke]

Do you mean to say like below,

document.getElementById("hidtext").value = document.getElementByID("select").options[this.selectedIndex].text;

Correct the above code if i am wrong, i am trying to understand how exactly does it works.

Chandhseke

[Dormilich]

1) JavaScript is case-sensitive
2) I still can see a "this"

[chandhseke]

I think its better you please correct the example code that i sent you!!.

[Dormilich]

and next time, when I’m not around to have a look at? you need to learn to get better and that requires effort.

[chandhseke]

Yes thats right!! I was running out of time so was in a hurry to get an answer.

So we need to replace "this" with a select item reference.

document.getElementById("hidtext").value = document.getElementById("select").options[select.selectedIndex].text;

or

document.getElementById("hidtext").value = document.getElementById("select").options[document.getElementById("select").selectedIndex].text;

Please advise.

[Dormilich]

second one looks correct. first one: select is undefined.

PS. as you can see, there is less code to write using this (one argument to use it)

[chandhseke]

Thats awesome you made me think and do it by my own. I really very thank ful to you. i always look forward to work with you in future.

Thanks a lot and the code is working as intended!!

Chandhseke

[Dormilich]

I still know how hard it was to understand Closures.