document.getElementById with two values

Question

How is it possible to get two values with document.getElementById?

I have this code, where I'm trying to get the kontypeID and kontypeTitel from a selectbox to be written to text fields:

<select id="select" name="select" onchange="run()">                  
<?php
    $virksomhedsID = $_SESSION['virkID'];
    $sql = "SELECT * FROM konkurrenceType ORDER BY konkurrenceType.kontypeID";
    $result = mysql_query($sql) or die(mysql_error());                  

    echo '<option value="Vælg type">Vælg type</option>';

    while($rowSelect = mysql_fetch_assoc($result))
    { 
        $kontypeID = $rowSelect['kontypeID'];
        $kontypeTitel = $rowSelect['kontypeTitel'];             
        echo '<option value="' . $kontypeID . '">' . $kontypeTitel . '</option>';
    }
?>                    
</select>

<script>
    function run() {
        var select = document.getElementById("select");
        document.getElementById("valgtID").value = valgtTitel.options[select.selectedIndex].innerHTML;
        document.getElementById("valgtTitel").value = valgtTitel.options[select.selectedIndex].innerHTML;
    }
</script>

<input type="text" name="valgtID" id="valgtID"/>
<input type="text" name="valgtTitel" id="valgtTitel"/>

No. `document.getElementById` returns only the first appearance. However, you could use `document.querySelectorAll("#id")` if you really needed them. — Bergi, Dec 19 '12 at 01:04
No, I have $kontypeID = $rowSelect['kontypeID']; $kontypeTitel = $rowSelect['kontypeTitel']; from a selectbox that I need to write to seperate textfields — M Nielsen, Dec 19 '12 at 01:10
Are you saying that you want to be able to set the value of 2 different text areas to the same text, at the same time? — ErikE, Dec 19 '12 at 01:24
I'm saying that I need to get the ID and the Title from the selected written to each text field, but I'm not sure how to do it best. When one item is selected it writes the id in one field and the title in another field, so I can use the values — M Nielsen, Dec 19 '12 at 01:29
possible duplicate of [How to get a selected option's value](http://stackoverflow.com/questions/6386219/how-to-get-a-selected-options-value) and [JavaScript retrieving the text of the selected option in select element](http://stackoverflow.com/questions/610336/javascript-retrieving-the-text-of-the-selected-option-in-select-element) --- `getElementById` always return a DOM element. You want two specific properties of that DOM element, so you have to access those accordingly. — Felix Kling, Dec 19 '12 at 01:30
@Felix thats where I am at, but I need both values to written to seperate text fields — M Nielsen, Dec 19 '12 at 01:33
Oh... I think now I understood... you want to select both elements at the same time and assign the same value to it? That's just not possible, you have to access each element explicitly and assign the new value. — Felix Kling, Dec 19 '12 at 01:35
No. The selectbox uses the values kontypeID and kontypeTitel and I need each of them to be written to seperate input text fields when the user makes his choice. I can make it with one value, but I'm not sure how to get both values — M Nielsen, Dec 19 '12 at 01:53
On your jsfiddle example you have used different ID names than what you have listed here. — Colin Pear, Dec 19 '12 at 20:09

Colin Pear · Answer 1 · 2012-12-19T20:03:33.097

With jQuery you can get the value and the text of the currently selected option:

$('#select').val();
$('#select').text();

Or you can get the values of a specific option:

$("#select option[value='2']").val();
$("#select option[value='2']").text();

If you really want to use getElementById then you have to sort of do it twice to grab the selected index value and pass it into itself like:

document.getElementById("select").options[document.getElementById("select").selectedIndex].value //accesses value attribute of selected option
document.getElementById("select").options[document.getElementById("select").selectedIndex].text //accesses text of selected option

UPDATE: Since you dont understand what I have posted I went ahead and added a full and completely coded and tested solution. This actually goes one more step by adding the eventlistener in the code rather than on the selectbox itself:

<html>
<body>
<select id="select">
     <option value="0" id="0">Select</option>
     <option value="1" id="titel 1">titel 1</option>
     <option value="2" id="titel 2">titel 2</option>
     <option value="3" id="titel 3">titel 3</option>     
</select><br><br>

ID<input type="text" id="id">
Titel<input type="text" id="titel">

<script type="text/javascript">
    document.getElementById("select").onchange = function () {

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

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

    };
</script>
</body>
</html>

I've just tried that but it doesnt work, can you show me more specific please? — M Nielsen, Dec 19 '12 at 01:26
If you want to use the jQuery method you have to include the jQuery library in the of your page. You can download it [here](http://jquery.com/download/). — Colin Pear, Dec 19 '12 at 01:33
Why would you "sort of do it twice" and not do it once before and store it? — Ian, Dec 19 '12 at 01:41
sorry @ErikE you're absolutely right. I deleted my comment to avoid confusion for the OP T-T it was late at night when I made that comment but that isn't really an excuse. thanks for correcting me — aug, Dec 19 '12 at 22:55

ErikE · Accepted Answer · 2012-12-19T19:17:00.040

0

You're using valgtTitel.options but I don't see valgtTitel declared or set anywhere. Did you mean select.options?

Try the following code (and here's a jsfiddle to try it out):

function run() {
   var select = document.getElementById("select"),
      option = select.options[select.selectedIndex];
   document.getElementById("id").value = option.id;
   document.getElementById("titel").value = option.innerHTML;
}

If you are new to javascript or new to web page manipulation with javascript, I recommend that you use the jQuery library. There is value to learning how to do all this stuff with raw javascript--and you should do that. After you get up to speed on using jQuery. Why? Because time is money and your business wants productivity from you sooner rather than later, and there is no harm in starting with jQuery first. Things become a lot easier with a library like that.

edited Dec 19 '12 at 19:17

answered Dec 19 '12 at 01:28

ErikE

48,881
23
151
196

You actually recommend jQuery first? That's exactly why people have so many questions on here. They use stuff before they understand how/what something does, and they probably continue to use it the wrong way. – Ian Dec 19 '12 at 01:42
@ErikE I have this $kontypeID = $rowSelect['kontypeID']; $kontypeTitel = $rowSelect['kontypeTitel']; Your example of run() writes out the same value..? – M Nielsen Dec 19 '12 at 02:02
Why do you answer with a question? We don't have enough detail!!! What are you trying to accomplish? **You MUST tell us more or we cannot help you**. It sounds like maybe you are mixing up the concepts of server-side and client-side variables. The code that runs on your web server has variables that are *not accessible* from the browser. The only things the browser has access to are only those things that have been sent to the client using `echo`. ALL the server-side code runs, creates a page, and then the client has a static copy of the page. There is no interaction of variables. – ErikE Dec 19 '12 at 03:58
@ErikE I made it as an answer because its easyer to paste code that way. Let me try to explain it a litle bit better.Im trying to connect a bunch of teams to a competition. And what I'm doing right now is trying to get the values ($kontypeID = $rowSelect['kontypeID']; $kontypeTitel = $rowSelect['kontypeTitel'];) from the competition that the user chooses. I'd like these values to be written in each input text field so I can use these values to insert into db with the teams chosen in checkboxes. So for now I'd like to get the kontypeID written in a texfield and kontypeTitel in another textfield – M Nielsen Dec 19 '12 at 12:23
you can see what I'm trying to do her http://jsfiddle.net/wnmcL/40/ – M Nielsen Dec 19 '12 at 12:43
For whatever reason jsfiddle wont run this code. See my example above. – Colin Pear Dec 19 '12 at 20:07
YES YES YES!! Thank you guys it works!! my god I have spend soo long on this.. – M Nielsen Dec 19 '12 at 20:15
How can i get more values out in the same way, lets say I also want the desription of the competition, kontypeBeskriv how can I add another document.getElementById("valgtTitel").value = option.innerHTML; – M Nielsen Dec 19 '12 at 20:21
@ColinPear The JSFiddle works fine for me and M Nielsen... – ErikE Dec 19 '12 at 20:22
You could put the description in a data tag of the option such as ` – ErikE Dec 19 '12 at 20:23
I've added echo ''; and function run() { var select = document.getElementById("select"), option = select.options[select.selectedIndex]; document.getElementById("valgtID").value = option.id; document.getElementById("valgtBeskriv").value = option.data-description; document.getElementById("valgtTitel").value = option.innerHTML; } but it doesn't work.. – M Nielsen Dec 19 '12 at 20:38
@ErikE I don't know much about jQuery.. – M Nielsen Dec 19 '12 at 20:39
@Colin Can you help me with the last part? – M Nielsen Dec 19 '12 at 22:04
@MNielsen It's time for you to ask a new question. Accessing the data tag of an option is hard to do cross-browser without a javascript library. Please ask a new question and provide a link here and I will try to help you. In your new question, provide a jsfiddle example and people can help you get it working. – ErikE Dec 19 '12 at 22:53

document.getElementById with two values

2 Answers2