CODEWITHSUNDEEP
javascripthtmlforms
SomeOne
SomeOne

Reputation: 469

Option value using JavaScript

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?

Upvotes: 1

Views: 202

Answers (2)

Tom
Tom

Reputation: 4180

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>

Upvotes: 1

Bergi
Bergi

Reputation: 664297

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;
    };

Upvotes: 0

Related Questions