Option value using JavaScript

Question

I have a form with the following field:

<input type="text" name="text" id="text">

I want that JavaScript takes the value of the field, so I think I should use the following code:

<script language="javascript">
    function GetTextBoxValue(text)

    {

        alert(document.getElementById(text).value);

    }
//-->
</script>

This code has to change the value of a drop-down option.

<option value="value from JavaScript/text from the textbox">other</option>

Is that possible that text from the textbox is the value of the option? If yes, what I have to write here option value="value from JavaScript" so it would work correctly?

It's possible, but you'd have to either dynamically create the <option> element using Javascript and then append it to the correct <select> element, or dynamically update the <option> elements value property. — Anthony Grist
– Anthony Grist, Commented Jul 24, 2012 at 15:32
have you tried anything? if you google "get value from input javascript" and "change option value with javascript" you could have already had the answer — Phil
– Phil, Commented Jul 24, 2012 at 15:34
Surely this is possible. What exactly do you want to do, when should this action happen? — Bergi
– Bergi, Commented Jul 24, 2012 at 15:34
@Bergi I'd vote for the blur event fired from that textbox, though keypress or keyup may also be suitable choices. — Anthony Grist
– Anthony Grist, Commented Jul 24, 2012 at 15:35
@AnthonyGrist: Sure these are possibilities, but I asked the OP... — Bergi
– Bergi, Commented Jul 24, 2012 at 15:39

Tom · Accepted Answer · 2012-07-24 19:08:14Z

1

here is a demo:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function setOptionValue() {
                document.getElementById("option").value = document.getElementById("text").value;
                document.getElementById("option").text = document.getElementById("text").value;
            }
        </script>
    </head>
    <body>
        <input id="text" />
        <select>
            <option id="option"></option>
        </select>
        <button type="button" onclick="setOptionValue()">Set a value in the text box and press me</button>
    </body>
</html>

edited Jul 24, 2012 at 19:08

answered Jul 24, 2012 at 15:34

Tom

4,1702 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anthony Grist Over a year ago

That doesn't do anything, though, since setOptionValue() is never called.

SomeOne Over a year ago

@Tom I tried this code but it isn't working. I wrote some text into the textbox and clicked on the button but nothing happened.

Tom Over a year ago

yes, you won't see it happen, but the value of the option will be set; I'll edit my code so the text of the option will also be set.

Bergi · Accepted Answer · 2012-07-24 18:22:01Z

0

OK, I see two solutions for your problem. The first is a live value update:

<select id="folder" name="folder">
   <option ...
   ... </option>
   <option id="otheroption" value="New">Other</option>
</select>
<div id="otherfolder" style="display:none">
   <label for="otherinput">New folder name:</label>
   <input id="otherinput">
</div>
<script> // here, or execute the following onload/ondomready
    document.getElementById("folder").onchange = function(e) {
        // I guess you have this piece of code already
        document.getElementById("otherfolder").style.display =
            this.options[this.selectedIndex].id == "otheroption" ? "" : "none";
    };
    document.getElementById("otherinput").onkeyup = function(e) {
        document.getElementById("otheroption").value = this.value;
    };
</script>

The second one would be to dynamically change the names of the select and input boxes (with quite the same markup), to determine which value would be sent to the server as the folder parameter:

    document.getElementById("folder").onchange = function(e) {
        var name = "folder",
            other = this.options[this.selected].id == "otheroption";
        document.getElementById("otherfolder").style.display = other ? "" : "none";
        document.getElementById("otherinput").name = other ? name : "";
        this.name = other ? "" : name;
    };

edited Jul 24, 2012 at 18:22

answered Jul 24, 2012 at 17:17

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

3 Comments

SomeOne Over a year ago

Thank you, it's working! But there's still a small problem. If I enter a new folder's name into the box, for example "picture", then a folder called "pictur" is created. For some reason the last letter is omitted. Do you have any idea, why?

Bergi Over a year ago

Uh, sure. When the keypress event fires, the new letter has not yet appeared. I guess this is fixed with my last edit

SomeOne Over a year ago

Thank you! It's working very well now. I'm really-really grateful for you!

Collectives™ on Stack Overflow

Option value using JavaScript

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related