How to set value of the input when I use select option? Java script with if

Question

I have following scripts:

<!DOCTYPE html>
<HTML>
    <HEAD>
        <META charset="UTF-8">
        <SCRIPT src="scripts2.js"></SCRIPT>
    </HEAD>
    <BODY>
        <FORM>
            <SELECT name="receipt" onchange="set_input_value()">
                <OPTION id="P" value="P">P / </OPTION>
                <OPTION id="b" value="b">b / </OPTION>
            </SELECT>
            <INPUT type='text' id='id1' />
        </FORM>
    </BODY>
</HTML>

and

function set_input_value(){
    if(document.getElementById('P').value=='P'){
        document.getElementById('id1').value='1';
    }
    if(document.getElementById('b').value=='b'){
        document.getElementById('id1').value='2';
    }
}

I want to make something like. If I choose option 'P' set the value of the input on 1. If I choose option 'b' set the value of the input on 2.

Sorry, if it has been solved somewhere, but I didn't find it. Thanks for help.

You should correct your function name to a more acceptable one too: set_input_value() -> setInputValue() — Alexis Leclerc
– Alexis Leclerc, Commented Feb 14, 2014 at 21:36
@AlexisLeclerc How is set_input_value bad? Looks like a style decision, to me. It has no impact on how it works. — Scott Mermelstein
– Scott Mermelstein, Commented Feb 14, 2014 at 21:39
@ScottMermelstein He sure has the right to have his own naming style, but one should try to follow the coding conventions of the used language as much as possible, the same way I cAn DeCiDe To WrItE lIkE tHiS iF I wAnT, bUt It WiLl LoOk AwKwArD! — Alexis Leclerc
– Alexis Leclerc, Commented Feb 14, 2014 at 21:57

shadowfox · Accepted Answer · 2014-02-14 21:42:58Z

You need to check the value of the SELECT element. You are getting the OPTION element by id and checking its value. Change it to this:

<!DOCTYPE html>
<HTML>
    <HEAD>
        <META charset="UTF-8">
        <SCRIPT src="scripts2.js"></SCRIPT>
    <SCRIPT type='text/javascript'>
    function set_input_value(){
        if(document.getElementById('receipt').value=='P'){
            document.getElementById('id1').value='1';
        }
        if(document.getElementById('receipt').value=='b'){
            document.getElementById('id1').value='2';
        }
    }
    </SCRIPT>
    </HEAD>
    <BODY>
        <FORM>
            <SELECT id='receipt' name="receipt" onchange="set_input_value()">
                <OPTION id="P" value="P">P / </OPTION>
                <OPTION id="b" value="b">b / </OPTION>
            </SELECT>
        <INPUT type='text' id='id1' />
        </FORM>
    </BODY>
</HTML>

Scott Mermelstein · Accepted Answer · 2014-02-14 21:43:58Z

1

You can keep your markup cleaner by creating event handlers completely in JavaScript, you can also make use of this to find the currently selected value. You should be giving an ID to your select element and not the option children:

<select id="receipt">

document.getElementById("receipt").onchange = function() {
    var input = document.getElementById('id1');
    // You could do this.  The select box will take on the selected option's value:
    // var value = document.getElementById("receipt").value;
    // but since `this` already is the select box, you can just do it this way:
    var value = this.value;

    if (value == "b")
        input.value = 2;
}

edited Feb 14, 2014 at 21:43

Scott Mermelstein

15.4k4 gold badges51 silver badges77 bronze badges

answered Feb 14, 2014 at 21:39

tymeJV

105k14 gold badges165 silver badges158 bronze badges

1 Comment

Scott Mermelstein Over a year ago

I tweaked your code with some comments. If that was rude or offensive, feel free to roll it back.

Vinicius Lima · Accepted Answer · 2014-02-14 22:08:49Z

Follow the suggest using jQuery.
I put all code.

HTML + JQuery:

<!DOCTYPE html>
<html>
    <head>
        <title>StackTest</title>        
    </head>
    <script src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <script>
        function changeValue(valor) {
            if(valor == 'P') {
                $('#text1').val('1');
            } else if (valor == 'b') {
                $('#text1').val('2');
            } else {
                $('#text1').val('');
            }
        }
    </script>
    <body>
        <select id="combo" onchange="changeValue(this.value)">
            <option value=""></option>
            <option value="P">P /</option>
            <option value="b">b /</option>
        </select>
        <input type="text" id="text1" />
    </body>
</html>

Collectives™ on Stack Overflow

How to set value of the input when I use select option? Java script with if

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related