0

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"/>
Improve this question
12
  • 3
    Do you have two elements with the same id? Commented Dec 19, 2012 at 1:02
  • No. document.getElementById returns only the first appearance. However, you could use document.querySelectorAll("#id") if you really needed them. Commented Dec 19, 2012 at 1:04
  • No, I have $kontypeID = $rowSelect['kontypeID']; $kontypeTitel = $rowSelect['kontypeTitel']; from a selectbox that I need to write to seperate textfields Commented Dec 19, 2012 at 1:10
  • how does the document.querySelectorAll("#id") looks like? Commented Dec 19, 2012 at 1:22
  • 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? Commented Dec 19, 2012 at 1:24

2 Answers 2

Reset to default
1

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I've just tried that but it doesnt work, can you show me more specific please?
If you want to use the jQuery method you have to include the jQuery library in the <head> of your page. You can download it here.
Why would you "sort of do it twice" and not do it once before and store it?
like: <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.7.1/…> but jQuery?
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
|
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.

Improve this answer

14 Comments

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.
@ErikE I have this $kontypeID = $rowSelect['kontypeID']; $kontypeTitel = $rowSelect['kontypeTitel']; Your example of run() writes out the same value..?
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 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
you can see what I'm trying to do her jsfiddle.net/wnmcL/40
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.